kumo-svelte 0.1.0-beta.0

package/dist/docs/StickyDocHeader.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { GithubLogoIcon } from "phosphor-svelte";
+    import { onMount } from "svelte";
+    import { cn } from "../utils/cn";
+    import ThemeToggle from "./ThemeToggle.svelte";
+    import BaseUIIcon from "./BaseUIIcon.svelte";
+
+    interface Props {
+        title: string;
+        githubSourceUrl?: string | null;
+        bitsUIUrl?: string | null;
+    }
+
+    let { title, githubSourceUrl = null, bitsUIUrl = null }: Props = $props();
+
+    const safeGithubSourceUrl = $derived(githubSourceUrl);
+    let showStickyTitle = $state(false);
+    let sidebarOpen = $state(true);
+    let headerRef: HTMLElement;
+
+    onMount(() => {
+        const sidebar = document.querySelector("aside[data-sidebar-open]");
+        const checkSidebarState = () => {
+            if (sidebar)
+                sidebarOpen =
+                    sidebar.getAttribute("data-sidebar-open") === "true";
+        };
+
+        checkSidebarState();
+        const sidebarObserver = sidebar
+            ? new MutationObserver(checkSidebarState)
+            : null;
+        sidebarObserver?.observe(sidebar!, {
+            attributes: true,
+            attributeFilter: ["data-sidebar-open"],
+        });
+
+        const pageHeader = document.getElementById("page-header");
+        const margin = headerRef
+            ? Math.round(headerRef.getBoundingClientRect().bottom)
+            : 48;
+        const headerObserver =
+            pageHeader &&
+            new IntersectionObserver(
+                ([entry]) => {
+                    showStickyTitle = !entry.isIntersecting;
+                },
+                { rootMargin: `-${margin}px 0px 0px 0px` },
+            );
+
+        if (pageHeader && headerObserver) headerObserver.observe(pageHeader);
+
+        return () => {
+            sidebarObserver?.disconnect();
+            headerObserver?.disconnect();
+        };
+    });
+</script>
+
+{#if !sidebarOpen}
+    <div
+        class={cn(
+            "pointer-events-none fixed top-0 left-12 z-50 flex h-12 items-center font-medium transition-opacity duration-200 select-none",
+            showStickyTitle ? "opacity-100" : "opacity-0",
+        )}
+        style="padding-left: 4.25rem"
+    >
+        <span class="pointer-events-auto flex items-center gap-2 text-base">
+            <span class="text-kumo-subtle">/ </span>
+            <span class="font-semibold tracking-tight">{title}</span>
+            {#if safeGithubSourceUrl}
+                <a
+                    href={safeGithubSourceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-kumo-subtle transition-colors hover:text-kumo-default"
+                    title="View source on GitHub"
+                    aria-label="View source on GitHub"
+                    tabindex={showStickyTitle ? 0 : -1}
+                >
+                    <GithubLogoIcon size={18} weight="fill" />
+                </a>
+            {/if}
+            {#if bitsUIUrl}
+                <a
+                    href={bitsUIUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-kumo-subtle transition-colors hover:text-kumo-default"
+                    title="View Bits UI documentation"
+                    aria-label="View Bits UI documentation"
+                    tabindex={showStickyTitle ? 0 : -1}
+                >
+                    <BaseUIIcon size={18} />
+                </a>
+            {/if}
+        </span>
+    </div>
+{/if}
+
+<header
+    bind:this={headerRef}
+    class="sticky top-12 z-10 flex h-12 border-b border-kumo-hairline bg-kumo-elevated md:top-0"
+>
+    <div
+        class="flex min-w-0 flex-1 items-center justify-between px-4 md:border-r md:border-kumo-hairline"
+    >
+        <div
+            class={cn(
+                "flex items-center gap-2 transition-opacity duration-200",
+                showStickyTitle && sidebarOpen
+                    ? "opacity-100"
+                    : "pointer-events-none opacity-0",
+            )}
+        >
+            <span class="text-lg font-semibold tracking-tight text-kumo-default"
+                >{title}</span
+            >
+            {#if safeGithubSourceUrl}
+                <a
+                    href={safeGithubSourceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-kumo-subtle transition-colors hover:text-kumo-default"
+                    title="View source on GitHub"
+                    aria-label="View source on GitHub"
+                    tabindex={showStickyTitle && sidebarOpen ? 0 : -1}
+                >
+                    <GithubLogoIcon size={20} weight="fill" />
+                </a>
+            {/if}
+            {#if bitsUIUrl}
+                <a
+                    href={bitsUIUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-kumo-subtle transition-colors hover:text-kumo-default"
+                    title="View Bits UI documentation"
+                    aria-label="View Bits UI documentation"
+                    tabindex={showStickyTitle && sidebarOpen ? 0 : -1}
+                >
+                    <BaseUIIcon size={20} />
+                </a>
+            {/if}
+        </div>
+        <a
+            href="https://github.com/maxffarrell/kumo-svelte"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="font-mono text-sm text-kumo-subtle transition-colors hover:text-kumo-default"
+        >
+            kumo-svelte
+        </a>
+    </div>
+    <div class="hidden w-12 shrink-0 items-center justify-center md:flex">
+        <ThemeToggle />
+    </div>
+</header>

package/dist/docs/StickyDocHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    title: string;
+    githubSourceUrl?: string | null;
+    bitsUIUrl?: string | null;
+}
+declare const StickyDocHeader: import("svelte").Component<Props, {}, "">;
+type StickyDocHeader = ReturnType<typeof StickyDocHeader>;
+export default StickyDocHeader;

package/dist/docs/TableOfContents.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { CaretDown } from 'phosphor-svelte';
+  import { cn } from '../utils/cn';
+
+  export interface TocHeading {
+    depth: number;
+    slug: string;
+    text: string;
+  }
+
+  interface HeadingGroup {
+    h2: TocHeading;
+    h3s: TocHeading[];
+  }
+
+  interface Props {
+    headings?: TocHeading[];
+    layout?: 'sidebar' | 'select';
+  }
+
+  let { headings: headingsProp = [], layout = 'sidebar' }: Props = $props();
+  let headings = $state<TocHeading[]>([]);
+  let activeId = $state('');
+  let suppressObserver = false;
+  let suppressTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const ITEM_BASE =
+    'block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-left text-sm no-underline';
+  const ITEM_DEFAULT =
+    'text-kumo-subtle hover:border-kumo-line hover:text-kumo-default hover:font-medium';
+  const ITEM_ACTIVE = 'border-kumo-brand font-medium text-kumo-default';
+
+  function slugify(text: string) {
+    return text
+      .toLowerCase()
+      .trim()
+      .replace(/[`'"’]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  function headingText(element: Element) {
+    const anchor = element.querySelector(':scope > a[href^="#"]');
+    const source = anchor?.cloneNode(true) as Element | undefined;
+    source?.querySelector('.heading-anchor-icon')?.remove();
+    return (source ?? element).textContent?.trim() ?? '';
+  }
+
+  function scrapeHeadings(): TocHeading[] {
+    const content = document.querySelector('.kumo-prose');
+    if (!content) return [];
+
+    const usedSlugs: string[] = [];
+
+    return Array.from(content.querySelectorAll('h2, h3'))
+      .filter((element) => !element.closest('.not-prose'))
+      .map((element) => {
+        const text = headingText(element);
+        if (!text) return null;
+
+        let slug = element.id || slugify(text) || 'section';
+        const baseSlug = slug;
+        let index = 2;
+
+        while (usedSlugs.includes(slug)) {
+          slug = `${baseSlug}-${index}`;
+          index += 1;
+        }
+
+        usedSlugs.push(slug);
+        if (!element.id) element.id = slug;
+
+        return {
+          depth: Number(element.tagName[1]),
+          slug,
+          text
+        };
+      })
+      .filter((heading): heading is TocHeading => heading !== null);
+  }
+
+  function groupHeadings(items: TocHeading[]): HeadingGroup[] {
+    const groups: HeadingGroup[] = [];
+    for (const heading of items) {
+      if (heading.depth === 2) {
+        groups.push({ h2: heading, h3s: [] });
+      } else if (heading.depth === 3 && groups.length > 0) {
+        groups[groups.length - 1].h3s.push(heading);
+      }
+    }
+    return groups;
+  }
+
+  function jumpTo(slug: string) {
+    activeId = slug;
+    suppressObserver = true;
+    clearTimeout(suppressTimer);
+    suppressTimer = setTimeout(() => {
+      suppressObserver = false;
+    }, 1000);
+    document.getElementById(slug)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  onMount(() => {
+    let observer: IntersectionObserver | undefined;
+    let retryTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const initialize = () => {
+      headings = headingsProp.filter((heading) => heading.depth <= 3);
+      if (headings.length === 0) headings = scrapeHeadings();
+      activeId = headings[0]?.slug ?? '';
+
+      const elements = headings
+        .map((heading) => document.getElementById(heading.slug))
+        .filter((element): element is HTMLElement => element !== null);
+
+      if (elements.length === 0) return false;
+
+      observer?.disconnect();
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (suppressObserver) return;
+
+          const visible = entries
+            .filter((entry) => entry.isIntersecting)
+            .sort(
+              (a, b) =>
+                (a.target as HTMLElement).offsetTop - (b.target as HTMLElement).offsetTop
+            );
+
+          if (visible.length > 0) {
+            activeId = visible[0].target.id;
+            return;
+          }
+
+          const first = document.getElementById(headings[0]?.slug);
+          const last = document.getElementById(headings.at(-1)?.slug ?? '');
+
+          if (first && window.scrollY < first.offsetTop) {
+            activeId = headings[0]?.slug ?? '';
+          } else if (last && window.scrollY >= last.offsetTop) {
+            activeId = headings.at(-1)?.slug ?? '';
+          }
+        },
+        { rootMargin: '-10% 0px -70% 0px', threshold: [0, 1] }
+      );
+
+      for (const element of elements) observer.observe(element);
+      return true;
+    };
+
+    if (!initialize()) {
+      retryTimer = setTimeout(initialize);
+    }
+
+    return () => {
+      clearTimeout(suppressTimer);
+      clearTimeout(retryTimer);
+      observer?.disconnect();
+    };
+  });
+
+  const groups = $derived(groupHeadings(headings));
+</script>
+
+{#if headings.length > 0}
+  {#if layout === 'select'}
+    <nav aria-label="Table of contents" class="relative">
+      <select
+        aria-label="Jump to section"
+        value={activeId}
+        class="w-full appearance-none rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2.5 pr-10 text-sm text-kumo-default"
+        onchange={(event) => jumpTo(event.currentTarget.value)}
+      >
+        {#each groups as group (group.h2.slug)}
+          <optgroup label={group.h2.text}>
+            <option value={group.h2.slug}>{group.h2.text}</option>
+            {#each group.h3s as h3 (h3.slug)}
+              <option value={h3.slug}>{`  ${h3.text}`}</option>
+            {/each}
+          </optgroup>
+        {/each}
+      </select>
+      <CaretDown
+        size={16}
+        class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-kumo-subtle"
+        aria-hidden="true"
+      />
+    </nav>
+  {:else}
+    <nav aria-label="Table of contents">
+      <p class="mb-3 text-xs font-semibold tracking-wide text-kumo-subtle uppercase">On this page</p>
+      <ul class="flex flex-col gap-2 border-l-2 border-kumo-hairline">
+        {#each groups as group (group.h2.slug)}
+          {#if group.h3s.length === 0}
+            <li class="-ml-0.5">
+              <a
+                href={`#${group.h2.slug}`}
+                aria-current={activeId === group.h2.slug ? 'true' : undefined}
+                class={cn(ITEM_BASE, activeId === group.h2.slug ? ITEM_ACTIVE : ITEM_DEFAULT)}
+                onclick={() => jumpTo(group.h2.slug)}
+              >
+                <span class="block min-w-0 leading-5">{group.h2.text}</span>
+              </a>
+            </li>
+          {:else}
+            <li class="-ml-0.5 flex flex-col gap-2">
+              <a
+                href={`#${group.h2.slug}`}
+                aria-current={activeId === group.h2.slug ? 'true' : undefined}
+                class={cn(ITEM_BASE, activeId === group.h2.slug ? ITEM_ACTIVE : ITEM_DEFAULT)}
+                onclick={() => jumpTo(group.h2.slug)}
+              >
+                <span class="block min-w-0 leading-5">{group.h2.text}</span>
+              </a>
+              <ul class="flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7">
+                {#each group.h3s as h3 (h3.slug)}
+                  <li class="-ml-0.5">
+                    <a
+                      href={`#${h3.slug}`}
+                      aria-current={activeId === h3.slug ? 'true' : undefined}
+                      class={cn(ITEM_BASE, activeId === h3.slug ? ITEM_ACTIVE : ITEM_DEFAULT)}
+                      onclick={() => jumpTo(h3.slug)}
+                    >
+                      <span class="block min-w-0 leading-5">{h3.text}</span>
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    </nav>
+  {/if}
+{/if}

package/dist/docs/TableOfContents.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface TocHeading {
+    depth: number;
+    slug: string;
+    text: string;
+}
+interface Props {
+    headings?: TocHeading[];
+    layout?: 'sidebar' | 'select';
+}
+declare const TableOfContents: import("svelte").Component<Props, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/docs/ThemeToggle.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { MoonIcon, SunIcon } from 'phosphor-svelte';
+  import { onMount } from 'svelte';
+  import { Button } from '..';
+
+  let theme = $state<'light' | 'dark'>('light');
+  let mounted = $state(false);
+
+  onMount(() => {
+    mounted = true;
+    const stored = localStorage.getItem('theme');
+    if (stored === 'dark' || stored === 'light') {
+      theme = stored;
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark';
+    }
+  });
+
+  function toggleTheme() {
+    const next = theme === 'light' ? 'dark' : 'light';
+    theme = next;
+    localStorage.setItem('theme', next);
+    document.documentElement.setAttribute('data-mode', next);
+  }
+</script>
+
+<Button
+  variant="ghost"
+  shape="square"
+  aria-label={mounted ? `Switch to ${theme === 'light' ? 'dark' : 'light'} mode` : 'Toggle theme'}
+  onclick={toggleTheme}
+>
+  {#if mounted && theme === 'dark'}
+    <SunIcon size={20} />
+  {:else}
+    <MoonIcon size={20} />
+  {/if}
+</Button>

package/dist/docs/ThemeToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;