@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/layouts/FloatingTopLayout.svelte

@@ -0,0 +1,68 @@
+<script>
+  // FloatingTopLayout — a detached, rounded top menu card floating over the
+  // content. Nestable single-region layout. Items with children open a flyout.
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let { menu = $bindable(undefined), actions, children, ...rest } = $props();
+  let items = $derived(menu ? (menu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+  let brand = $derived(menu?.brand ?? {});
+
+  let openId = $state(null);
+  const toggle = (id) => { openId = openId === id ? null : id; };
+  $effect(() => {
+    if (openId == null) return;
+    const onDoc = (e) => { if (!e.target.closest?.('.nlf-flywrap')) openId = null; };
+    document.addEventListener('pointerdown', onDoc);
+    return () => document.removeEventListener('pointerdown', onDoc);
+  });
+</script>
+
+<div class="nl nl-col nlf-pad" {...rest}>
+  {#if menu}
+    <div class="nlf-topcard">
+      {#if brand.label}
+        <div class="nlf-brand">
+          {#if brand.icon}<span class="material-symbols-outlined nlf-brand-icon">{brand.icon}</span>{/if}
+          {brand.label}
+        </div>
+      {/if}
+      <nav class="nlf-topnav">
+        {#each items as item}
+          {#if item.children?.length}
+            <div class="nlf-flywrap">
+              <button
+                type="button"
+                class="nlf-toplink nlf-parent"
+                class:active={item.id === menu.active || item.children.some((c) => c.id === menu.active)}
+                aria-expanded={openId === item.id}
+                aria-haspopup="menu"
+                onclick={() => toggle(item.id)}
+              >
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                {item.label}
+                <span class="material-symbols-outlined nlf-caret" class:open={openId === item.id}>expand_more</span>
+              </button>
+              {#if openId === item.id}
+                <div class="nlf-flyout">
+                  {#each item.children as child}
+                    <a href={child.href} class="nlf-flyout-item" class:active={child.id === menu.active} onclick={() => (openId = null)}>
+                      {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                      {child.label}
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {:else}
+            <a href={item.href} class="nlf-toplink" class:active={item.id === menu.active}>
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              {item.label}
+            </a>
+          {/if}
+        {/each}
+      </nav>
+      <div class="nlf-actions">{#if actions}{@render actions()}{:else}<ThemeToggle />{/if}</div>
+    </div>
+  {/if}
+  <div class="nl-fill nl-scroll nlf-content">{@render children?.()}</div>
+</div>

package/dist/layouts/FloatingTopLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default FloatingTopLayout;
+type FloatingTopLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FloatingTopLayout: import("svelte").Component<{
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/HybridLayout.svelte

@@ -0,0 +1,20 @@
+<script>
+  // HybridLayout — global top bar + contextual side rail + content.
+  // The clearest demonstration of composition: it's just TopBar + SideBar.
+  import TopBar from './TopBar.svelte';
+  import SideBar from './SideBar.svelte';
+
+  let { menu = { brand: {}, sections: [], active: undefined }, actions, footer, children, ...rest } = $props();
+  // top bar shows the section groups as top-level tabs; sidebar shows items
+  let topItems = $derived((menu.sections ?? []).map((s, i) => ({
+    id: `sec-${i}`, label: s.label ?? 'Menu', href: '#'
+  })));
+</script>
+
+<div class="lyt lyt-col" {...rest}>
+  <TopBar brand={menu.brand} items={topItems} variant="tabs" {actions} />
+  <div class="lyt-row lyt-fill">
+    <SideBar sections={menu.sections} active={menu.active} {footer} />
+    <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+  </div>
+</div>

package/dist/layouts/HybridLayout.svelte.d.ts

@@ -0,0 +1,17 @@
+export default HybridLayout;
+type HybridLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const HybridLayout: import("svelte").Component<{
+    menu?: Record<string, any>;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    menu?: Record<string, any>;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/IconRailLayout.svelte

@@ -0,0 +1,75 @@
+<script>
+  // IconRailLayout — a narrow, icon-only vertical rail + fillable content.
+  // Icons show a tooltip label on hover. Nestable like the other bar layouts.
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let {
+    menu = $bindable(undefined),   // { brand?, sections, active? } — labels used as tooltips
+    footer,
+    children,
+    ...rest
+  } = $props();
+
+  let items = $derived(menu ? (menu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+  let brand = $derived(menu?.brand ?? {});
+
+  let openId = $state(null);
+  const toggle = (id) => { openId = openId === id ? null : id; };
+  $effect(() => {
+    if (openId == null) return;
+    const onDoc = (e) => { if (!e.target.closest?.('.ir-flywrap')) openId = null; };
+    document.addEventListener('pointerdown', onDoc);
+    return () => document.removeEventListener('pointerdown', onDoc);
+  });
+</script>
+
+<div class="nl nl-row" {...rest}>
+  {#if menu}
+    <div class="ir">
+      {#if brand.icon}
+        <a href={brand.href ?? '#'} class="ir-brand" aria-label={brand.label}>
+          <span class="material-symbols-outlined">{brand.icon}</span>
+        </a>
+      {/if}
+      <nav class="ir-nav">
+        {#each items as item}
+          {#if item.children?.length}
+            <div class="ir-flywrap">
+              <button
+                class="ir-item"
+                class:active={item.id === menu.active || item.children.some((c) => c.id === menu.active)}
+                aria-label={item.label}
+                onclick={() => toggle(item.id)}
+              >
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="ir-tip">{item.label}</span>
+                {#if item.badge != null}<span class="ir-dot"></span>{/if}
+              </button>
+              {#if openId === item.id}
+                <div class="ir-flyout">
+                  <div class="ir-flyout-head">{item.label}</div>
+                  {#each item.children as child}
+                    <a href={child.href} class="ir-flyout-item" class:active={child.id === menu.active} onclick={() => (openId = null)}>
+                      {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                      {child.label}
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {:else}
+            <a href={item.href} class="ir-item" class:active={item.id === menu.active} aria-label={item.label}>
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              <span class="ir-tip">{item.label}</span>
+              {#if item.badge != null}<span class="ir-dot"></span>{/if}
+            </a>
+          {/if}
+        {/each}
+      </nav>
+      <div class="ir-foot">
+        {#if footer}{@render footer()}{:else}<ThemeToggle />{/if}
+      </div>
+    </div>
+  {/if}
+  <div class="nl-fill nl-scroll">{@render children?.()}</div>
+</div>

package/dist/layouts/IconRailLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default IconRailLayout;
+type IconRailLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const IconRailLayout: import("svelte").Component<{
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/LeftBarLayout.svelte

@@ -0,0 +1,19 @@
+<script>
+  // LeftBarLayout — a single left sidebar region + a fillable content area.
+  // Nestable: children fill the content area completely.
+  import SideBar from './SideBar.svelte';
+
+  let {
+    menu = $bindable(undefined),   // { brand?, sections, active? }
+    footer,
+    children,
+    ...rest
+  } = $props();
+</script>
+
+<div class="nl nl-row" {...rest}>
+  {#if menu}
+    <SideBar brand={menu.brand} sections={menu.sections} active={menu.active} {footer} />
+  {/if}
+  <div class="nl-fill nl-scroll">{@render children?.()}</div>
+</div>

package/dist/layouts/LeftBarLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default LeftBarLayout;
+type LeftBarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LeftBarLayout: import("svelte").Component<{
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/RightBarLayout.svelte

@@ -0,0 +1,21 @@
+<script>
+  // RightBarLayout — a single right-side sidebar region + fillable content.
+  // Content comes first, bar on the right. Nestable.
+  import SideBar from './SideBar.svelte';
+
+  let {
+    menu = $bindable(undefined),
+    footer,
+    children,
+    ...rest
+  } = $props();
+</script>
+
+<div class="nl nl-row" {...rest}>
+  <div class="nl-fill nl-scroll">{@render children?.()}</div>
+  {#if menu}
+    <div class="nl-right">
+      <SideBar brand={menu.brand} sections={menu.sections} active={menu.active} {footer} />
+    </div>
+  {/if}
+</div>

package/dist/layouts/RightBarLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default RightBarLayout;
+type RightBarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const RightBarLayout: import("svelte").Component<{
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/SideBar.svelte

@@ -0,0 +1,86 @@
+<script>
+  // SideBar — a vertical navigation region. Shared building block used by
+  // the sidebar-style layouts. Renders an optional brand and the grouped
+  // `sections` as a vertical menu. Items may carry `children` for a second
+  // level, which expands/collapses (and auto-expands when a child is active).
+  let {
+    brand    = undefined,
+    sections = [],
+    active   = undefined,
+    footer,
+    ...restProps
+  } = $props();
+
+  // Track which parent items are expanded. An item is open if the user toggled
+  // it, or (by default) if one of its children is the active item.
+  let toggled = $state({});
+
+  function isChildActive(item) {
+    return item.children?.some((c) => c.id === active);
+  }
+  function isOpen(item) {
+    return toggled[item.id] ?? isChildActive(item);
+  }
+  function toggle(item) {
+    toggled = { ...toggled, [item.id]: !isOpen(item) };
+  }
+</script>
+
+<aside class="sb" {...restProps}>
+  {#if brand?.label}
+    {#if brand.href}
+      <a href={brand.href} class="sb-brand">
+        {#if brand.icon}<span class="material-symbols-outlined sb-brand-icon">{brand.icon}</span>{/if}
+        {brand.label}
+      </a>
+    {:else}
+      <div class="sb-brand">
+        {#if brand.icon}<span class="material-symbols-outlined sb-brand-icon">{brand.icon}</span>{/if}
+        {brand.label}
+      </div>
+    {/if}
+  {/if}
+
+  <nav class="sb-nav">
+    {#each sections as section}
+      {#if section.label}<div class="sb-section-label">{section.label}</div>{/if}
+      {#each section.items as item}
+        {#if item.children?.length}
+          <button
+            type="button"
+            class="sb-link sb-parent"
+            class:active={item.id === active || isChildActive(item)}
+            aria-expanded={isOpen(item)}
+            onclick={() => toggle(item)}
+          >
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            <span class="sb-link-label">{item.label}</span>
+            {#if item.badge != null}<span class="sb-badge">{item.badge}</span>{/if}
+            <span class="material-symbols-outlined sb-chevron" class:open={isOpen(item)}>chevron_right</span>
+          </button>
+          {#if isOpen(item)}
+            <div class="sb-subnav">
+              {#each item.children as child}
+                <a href={child.href} class="sb-sublink" class:active={child.id === active}>
+                  {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                  <span class="sb-link-label">{child.label}</span>
+                  {#if child.badge != null}<span class="sb-badge">{child.badge}</span>{/if}
+                </a>
+              {/each}
+            </div>
+          {/if}
+        {:else}
+          <a href={item.href} class="sb-link" class:active={item.id === active}>
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            <span class="sb-link-label">{item.label}</span>
+            {#if item.badge != null}<span class="sb-badge">{item.badge}</span>{/if}
+          </a>
+        {/if}
+      {/each}
+    {/each}
+  </nav>
+
+  {#if footer}
+    <div class="sb-footer">{@render footer()}</div>
+  {/if}
+</aside>

package/dist/layouts/SideBar.svelte.d.ts

@@ -0,0 +1,17 @@
+export default SideBar;
+type SideBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SideBar: import("svelte").Component<{
+    brand?: any;
+    sections?: any[];
+    active?: any;
+    footer: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    brand?: any;
+    sections?: any[];
+    active?: any;
+    footer: any;
+} & Record<string, any>;

package/dist/layouts/SidebarLayout.svelte

@@ -0,0 +1,11 @@
+<script>
+  // SidebarLayout — classic left rail + content. Composed from SideBar.
+  import SideBar from './SideBar.svelte';
+
+  let { menu = { brand: {}, sections: [], active: undefined }, footer, children, ...rest } = $props();
+</script>
+
+<div class="lyt lyt-row" {...rest}>
+  <SideBar brand={menu.brand} sections={menu.sections} active={menu.active} {footer} />
+  <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+</div>

package/dist/layouts/SidebarLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default SidebarLayout;
+type SidebarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SidebarLayout: import("svelte").Component<{
+    menu?: Record<string, any>;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    menu?: Record<string, any>;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/TopBar.svelte

@@ -0,0 +1,90 @@
+<script>
+  // TopBar — a horizontal top navigation region. A shared building block used
+  // by several layouts (topbar, hybrid, drawer, right, bottom…). Renders brand +
+  // an optional horizontal menu + an actions area. When `items` is empty it's
+  // just a bar (brand + actions), which is how "bar with no menu" layouts work.
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let {
+    brand    = {},
+    items    = [],        // flat list of menu items (already flattened by the layout)
+    active   = undefined, // active item id
+    variant  = 'default', // 'default' | 'tabs'  (visual style of the links)
+    actions,              // optional snippet; defaults to a ThemeToggle
+    onmenu,               // optional: show a hamburger button, called on click
+    ...restProps
+  } = $props();
+
+  let openId = $state(null);
+  function toggle(id) { openId = openId === id ? null : id; }
+  $effect(() => {
+    if (openId == null) return;
+    function onDoc(e) { if (!e.target.closest?.('.tb-flywrap')) openId = null; }
+    document.addEventListener('pointerdown', onDoc);
+    return () => document.removeEventListener('pointerdown', onDoc);
+  });
+</script>
+
+<header class="tb" {...restProps}>
+  {#if onmenu}
+    <button class="tb-hamburger" aria-label="Open menu" onclick={onmenu}>
+      <span class="material-symbols-outlined">menu</span>
+    </button>
+  {/if}
+
+  {#if brand?.href}
+    <a href={brand.href} class="tb-brand">
+      {#if brand.icon}<span class="material-symbols-outlined tb-brand-icon">{brand.icon}</span>{/if}
+      {brand.label}
+    </a>
+  {:else if brand?.label}
+    <div class="tb-brand">
+      {#if brand.icon}<span class="material-symbols-outlined tb-brand-icon">{brand.icon}</span>{/if}
+      {brand.label}
+    </div>
+  {/if}
+
+  {#if items.length}
+    <nav class="tb-nav" class:tb-nav-tabs={variant === 'tabs'}>
+      {#each items as item}
+        {#if item.children}
+          <div class="tb-flywrap">
+            <button
+              type="button"
+              class="tb-link tb-parent"
+              class:active={item.id === active || item.children.some((c) => c.id === active)}
+              aria-expanded={openId === item.id}
+              aria-haspopup="menu"
+              onclick={() => toggle(item.id)}
+            >
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              {item.label}
+              <span class="material-symbols-outlined tb-caret" class:open={openId === item.id}>expand_more</span>
+            </button>
+            {#if openId === item.id}
+              <div class="tb-flyout">
+                {#each item.children as child}
+                  <a href={child.href} class="tb-flyout-item" class:active={child.id === active} onclick={() => (openId = null)}>
+                    {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                    {child.label}
+                  </a>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <a href={item.href} class="tb-link" class:active={item.id === active}>
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            {item.label}
+          </a>
+        {/if}
+      {/each}
+    </nav>
+  {:else}
+    <div class="tb-spacer"></div>
+  {/if}
+
+  <div class="tb-actions">
+    {#if actions}{@render actions()}{:else}<ThemeToggle />{/if}
+  </div>
+</header>

package/dist/layouts/TopBar.svelte.d.ts

@@ -0,0 +1,21 @@
+export default TopBar;
+type TopBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TopBar: import("svelte").Component<{
+    brand?: Record<string, any>;
+    items?: any[];
+    active?: any;
+    variant?: string;
+    actions: any;
+    onmenu: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    brand?: Record<string, any>;
+    items?: any[];
+    active?: any;
+    variant?: string;
+    actions: any;
+    onmenu: any;
+} & Record<string, any>;

package/dist/layouts/TopBarLayout.svelte

@@ -0,0 +1,26 @@
+<script>
+  // TopBarLayout — a single top bar region + a content area that a child fills.
+  // Designed to nest: put another *Layout inside as children and it fills the
+  // content area completely.
+  //
+  //   <TopBarLayout menu={topMenu}>
+  //     ...content, or another layout...
+  //   </TopBarLayout>
+  import TopBar from './TopBar.svelte';
+
+  let {
+    menu = $bindable(undefined),   // { brand?, sections, active? }
+    actions,
+    children,
+    ...rest
+  } = $props();
+
+  let items = $derived(menu ? (menu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="nl nl-col" {...rest}>
+  {#if menu}
+    <TopBar brand={menu.brand} {items} active={menu.active} {actions} />
+  {/if}
+  <div class="nl-fill">{@render children?.()}</div>
+</div>

package/dist/layouts/TopBarLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default TopBarLayout;
+type TopBarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TopBarLayout: import("svelte").Component<{
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>;

package/dist/theme/theme.svelte.d.ts

@@ -0,0 +1,11 @@
+export namespace theme {
+    export const current: string;
+    export const isDark: boolean;
+    export { init };
+    export { toggle };
+    export { set };
+}
+declare function init(): void;
+declare function toggle(): void;
+declare function set(value: any): void;
+export {};

package/dist/theme/theme.svelte.js

@@ -0,0 +1,48 @@
+// theme.svelte.js
+// Usage: import { theme } from '@sveltekitchen/sveltekitchen/theme'; theme.init(); theme.toggle();
+
+const STORAGE_KEY = 'theme';
+
+function createTheme() {
+  let current = $state('light');
+
+  function apply(value) {
+    current = value;
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', value);
+    }
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY, value);
+    }
+  }
+
+  function init() {
+    if (typeof localStorage === 'undefined') return;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      apply(stored);
+    } else {
+      // Respect OS preference on first visit
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      apply(prefersDark ? 'dark' : 'light');
+    }
+  }
+
+  function toggle() {
+    apply(current === 'light' ? 'dark' : 'light');
+  }
+
+  function set(value) {
+    apply(value);
+  }
+
+  return {
+    get current() { return current; },
+    get isDark()  { return current === 'dark'; },
+    init,
+    toggle,
+    set,
+  };
+}
+
+export const theme = createTheme();