Code Window code

@props([
    'tabs' => [],
    'default' => null,
    'filename' => null,
    'lang' => null,
    'copy' => true,
])

@php
    /*
    | Developer-grade code/terminal window. Theme-aware: a light editor surface
    | by default, switching to a dark surface under the site's `.dark` theme so
    | code samples read as a focal point — the way Stripe, GitHub and Anthropic
    | frame their snippets.
    |
    | Tokens: wrap code in spans with these classes for on-palette highlighting —
    |   tok-key (keyword)  tok-fn (function)  tok-str (string)  tok-com (comment)
    |   tok-num (number)   tok-punc (punctuation)  tok-tag (tag/attr)  tok-var
    |
    | Single file:
    |   <x-ui.code-window filename="web.php" lang="php">
    |       <div class="code-line">…</div>
    |   </x-ui.code-window>
    |
    | Tabbed (named slots match the keys):
    |   <x-ui.code-window :tabs="['cli' => 'Terminal', 'blade' => 'welcome.blade.php']">
    |       <x-slot:cli>…</x-slot:cli>
    |       <x-slot:blade>…</x-slot:blade>
    |   </x-ui.code-window>
    */
    $hasTabs = ! empty($tabs);
    $first = $default ?? ($hasTabs ? array_key_first($tabs) : null);
    $tabKeys = array_map(fn ($key) => (string) $key, array_keys($tabs));
    $defaultIndex = array_search((string) $first, $tabKeys, true);
    $defaultIndex = $defaultIndex === false ? 0 : $defaultIndex;
    $instanceId = substr(md5(json_encode($tabKeys).$filename.$lang), 0, 10);

    $body = 'overflow-x-auto px-4 py-4 sm:px-5 font-mono text-[13px] leading-relaxed text-gray-700 dark:text-gray-300 '
        .'[&_.code-line]:whitespace-pre '
        .'[&_.tok-key]:text-brand-700 dark:[&_.tok-key]:text-brand-300 '
        .'[&_.tok-fn]:text-amber-700 dark:[&_.tok-fn]:text-amber-300 '
        .'[&_.tok-str]:text-green-700 dark:[&_.tok-str]:text-green-300 '
        .'[&_.tok-com]:text-gray-400 dark:[&_.tok-com]:text-gray-500 [&_.tok-com]:italic '
        .'[&_.tok-num]:text-amber-600 dark:[&_.tok-num]:text-amber-200 '
        .'[&_.tok-punc]:text-gray-400 dark:[&_.tok-punc]:text-gray-500 '
        .'[&_.tok-tag]:text-brand-700 dark:[&_.tok-tag]:text-brand-300 '
        .'[&_.tok-var]:text-gray-800 dark:[&_.tok-var]:text-gray-100';
@endphp

<div
    x-data="{
        active: @js($first),
        keys: @js($tabKeys),
        focusIndex: @js($defaultIndex),
        copied: false,
        activate(key) {
            const index = this.keys.indexOf(key);

            if (index === -1) {
                return;
            }

            this.active = key;
            this.focusIndex = index;
        },
        focusKey(key) {
            this.$nextTick(() => this.$refs['tab-' + key]?.focus());
        },
        move(direction) {
            if (this.keys.length === 0) {
                return;
            }

            const next = (this.focusIndex + direction + this.keys.length) % this.keys.length;
            const key = this.keys[next];

            this.activate(key);
            this.focusKey(key);
        },
        copyActive() {
            const panels = Array.from($root.querySelectorAll('[data-code]'));
            const target = panels.find((el) => el.offsetParent !== null) ?? panels[0];
            if (! target) return;
            navigator.clipboard.writeText(target.innerText.trim()).then(() => {
                this.copied = true;
                clearTimeout(this._timer);
                this._timer = setTimeout(() => (this.copied = false), 1800);
            });
        },
    }"
    {{ $attributes->merge(['class' => 'group/code overflow-hidden rounded-xl border border-gray-200/80 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-2xl shadow-gray-900/10 dark:shadow-gray-950/40 ring-1 ring-gray-900/5 dark:ring-white/5']) }}
>
    {{-- Title bar --}}
    <div class="flex items-center gap-3 border-b border-gray-200/80 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/60 px-4 py-2.5">
        @if ($hasTabs)
            <div class="-mb-px flex items-center gap-1 overflow-x-auto" role="tablist">
                @foreach ($tabs as $key => $label)
                    @php
                        $tabSlug = Str::slug((string) $key) ?: 'tab';
                        $tabId = "code-window-{$instanceId}-tab-{$tabSlug}";
                        $panelId = "code-window-{$instanceId}-panel-{$tabSlug}";
                    @endphp
                    <button
                        id="{{ $tabId }}"
                        x-ref="tab-{{ $key }}"
                        type="button"
                        role="tab"
                        aria-controls="{{ $panelId }}"
                        :aria-selected="(active === @js((string) $key)).toString()"
                        :tabindex="active === @js((string) $key) ? '0' : '-1'"
                        @click="activate(@js((string) $key))"
                        @keydown.arrow-right.prevent="move(1)"
                        @keydown.arrow-down.prevent="move(1)"
                        @keydown.arrow-left.prevent="move(-1)"
                        @keydown.arrow-up.prevent="move(-1)"
                        @keydown.home.prevent="activate(keys[0]); focusKey(keys[0])"
                        @keydown.end.prevent="activate(keys[keys.length - 1]); focusKey(keys[keys.length - 1])"
                        :class="active === @js((string) $key) ? 'bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 ring-1 ring-gray-200 dark:ring-gray-800' : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
                        class="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium whitespace-nowrap transition cursor-pointer"
                    >
                        <x-ui.icon name="file-code" size="sm" />
                        {{ $label }}
                    </button>
                @endforeach
            </div>
        @elseif ($filename)
            <span class="flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400">
                <x-ui.icon name="file-code" size="sm" />
                {{ $filename }}
            </span>
        @endif

        <div class="ml-auto flex items-center gap-2">
            @if ($lang)
                <span class="hidden text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-600 sm:inline">{{ $lang }}</span>
            @endif
            @if ($copy)
                <button
                    type="button"
                    @click="copyActive()"
                    aria-label="Copy code"
                    class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 transition hover:bg-gray-200/70 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer"
                >
                    <x-ui.icon x-show="! copied" name="copy" size="sm" />
                    <x-ui.icon x-show="copied" x-cloak name="check" weight="bold" size="sm" class="text-brand-500 dark:text-brand-400" />
                    <span x-text="copied ? 'Copied' : 'Copy'"></span>
                </button>
            @endif
        </div>
    </div>

    {{-- Body --}}
    @if ($hasTabs)
        @foreach ($tabs as $key => $label)
            @php
                $tabSlug = Str::slug((string) $key) ?: 'tab';
                $tabId = "code-window-{$instanceId}-tab-{$tabSlug}";
                $panelId = "code-window-{$instanceId}-panel-{$tabSlug}";
            @endphp
            <div
                id="{{ $panelId }}"
                x-show="active === @js((string) $key)"
                x-cloak
                data-code
                role="tabpanel"
                aria-labelledby="{{ $tabId }}"
                tabindex="0"
                class="{{ $body }}"
            >
                {{ ${$key} ?? '' }}
            </div>
        @endforeach
    @else
        <div data-code class="{{ $body }}">
            {{ $slot }}
        </div>
    @endif
</div>