Env Table

# Brok UI: Env Table (`env-table`)

A read-only environment-variable table with masked secret values, click-to-reveal, environment badges and a copy-.env action.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add env-table
```

## Usage

```blade
<x-ui.env-table
    title=".env.production"
    class="w-full"
    :variables="[
        ['key' => 'DATABASE_URL', 'value' => 'postgres://user:[email protected]:5432/app', 'environment' => 'production', 'description' => 'Primary Postgres connection string.'],
        ['key' => 'NEXT_PUBLIC_API_URL', 'value' => 'https://api.example.com/v2', 'environment' => 'production', 'description' => 'Public API base URL.'],
        ['key' => 'STRIPE_SECRET_KEY', 'value' => 'sk_live_51HhelloWorldExampleKey00', 'environment' => 'production', 'description' => 'Server-side Stripe key.'],
    ]"
/>
```

## Props

- `variables` (array, default `[]`)
- `title` (mixed|null, default `null`)
- `defaultRevealed` (bool, default `false`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Listing environment variables with their values and the environments they apply to.
- Showing configuration that contains secrets, which must stay masked until asked for.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Editing configuration; the table is read-only.
- Displaying a real production secret: masking is a shoulder-surfing guard, not access control.

## Anti-patterns

- Exposing developer tooling in end-user flows without a task need

## Rules

- Use the `<brok:env-table>` tag (or `<x-ui.env-table>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/env-table
- Registry JSON (files, props, contract): https://brokui.dev/r/open/env-table.json

@props([
    'variables' => [],
    'title' => null,
    'defaultRevealed' => false,
])

@php
    // Each variable: ['key' => string, 'value' => string, 'environment' => ?string,
    // 'description' => ?string]. Values are masked to a short prefix + dots; the
    // real value still lives in the DOM (toggled with x-show) — this component is
    // for documenting variables, not for hiding live production secrets.
    $defaultRevealed = filter_var($defaultRevealed, FILTER_VALIDATE_BOOLEAN);

    $mask = function (string $value): string {
        $len = mb_strlen($value);
        if ($len === 0) {
            return '';
        }
        $head = mb_substr($value, 0, min(4, $len));
        return $head.str_repeat('•', max(4, min(8, $len - mb_strlen($head))));
    };

    $rows = [];
    $envLines = [];
    foreach ($variables as $variable) {
        $key = (string) ($variable['key'] ?? '');
        if ($key === '') {
            continue;
        }
        $value = (string) ($variable['value'] ?? '');
        $rows[] = [
            'key' => $key,
            'value' => $value,
            'masked' => $mask($value),
            'environment' => $variable['environment'] ?? null,
            'description' => $variable['description'] ?? null,
        ];
        $envLines[] = "{$key}={$value}";
    }
    $envText = implode("\n", $envLines);
    $hasDescription = collect($rows)->contains(fn ($r) => $r['description'] !== null);
    $hasEnvironment = collect($rows)->contains(fn ($r) => $r['environment'] !== null);
@endphp

<div
    data-slot="env-table"
    x-data="uiEnvTable({ defaultRevealed: @js($defaultRevealed) })"
    {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-border bg-card text-foreground']) }}
>
    {{-- Toolbar --}}
    <div class="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
        <span class="text-sm font-medium text-foreground">{{ $title ?? __('Environment variables') }}</span>

        <div class="flex items-center gap-2">
            <button
                type="button"
                @click="toggleAll()"
                x-bind:aria-pressed="revealedAll ? 'true' : 'false'"
                x-bind:aria-label="revealedAll ? @js(__('Hide all values')) : @js(__('Reveal all values'))"
                class="inline-flex h-7 items-center gap-2 rounded-md border border-border bg-background px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
                <svg x-show="!revealedAll" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                    <circle cx="12" cy="12" r="3" />
                </svg>
                <svg x-show="revealedAll" x-cloak class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
                    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
                    <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
                    <line x1="2" x2="22" y1="2" y2="22" />
                </svg>
                <span x-text="revealedAll ? @js(__('Hide all')) : @js(__('Reveal all'))">{{ __('Reveal all') }}</span>
            </button>

            <x-ui.copy-button
                :value="$envText"
                :label="__('Copy .env')"
                :copied-label="__('Copied')"
                class="h-7 w-auto gap-2 px-2 text-xs text-muted-foreground hover:text-foreground"
            >
            </x-ui.copy-button>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full border-collapse text-sm">
            <thead>
                <tr class="border-b border-border bg-muted/20 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                    <th scope="col" class="px-3 py-2 text-start font-medium">{{ __('Key') }}</th>
                    <th scope="col" class="px-3 py-2 text-start font-medium">{{ __('Value') }}</th>
                    @if ($hasEnvironment)
                        <th scope="col" class="px-3 py-2 text-start font-medium">{{ __('Environment') }}</th>
                    @endif
                    @if ($hasDescription)
                        <th scope="col" class="px-3 py-2 text-start font-medium">{{ __('Description') }}</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                    <tr class="border-b border-border align-top last:border-0">
                        <td class="whitespace-nowrap px-3 py-2">
                            <code class="font-mono font-medium text-foreground">{{ $row['key'] }}</code>
                        </td>
                        <td class="px-3 py-2">
                            <div class="flex items-center gap-2">
                                <code class="font-mono text-muted-foreground" x-show="!isRevealed(@js($row['key']))">{{ $row['masked'] }}</code>
                                <code class="break-all font-mono text-foreground" x-show="isRevealed(@js($row['key']))" x-cloak>{{ $row['value'] }}</code>
                                <button
                                    type="button"
                                    @click="toggle(@js($row['key']))"
                                    x-bind:aria-pressed="isRevealed(@js($row['key'])) ? 'true' : 'false'"
                                    x-bind:aria-label="isRevealed(@js($row['key'])) ? @js(__('Hide value')) : @js(__('Show value'))"
                                    class="inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                >
                                    <svg x-show="!isRevealed(@js($row['key']))" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                    <svg x-show="isRevealed(@js($row['key']))" x-cloak class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
                                        <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
                                        <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
                                        <line x1="2" x2="22" y1="2" y2="22" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                        @if ($hasEnvironment)
                            <td class="whitespace-nowrap px-3 py-2">
                                @if ($row['environment'] !== null)
                                    <x-ui.badge variant="secondary" size="sm">{{ $row['environment'] }}</x-ui.badge>
                                @endif
                            </td>
                        @endif
                        @if ($hasDescription)
                            <td class="px-3 py-2 text-muted-foreground">{{ $row['description'] }}</td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

/**
 * Env table behaviour.
 *
 * Toggles masked secret values between hidden (dots) and revealed, either per
 * row or all at once. Pure local state — no listeners, timers or observers to
 * tear down. Clipboard copy of the .env block is handled by the embedded
 * copy-button (uiCopyButton).
 *
 * Self-registers on `alpine:init` so import order does not matter.
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiEnvTable', (config = {}) => ({
        revealedAll: config.defaultRevealed === true,
        revealed: {},

        isRevealed(key) {
            return this.revealedAll || this.revealed[key] === true;
        },

        toggle(key) {
            this.revealed[key] = !this.revealed[key];
        },

        toggleAll() {
            this.revealedAll = !this.revealedAll;
            if (!this.revealedAll) {
                this.revealed = {};
            }
        },
    }));
});