@miozu/jera 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "scripts": {
@@ -36,7 +36,7 @@
     }
   },
   "devDependencies": {
-    "svelte": "^5.41.0"
+    "svelte": "^5.49.2"
   },
   "keywords": [
     "svelte",

package/src/components/layout/SettingCard.svelte

@@ -2,28 +2,24 @@
   @component SettingCard
 
   A card container for settings sections with optional danger variant.
-  Provides consistent layout for settings items with labels, descriptions, and actions.
+  Use with SettingItem for structured setting rows.
 
   @example Basic settings card
   <SettingCard title="Account Settings">
-    <div class="setting-item">
-      <div class="setting-content">
-        <h4 class="setting-label">Display Name</h4>
-        <p class="setting-description">Your public display name</p>
-      </div>
-      <Input value={name} />
-    </div>
+    <SettingItem label="Display Name" description="Your public display name">
+      {#snippet action()}
+        <Input value={name} />
+      {/snippet}
+    </SettingItem>
   </SettingCard>
 
   @example Danger zone
   <SettingCard title="Danger Zone" variant="danger">
-    <div class="setting-item">
-      <div class="setting-content">
-        <h4 class="setting-label">Delete Account</h4>
-        <p class="setting-description">This cannot be undone</p>
-      </div>
-      <Button variant="danger">Delete</Button>
-    </div>
+    <SettingItem label="Delete Account" description="This cannot be undone">
+      {#snippet action()}
+        <Button variant="danger">Delete</Button>
+      {/snippet}
+    </SettingItem>
   </SettingCard>
 -->
 <script>
@@ -83,71 +79,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  /* Utility classes for setting items - exposed globally */
-  :global(.setting-item) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-4);
-    padding: var(--space-4) 0;
-    border-bottom: 1px solid var(--color-base02);
-  }
-
-  :global(.setting-item:last-child) {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  :global(.setting-item:first-child) {
-    padding-top: 0;
-  }
-
-  :global(.setting-content) {
-    flex: 1;
-    min-width: 0;
-  }
-
-  :global(.setting-label) {
-    margin: 0 0 var(--space-1);
-    font-size: var(--text-sm);
-    font-weight: 500;
-    color: var(--color-base06);
-  }
-
-  :global(.setting-description) {
-    margin: 0;
-    font-size: var(--text-xs);
-    color: var(--color-base04);
-    line-height: 1.5;
-  }
-
-  :global(.setting-item-icon) {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    color: color-mix(in srgb, var(--color-base04) 80%, transparent);
-  }
-
-  :global(.setting-item-with-icon) {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-3);
-    padding: var(--space-4) 0;
-    border-bottom: 1px solid var(--color-base02);
-  }
-
-  :global(.setting-item-with-icon:last-child) {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  /* Responsive */
-  @media (max-width: 640px) {
-    :global(.setting-item) {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-3);
-    }
-  }
 </style>

package/src/components/layout/SettingItem.svelte

@@ -0,0 +1,116 @@
+<!--
+  @component SettingItem
+
+  A structured setting row for use inside SettingCard.
+  Replaces magic class names with a composable component API.
+
+  @example Basic setting
+  <SettingItem label="Display Name" description="Your public display name">
+    {#snippet action()}
+      <Input value={name} />
+    {/snippet}
+  </SettingItem>
+
+  @example With icon
+  <SettingItem label="Active Sessions" description="Manage your devices">
+    {#snippet leading()}
+      <Monitor size={16} />
+    {/snippet}
+    {#snippet action()}
+      <Button size="sm">Manage</Button>
+    {/snippet}
+  </SettingItem>
+-->
+<script>
+  let {
+    label = '',
+    description = '',
+    leading,
+    action,
+    class: className = ''
+  } = $props();
+</script>
+
+<div class="setting-item {className}" class:has-leading={leading}>
+  {#if leading}
+    <div class="setting-leading">
+      {@render leading()}
+    </div>
+  {/if}
+  <div class="setting-content">
+    {#if label}
+      <h4 class="setting-label">{label}</h4>
+    {/if}
+    {#if description}
+      <p class="setting-description">{description}</p>
+    {/if}
+  </div>
+  {#if action}
+    <div class="setting-action">
+      {@render action()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .setting-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  .setting-item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .setting-item:first-child {
+    padding-top: 0;
+  }
+
+  .has-leading {
+    justify-content: flex-start;
+  }
+
+  .setting-leading {
+    display: flex;
+    align-items: center;
+    color: color-mix(in srgb, var(--color-base04) 80%, transparent);
+    flex-shrink: 0;
+  }
+
+  .setting-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .setting-label {
+    margin: 0 0 var(--space-1);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base06);
+  }
+
+  .setting-description {
+    margin: 0;
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+    line-height: 1.5;
+  }
+
+  .setting-action {
+    flex-shrink: 0;
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .setting-item:not(.has-leading) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-3);
+    }
+  }
+</style>

package/src/components/navigation/Accordion.svelte

@@ -1,21 +1,18 @@
 <!--
   @component Accordion
 
-  Collapsible content sections.
+  Group container for collapsible sections. Controls shared expand/collapse state.
 
-  @example Single item
+  @example Single-open (default)
   <Accordion>
-    <AccordionItem title="Section 1">
-      Content for section 1
-    </AccordionItem>
-    <AccordionItem title="Section 2">
-      Content for section 2
-    </AccordionItem>
+    <AccordionItem title="Section 1">Content</AccordionItem>
+    <AccordionItem title="Section 2">Content</AccordionItem>
   </Accordion>
 
-  @example Controlled
-  <Accordion bind:expanded={openSections} multiple>
-    ...
+  @example Multiple open
+  <Accordion bind:expanded={openIds} multiple>
+    <AccordionItem id="a" title="First">Content</AccordionItem>
+    <AccordionItem id="b" title="Second" badge="3">Content</AccordionItem>
   </Accordion>
 -->
 <script>
@@ -30,36 +27,30 @@
 
   function toggle(id) {
     if (multiple) {
-      if (expanded.includes(id)) {
-        expanded = expanded.filter(i => i !== id);
-      } else {
-        expanded = [...expanded, id];
-      }
+      expanded = expanded.includes(id)
+        ? expanded.filter(i => i !== id)
+        : [...expanded, id];
     } else {
       expanded = expanded.includes(id) ? [] : [id];
     }
   }
 
-  function isExpanded(id) {
-    return expanded.includes(id);
-  }
-
   setContext('accordion', {
     toggle,
     isExpanded: (id) => expanded.includes(id)
   });
 </script>
 
-<div class="accordion {className}">
+<div class="jera-accordion {className}" role="region">
   {@render children?.()}
 </div>
 
 <style>
-  .accordion {
+  .jera-accordion {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color-base03);
     border-radius: 0.5rem;
     overflow: hidden;
+    background: color-mix(in srgb, var(--color-base01) 60%, transparent);
   }
 </style>

package/src/components/navigation/AccordionItem.svelte

@@ -1,63 +1,90 @@
 <!--
   @component AccordionItem
 
-  Individual accordion section. Must be used inside Accordion.
+  Collapsible content section. Works in two modes:
 
-  @example
-  <AccordionItem id="section-1" title="Click to expand">
-    Hidden content here
+  **Group** — inside an <Accordion>, state is managed by the parent context.
+  **Solo** — standalone, manages its own state via bind:expanded.
+
+  @example Group (inside Accordion)
+  <Accordion>
+    <AccordionItem title="Section 1">Content</AccordionItem>
+    <AccordionItem title="Section 2" badge="5">Content</AccordionItem>
+  </Accordion>
+
+  @example Solo (standalone)
+  <AccordionItem title="Settings" bind:expanded={open}>
+    Content here
+  </AccordionItem>
+
+  @example With leading/trailing snippets
+  <AccordionItem title="Infrastructure">
+    {#snippet leading()}<Activity size={14} />{/snippet}
+    {#snippet trailing()}<Badge variant="success">OK</Badge>{/snippet}
+    Content here
   </AccordionItem>
 -->
 <script>
   import { getContext } from 'svelte';
   import { slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
 
   let {
     id,
     title = '',
+    expanded: expandedProp = $bindable(false),
     disabled = false,
+    badge = null,
+    leading,
+    trailing,
     children,
     class: className = ''
   } = $props();
 
   const accordion = getContext('accordion');
+  const itemId = id || `acc-${Math.random().toString(36).slice(2, 9)}`;
+  const inGroup = !!accordion;
 
-  // Generate id if not provided
-  const itemId = id || `accordion-${Math.random().toString(36).slice(2, 9)}`;
-
-  const isOpen = $derived(accordion?.isExpanded(itemId) ?? false);
+  const isOpen = $derived(
+    inGroup ? (accordion.isExpanded(itemId) ?? false) : expandedProp
+  );
 
   function handleClick() {
-    if (!disabled && accordion) {
+    if (disabled) return;
+    if (inGroup) {
       accordion.toggle(itemId);
-    }
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleClick();
+    } else {
+      expandedProp = !expandedProp;
     }
   }
 </script>
 
-<div class="accordion-item {className}" class:accordion-item-disabled={disabled}>
+<div
+  class="accordion-item {className}"
+  class:accordion-item-solo={!inGroup}
+  class:accordion-item-disabled={disabled}
+>
   <button
     type="button"
     class="accordion-trigger"
     class:accordion-trigger-open={isOpen}
     aria-expanded={isOpen}
     aria-controls="content-{itemId}"
-    aria-disabled={disabled}
+    aria-disabled={disabled || undefined}
+    {disabled}
     onclick={handleClick}
-    onkeydown={handleKeydown}
   >
+    {#if leading}{@render leading()}{/if}
     <span class="accordion-title">{title}</span>
+    {#if badge != null}
+      <span class="accordion-badge">{badge}</span>
+    {/if}
+    {#if trailing}{@render trailing()}{/if}
     <svg
-      class="accordion-icon"
-      class:accordion-icon-open={isOpen}
-      width="16"
-      height="16"
+      class="accordion-chevron"
+      class:accordion-chevron-open={isOpen}
+      width="14"
+      height="14"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -73,7 +100,9 @@
     <div
       id="content-{itemId}"
       class="accordion-content"
-      transition:slide={{ duration: 200 }}
+      role="region"
+      aria-labelledby="trigger-{itemId}"
+      transition:slide={{ duration: 200, easing: cubicOut }}
     >
       <div class="accordion-body">
         {@render children?.()}
@@ -83,62 +112,110 @@
 </div>
 
 <style>
+  /* Item container */
   .accordion-item {
-    border-bottom: 1px solid var(--color-base03);
+    border-bottom: 1px solid var(--color-base02);
   }
 
   .accordion-item:last-child {
     border-bottom: none;
   }
 
+  .accordion-item-solo {
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--color-base01) 60%, transparent);
+    border-bottom: none;
+  }
+
   .accordion-item-disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 
+  /* Trigger / header */
   .accordion-trigger {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.5rem;
     width: 100%;
-    padding: 1rem;
-    background: transparent;
+    height: 2.75rem;
+    padding: 0 1rem;
+    background: color-mix(in srgb, var(--color-base00) 50%, transparent);
     border: none;
-    font-size: 0.9375rem;
-    font-weight: 500;
-    color: var(--color-base07);
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-base06);
     cursor: pointer;
     text-align: left;
     transition: background 0.15s ease;
   }
 
-  .accordion-trigger:hover:not([aria-disabled="true"]) {
-    background: var(--color-base01);
+  .accordion-trigger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
   }
 
   .accordion-trigger-open {
-    background: var(--color-base01);
+    background: color-mix(in srgb, var(--color-base00) 90%, transparent);
   }
 
+  .accordion-trigger:focus-visible {
+    outline: 2px solid var(--color-base0D);
+    outline-offset: -2px;
+  }
+
+  /* Title */
   .accordion-title {
     flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Badge */
+  .accordion-badge {
+    flex-shrink: 0;
+    padding: 0.0625rem 0.375rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--color-base04);
+    background: color-mix(in srgb, var(--color-base04) 10%, transparent);
+    border-radius: 9999px;
   }
 
-  .accordion-icon {
+  /* Chevron */
+  .accordion-chevron {
     flex-shrink: 0;
     color: var(--color-base05);
     transition: transform 0.2s ease;
   }
 
-  .accordion-icon-open {
+  .accordion-trigger:hover:not(:disabled) .accordion-chevron {
+    color: var(--color-base06);
+    transform: scale(1.125);
+  }
+
+  .accordion-chevron-open {
     transform: rotate(180deg);
   }
 
+  .accordion-trigger:hover:not(:disabled) .accordion-chevron-open {
+    transform: rotate(180deg) scale(1.125);
+  }
+
+  /* Content */
   .accordion-content {
-    overflow: hidden;
+    background: var(--color-base01);
+    border-bottom: 1px solid var(--color-base02);
+  }
+
+  .accordion-item:last-child .accordion-content {
+    border-bottom: none;
   }
 
   .accordion-body {
-    padding: 0 1rem 1rem 1rem;
+    padding: 1rem;
     font-size: 0.875rem;
     color: var(--color-base05);
     line-height: 1.6;

package/src/components/navigation/TabNav.svelte

@@ -45,10 +45,34 @@
     active = tab.id;
     onchange?.(tab);
   }
+
+  function handleKeydown(e, index) {
+    let nextIndex = index;
+
+    if (e.key === 'ArrowRight') {
+      nextIndex = (index + 1) % tabs.length;
+    } else if (e.key === 'ArrowLeft') {
+      nextIndex = (index - 1 + tabs.length) % tabs.length;
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      nextIndex = tabs.length - 1;
+    } else {
+      return;
+    }
+
+    e.preventDefault();
+    const nextTab = tabs[nextIndex];
+    if (!nextTab.disabled) {
+      handleTabClick(nextTab);
+      const buttons = e.currentTarget.parentElement.querySelectorAll('[role="tab"]');
+      buttons[nextIndex]?.focus();
+    }
+  }
 </script>
 
 <nav class="tab-nav tab-nav-{variant} tab-nav-{size} {className}" role="tablist">
-  {#each tabs as tab}
+  {#each tabs as tab, index}
     <button
       type="button"
       class="tab-item"
@@ -57,7 +81,9 @@
       role="tab"
       aria-selected={active === tab.id}
       aria-disabled={tab.disabled}
+      tabindex={active === tab.id ? 0 : -1}
       onclick={() => handleTabClick(tab)}
+      onkeydown={(e) => handleKeydown(e, index)}
     >
       {#if tab.icon}
         <span class="tab-icon">

package/src/components/navigation/Tabs.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Tabs
 
-  Tabbed navigation component.
+  Tabbed navigation component with keyboard navigation.
 
   @example Basic usage
   <Tabs
@@ -13,7 +13,7 @@
     bind:active={activeTab}
   />
 
-  @example With icons
+  @example With icons (component reference)
   <Tabs
     tabs={[
       { id: 'home', label: 'Home', icon: HomeIcon },
@@ -64,7 +64,6 @@
     const nextTab = tabs[nextIndex];
     if (!nextTab.disabled) {
       selectTab(nextTab);
-      // Focus the next tab button
       const buttons = e.currentTarget.parentElement.querySelectorAll('[role="tab"]');
       buttons[nextIndex]?.focus();
     }
@@ -90,8 +89,9 @@
       onkeydown={(e) => handleKeydown(e, tab, index)}
     >
       {#if tab.icon}
+        {@const Icon = tab.icon}
         <span class="tab-icon">
-          <svelte:component this={tab.icon} size={16} />
+          <Icon size={16} />
         </span>
       {/if}
       {#if tab.label}
@@ -107,10 +107,10 @@
 <style>
   .tabs {
     display: inline-flex;
-    gap: 0.25rem;
+    gap: var(--space-1);
     background: var(--color-base01);
-    border-radius: 0.5rem;
-    padding: 0.25rem;
+    border-radius: var(--radius-lg);
+    padding: var(--space-1);
   }
 
   .tabs-full-width {
@@ -126,12 +126,12 @@
   .tab {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
     background: transparent;
     border: none;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
     font-weight: 500;
     color: var(--color-base05);
     cursor: pointer;
@@ -141,13 +141,13 @@
 
   /* Size variants */
   .tabs-sm .tab {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
   }
 
   .tabs-lg .tab {
-    padding: 0.625rem 1.25rem;
-    font-size: 1rem;
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-base);
   }
 
   .tab:hover:not(.tab-disabled) {
@@ -180,12 +180,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 1.25rem;
-    height: 1.25rem;
-    padding: 0 0.375rem;
+    min-width: var(--space-5);
+    height: var(--space-5);
+    padding: 0 var(--space-1);
     background: var(--color-base03);
     border-radius: 9999px;
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     font-weight: 600;
   }
 
@@ -224,7 +224,7 @@
   .tabs-pills {
     background: transparent;
     padding: 0;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
 
   .tabs-pills .tab {

package/src/components/primitives/ThemeSelect.svelte

@@ -122,9 +122,9 @@
 {/if}
 
 <style>
-  /* ============================================
+  /* --------------------------------------------
      SEGMENTED CONTROL
-     ============================================ */
+     -------------------------------------------- */
   .theme-select-segmented {
     display: inline-flex;
     align-items: center;
@@ -177,9 +177,9 @@
     white-space: nowrap;
   }
 
-  /* ============================================
+  /* --------------------------------------------
      SIZES - SEGMENTED
-     ============================================ */
+     -------------------------------------------- */
   .theme-select-sm .theme-select-option {
     padding: 2px var(--space-2, 0.5rem);
     font-size: var(--text-xs, 0.75rem);
@@ -195,9 +195,9 @@
     font-size: var(--text-base, 1rem);
   }
 
-  /* ============================================
+  /* --------------------------------------------
      DROPDOWN
-     ============================================ */
+     -------------------------------------------- */
   .theme-select-dropdown {
     position: relative;
     display: inline-flex;
@@ -235,9 +235,9 @@
     color: var(--color-base04, #665c54);
   }
 
-  /* ============================================
+  /* --------------------------------------------
      SIZES - DROPDOWN
-     ============================================ */
+     -------------------------------------------- */
   .theme-select-dropdown.theme-select-sm .theme-select-native {
     padding: var(--space-1, 0.25rem) var(--space-6, 1.5rem) var(--space-1, 0.25rem) var(--space-2, 0.5rem);
     font-size: var(--text-xs, 0.75rem);
@@ -248,9 +248,9 @@
     font-size: var(--text-base, 1rem);
   }
 
-  /* ============================================
+  /* --------------------------------------------
      REDUCED MOTION
-     ============================================ */
+     -------------------------------------------- */
   @media (prefers-reduced-motion: reduce) {
     .theme-select-option,
     .theme-select-native {

package/src/components/primitives/ThemeToggle.svelte

@@ -121,9 +121,9 @@
 </button>
 
 <style>
-  /* ============================================
+  /* --------------------------------------------
      BASE STYLES
-     ============================================ */
+     -------------------------------------------- */
   .theme-toggle {
     position: relative;
     display: inline-flex;
@@ -141,9 +141,9 @@
     outline-offset: 2px;
   }
 
-  /* ============================================
+  /* --------------------------------------------
      VARIANTS
-     ============================================ */
+     -------------------------------------------- */
   .theme-toggle-ghost {
     background-color: transparent;
     color: var(--color-base05, #a89984);
@@ -176,9 +176,9 @@
     color: var(--color-base06, #d5c4a1);
   }
 
-  /* ============================================
+  /* --------------------------------------------
      SIZES
-     ============================================ */
+     -------------------------------------------- */
   .theme-toggle-sm {
     padding: var(--space-1, 0.25rem);
     min-width: 1.75rem;
@@ -197,9 +197,9 @@
     min-height: 2.75rem;
   }
 
-  /* ============================================
+  /* --------------------------------------------
      ICON ANIMATION
-     ============================================ */
+     -------------------------------------------- */
   .theme-toggle-icon-wrapper {
     position: relative;
     display: flex;
@@ -235,9 +235,9 @@
     color: var(--color-base0D, #83a598);
   }
 
-  /* ============================================
+  /* --------------------------------------------
      REDUCED MOTION
-     ============================================ */
+     -------------------------------------------- */
   @media (prefers-reduced-motion: reduce) {
     .theme-toggle-icon {
       transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out);
@@ -249,9 +249,9 @@
     }
   }
 
-  /* ============================================
+  /* --------------------------------------------
      LABEL
-     ============================================ */
+     -------------------------------------------- */
   .theme-toggle-label {
     font-size: var(--text-sm, 0.875rem);
     color: var(--color-base05, #a89984);

package/src/index.js

@@ -21,9 +21,9 @@
  * import '@miozu/jera/tokens';
  */
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Primitives
-// ============================================
+// --------------------------------------------
 
 export { default as Button } from './components/primitives/Button.svelte';
 export { default as Badge } from './components/primitives/Badge.svelte';
@@ -43,9 +43,9 @@ export { default as MemberCard } from './components/primitives/MemberCard.svelte
 export { default as ThemeToggle } from './components/primitives/ThemeToggle.svelte';
 export { default as ThemeSelect } from './components/primitives/ThemeSelect.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Forms
-// ============================================
+// --------------------------------------------
 
 export { default as Input } from './components/forms/Input.svelte';
 export { default as IconInput } from './components/forms/IconInput.svelte';
@@ -62,9 +62,9 @@ export { default as SearchInput } from './components/forms/SearchInput.svelte';
 export { default as PinInput } from './components/forms/PinInput.svelte';
 export { default as Dropzone } from './components/forms/Dropzone.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Feedback
-// ============================================
+// --------------------------------------------
 
 export {
   default as Toast,
@@ -79,9 +79,9 @@ export { default as Spinner } from './components/feedback/Spinner.svelte';
 export { default as EmptyState } from './components/feedback/EmptyState.svelte';
 export { default as Alert } from './components/feedback/Alert.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Overlays
-// ============================================
+// --------------------------------------------
 
 export { default as Modal } from './components/overlays/Modal.svelte';
 export { default as Popover } from './components/overlays/Popover.svelte';
@@ -90,9 +90,9 @@ export { default as DropdownItem } from './components/overlays/DropdownItem.svel
 export { default as DropdownDivider } from './components/overlays/DropdownDivider.svelte';
 export { default as ConfirmDialog } from './components/overlays/ConfirmDialog.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Navigation
-// ============================================
+// --------------------------------------------
 
 export { default as Tabs } from './components/navigation/Tabs.svelte';
 export { default as TabNav } from './components/navigation/TabNav.svelte';
@@ -135,31 +135,32 @@ export { default as LeftBarToggle } from './components/navigation/LeftBarToggle.
 export { default as LeftBarPopover } from './components/navigation/LeftBarPopover.svelte';
 export { default as DropdownContainer } from './components/navigation/DropdownContainer.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Layout
-// ============================================
+// --------------------------------------------
 
 export { default as PageHeader } from './components/layout/PageHeader.svelte';
 export { default as SettingCard } from './components/layout/SettingCard.svelte';
+export { default as SettingItem } from './components/layout/SettingItem.svelte';
 
-// ============================================
+// --------------------------------------------
 // COMPONENTS - Documentation
-// ============================================
+// --------------------------------------------
 
 export { default as CodeBlock } from './components/docs/CodeBlock.svelte';
 export { default as PropsTable } from './components/docs/PropsTable.svelte';
 export { default as SplitPane } from './components/docs/SplitPane.svelte';
 export { default as DocSection } from './components/docs/DocSection.svelte';
 
-// ============================================
+// --------------------------------------------
 // UTILITIES - Class Composition
-// ============================================
+// --------------------------------------------
 
 export { cn, rcn, cv, mergeClasses, when, match } from './utils/cn.svelte.js';
 
-// ============================================
+// --------------------------------------------
 // UTILITIES - Reactive State
-// ============================================
+// --------------------------------------------
 
 export {
   createReactive,
@@ -193,9 +194,9 @@ export {
   DEFAULT_LANGUAGES
 } from './utils/highlighter.js';
 
-// ============================================
+// --------------------------------------------
 // ACTIONS
-// ============================================
+// --------------------------------------------
 
 export {
   clickOutside,