@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/u0-primitives/AccordionSection.svelte

@@ -0,0 +1,186 @@
+<script lang="ts" module>
+  /**
+   * AccordionSection — Collapsible section with chevron toggle
+   * 
+   * A generalized version of NNJAS CollapsibleSection for the LEAP design system.
+   * Used for sidebar sections, filter groups, settings categories.
+   * 
+   * @example
+   * <AccordionSection title="Filters" count={5}>
+   *   <FilterOptions />
+   * </AccordionSection>
+   */
+  export interface AccordionSectionProps {
+    title: string;
+    icon?: string;
+    count?: number;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props extends AccordionSectionProps {
+    children: Snippet;
+    expanded?: boolean;
+  }
+
+  let {
+    title,
+    icon,
+    count,
+    defaultExpanded = true,
+    disabled = false,
+    class: className = '',
+    children,
+    expanded = $bindable(defaultExpanded),
+  }: Props = $props();
+
+  function toggle() {
+    if (!disabled) {
+      expanded = !expanded;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle();
+    }
+  }
+</script>
+
+<div class="accordion-section {className}" class:collapsed={!expanded} class:disabled>
+  <button
+    class="section-header"
+    onclick={toggle}
+    onkeydown={handleKeydown}
+    aria-expanded={expanded}
+    type="button"
+    disabled={disabled}
+  >
+    <span class="section-chevron" aria-hidden="true">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
+      </svg>
+    </span>
+
+    {#if icon}
+      <span class="section-icon">
+        {@html icon}
+      </span>
+    {/if}
+
+    <span class="section-title">{title}</span>
+
+    {#if count !== undefined}
+      <span class="section-count">{count}</span>
+    {/if}
+  </button>
+
+  {#if expanded}
+    <div class="section-content">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .accordion-section {
+    border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    width: 100%;
+    padding: var(--space-3, 0.75rem);
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #888);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.15s ease;
+  }
+
+  .section-header:hover:not(:disabled) {
+    background: var(--color-bg-hover, rgba(255, 255, 255, 0.03));
+    color: var(--color-text-primary, #e8e8e8);
+  }
+
+  .section-header:focus-visible {
+    outline: 2px solid var(--color-accent, var(--color-accent));
+    outline-offset: -2px;
+  }
+
+  .section-header:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .section-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    transition: transform 0.15s ease;
+  }
+
+  .section-chevron svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  .collapsed .section-chevron {
+    transform: rotate(-90deg);
+  }
+
+  .section-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--color-text-muted, #666);
+  }
+
+  .section-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .section-title {
+    flex: 1;
+  }
+
+  .section-count {
+    padding: 0 var(--space-2, 0.5rem);
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    color: var(--color-accent, var(--color-accent));
+    font-size: var(--text-2xs, 0.625rem);
+    border-radius: var(--radius-full, 9999px);
+    min-width: 20px;
+    text-align: center;
+  }
+
+  .section-content {
+    padding: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem);
+  }
+
+  .collapsed .section-content {
+    display: none;
+  }
+</style>

package/dist/u0-primitives/AccordionSection.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * AccordionSection — Collapsible section with chevron toggle
+ *
+ * A generalized version of NNJAS CollapsibleSection for the LEAP design system.
+ * Used for sidebar sections, filter groups, settings categories.
+ *
+ * @example
+ * <AccordionSection title="Filters" count={5}>
+ *   <FilterOptions />
+ * </AccordionSection>
+ */
+export interface AccordionSectionProps {
+    title: string;
+    icon?: string;
+    count?: number;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+import type { Snippet } from 'svelte';
+interface Props extends AccordionSectionProps {
+    children: Snippet;
+    expanded?: boolean;
+}
+declare const AccordionSection: import("svelte").Component<Props, {}, "expanded">;
+type AccordionSection = ReturnType<typeof AccordionSection>;
+export default AccordionSection;
+//# sourceMappingURL=AccordionSection.svelte.d.ts.map

package/dist/u0-primitives/AccordionSection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSection.svelte.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/AccordionSection.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgEH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/u0-primitives/LockIndicator.svelte

@@ -0,0 +1,244 @@
+<script lang="ts" module>
+  /**
+   * LockIndicator — Collaborative lock state indicator
+   * 
+   * A generalized version of NNJAS SectionLock for the LEAP design system.
+   * Shows who is currently editing a shared resource.
+   * 
+   * @example
+   * <LockIndicator 
+   *   user={{ name: 'Alice', color: '#ff0000' }}
+   *   since={Date.now() - 60000}
+   *   onRequestAccess={() => showToast('Waiting for Alice...')}
+   * />
+   */
+  export interface LockUser {
+    id: string;
+    name: string;
+    color: string;
+    avatar?: string;
+  }
+
+  export type LockState = 'locked' | 'requesting' | 'available';
+</script>
+
+<script lang="ts">
+  interface Props {
+    state?: LockState;
+    user?: LockUser | null;
+    since?: number | null;
+    onRequestAccess?: () => void;
+    class?: string;
+  }
+
+  let {
+    state = 'available',
+    user = null,
+    since = null,
+    onRequestAccess,
+    class: className = ''
+  }: Props = $props();
+
+  let duration = $derived.by(() => {
+    if (!since) return '';
+    const diff = Date.now() - since;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    
+    if (hours > 0) return `${hours}h ${minutes % 60}m`;
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+    return `${seconds}s`;
+  });
+
+  function handleClick() {
+    if (state === 'locked' && onRequestAccess) {
+      onRequestAccess();
+    }
+  }
+
+  function getInitials(name: string): string {
+    return name
+      .split(' ')
+      .map(n => n[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+</script>
+
+<div 
+  class="lock-indicator lock-indicator--{state} {className}"
+  role="status"
+  aria-live="polite"
+>
+  {#if state === 'locked' && user}
+    <div class="lock-content">
+      {#if user.avatar}
+        <img src={user.avatar} alt="" class="lock-avatar" />
+      {:else}
+        <div 
+          class="lock-avatar lock-avatar--initials"
+          style="background-color: {user.color}"
+        >
+          {getInitials(user.name)}
+        </div>
+      {/if}
+      
+      <div class="lock-info">
+        <span class="lock-user">{user.name}</span>
+        <span class="lock-status">editing for {duration}</span>
+      </div>
+      
+      {#if onRequestAccess}
+        <button 
+          class="lock-request-btn"
+          onclick={handleClick}
+          type="button"
+        >
+          Request Access
+        </button>
+      {/if}
+    </div>
+    
+    <div class="lock-bar" style="background-color: {user.color}"></div>
+  {:else if state === 'requesting'}
+    <div class="lock-content">
+      <div class="lock-spinner" aria-hidden="true"></div>
+      <span class="lock-message">Requesting access...</span>
+    </div>
+  {:else if state === 'available'}
+    <div class="lock-content lock-content--available">
+      <svg class="lock-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+      <span class="lock-message">Available for editing</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lock-indicator {
+    position: relative;
+    background: var(--color-bg-panel, var(--color-bg-panel-token, #181c20));
+    border-radius: var(--radius-md, 4px);
+    overflow: hidden;
+  }
+
+  .lock-indicator--locked {
+    border: 1px solid var(--color-border-default, #333);
+  }
+
+  .lock-indicator--requesting {
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    border: 1px solid var(--color-accent, var(--color-accent));
+  }
+
+  .lock-indicator--available {
+    background: color-mix(in srgb, var(--color-success) 15%, transparent);
+    border: 1px solid var(--color-success);
+    opacity: 0.7;
+  }
+
+  .lock-content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  }
+
+  .lock-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-full, 9999px);
+    flex-shrink: 0;
+  }
+
+  .lock-avatar--initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: 600;
+    color: var(--color-bg-app, #141414);
+  }
+
+  .lock-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .lock-user {
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 500;
+     color: var(--color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .lock-status {
+    font-size: var(--text-xs, 0.75rem);
+     color: var(--color-text-muted);
+  }
+
+  .lock-request-btn {
+    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    color: var(--color-accent, var(--color-accent));
+    border: 1px solid var(--color-accent, var(--color-accent));
+    border-radius: var(--radius-sm, 2px);
+    font-size: var(--text-xs, 0.75rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  .lock-request-btn:hover {
+    background: var(--color-accent);
+    color: var(--color-text-inverse);
+  }
+
+  .lock-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    border-radius: 0 0 var(--radius-sm, 2px) var(--radius-sm, 2px);
+  }
+
+  .lock-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--color-accent, var(--color-accent));
+    border-top-color: transparent;
+    border-radius: var(--radius-full, 9999px);
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .lock-message {
+    font-size: var(--text-sm, 0.875rem);
+     color: var(--color-text-secondary, #a8a08c);
+  }
+
+  .lock-content--available {
+     background: var(--color-success);
+     color: var(--color-text-inverse);
+  }
+
+  .lock-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+</style>

package/dist/u0-primitives/LockIndicator.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * LockIndicator — Collaborative lock state indicator
+ *
+ * A generalized version of NNJAS SectionLock for the LEAP design system.
+ * Shows who is currently editing a shared resource.
+ *
+ * @example
+ * <LockIndicator
+ *   user={{ name: 'Alice', color: '#ff0000' }}
+ *   since={Date.now() - 60000}
+ *   onRequestAccess={() => showToast('Waiting for Alice...')}
+ * />
+ */
+export interface LockUser {
+    id: string;
+    name: string;
+    color: string;
+    avatar?: string;
+}
+export type LockState = 'locked' | 'requesting' | 'available';
+interface Props {
+    state?: LockState;
+    user?: LockUser | null;
+    since?: number | null;
+    onRequestAccess?: () => void;
+    class?: string;
+}
+declare const LockIndicator: import("svelte").Component<Props, {}, "">;
+type LockIndicator = ReturnType<typeof LockIndicator>;
+export default LockIndicator;
+//# sourceMappingURL=LockIndicator.svelte.d.ts.map

package/dist/u0-primitives/LockIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockIndicator.svelte.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/LockIndicator.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;AAE9D,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsFH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/u0-primitives/VerticalToolbar.svelte

@@ -0,0 +1,208 @@
+<script lang="ts" module>
+  /**
+   * VerticalToolbar — Icon bar for collapsed sidebar peek mode
+   * 
+   * A generalized version of NNJAS IconStrip for the LEAP design system.
+   * Provides VS Code-style vertical navigation with tooltips and badges.
+   * 
+   * @example
+   * <VerticalToolbar 
+   *   items={[
+   *     { id: 'files', icon: folderIcon, label: 'Files', onClick: () => {} },
+   *     { id: 'search', icon: searchIcon, label: 'Search', badge: 3 },
+   *   ]}
+   * />
+   */
+  export interface ToolbarItem {
+    id: string;
+    icon: string;
+    label: string;
+    active?: boolean;
+    badge?: string | number;
+    disabled?: boolean;
+    onClick?: () => void;
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    items: ToolbarItem[];
+    position?: 'left' | 'right';
+    class?: string;
+  }
+
+  let { items, position = 'left', class: className = '' }: Props = $props();
+
+  let hoveredId = $state<string | null>(null);
+
+  function handleClick(item: ToolbarItem) {
+    if (!item.disabled) {
+      item.onClick?.();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent, item: ToolbarItem) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick(item);
+    }
+  }
+</script>
+
+<nav class="vertical-toolbar vertical-toolbar--{position} {className}" aria-label="Toolbar">
+  {#each items as item (item.id)}
+    <button
+      class="toolbar-item"
+      class:active={item.active}
+      class:disabled={item.disabled}
+      onclick={() => handleClick(item)}
+      onmouseenter={() => hoveredId = item.id}
+      onmouseleave={() => hoveredId = null}
+      onfocus={() => hoveredId = item.id}
+      onblur={() => hoveredId = null}
+      onkeydown={(e) => handleKeydown(e, item)}
+      aria-label={item.label}
+      type="button"
+      disabled={item.disabled}
+    >
+      <span class="toolbar-icon">
+        {@html item.icon}
+      </span>
+
+      {#if item.badge !== undefined && item.badge !== null && item.badge !== ''}
+        <span class="toolbar-badge">{item.badge}</span>
+      {/if}
+
+      {#if hoveredId === item.id}
+        <span 
+          class="toolbar-tooltip"
+          class:tooltip-right={position === 'left'}
+          class:tooltip-left={position === 'right'}
+        >
+          {item.label}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</nav>
+
+<style>
+  .vertical-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1, 0.25rem);
+    padding: var(--space-2, 0.5rem) 0;
+    height: 100%;
+    overflow-y: auto;
+    background: var(--color-bg-canvas);
+  }
+
+  .vertical-toolbar--left {
+    border-right: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .vertical-toolbar--right {
+    border-left: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .toolbar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md, 4px);
+    color: var(--color-text-muted, var(--color-text-muted-token, #6b6558));
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .toolbar-item:hover:not(:disabled) {
+    background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
+    color: var(--color-text-secondary, #a8a08c);
+  }
+
+  .toolbar-item:focus-visible {
+    outline: 2px solid var(--color-accent, var(--color-accent));
+    outline-offset: -2px;
+  }
+
+  .toolbar-item.active {
+    color: var(--color-accent, var(--color-accent));
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    border-color: var(--color-accent-muted, var(--color-accent-muted));
+  }
+
+  .toolbar-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--color-accent, var(--color-accent));
+    border-radius: 0 2px 2px 0;
+  }
+
+  .toolbar-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .toolbar-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  .toolbar-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toolbar-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 4px;
+    background: var(--color-accent, var(--color-accent));
+    color: var(--color-bg-app, #141414);
+    font-size: 10px;
+    font-weight: 600;
+    border-radius: var(--radius-full, 9999px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbar-tooltip {
+    position: absolute;
+    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+    background: var(--color-bg-panel-elevated, #2a2a2a);
+    color: var(--color-text-primary, #f2efe9);
+    font-size: var(--text-xs, 0.75rem);
+    white-space: nowrap;
+    border-radius: var(--radius-md, 4px);
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
+  }
+
+  .toolbar-tooltip.tooltip-right {
+    left: calc(100% + var(--space-2, 0.5rem));
+  }
+
+  .toolbar-tooltip.tooltip-left {
+    right: calc(100% + var(--space-2, 0.5rem));
+  }
+</style>