@stephen-netu/design-system 0.1.0

package/src/l0-layout/kanban/KanbanCard.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+  import { GripVertical, X } from '@lucide/svelte';
+  import Card from '../../u0-primitives/card/Card.svelte';
+  import Badge from '../../u0-primitives/badge/Badge.svelte';
+  import Avatar from '../../u0-primitives/avatar/Avatar.svelte';
+  import type { Snippet } from 'svelte';
+
+  export interface KanbanCardData {
+    id: string;
+    title: string;
+    content?: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    assignee?: {
+      name: string;
+      src?: string;
+    };
+    badges?: Array<{
+      label: string;
+      color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    }>;
+  }
+
+  interface Props {
+    item: KanbanCardData;
+    isDragging?: boolean;
+    class?: string;
+    ondragstart?: (e: DragEvent) => void;
+    onclick?: () => void;
+    ondelete?: () => void;
+    actions?: Snippet; // Additional actions for hover state
+  }
+
+  let {
+    item,
+    isDragging = false,
+    class: className = '',
+    ondragstart,
+    onclick,
+    ondelete,
+    actions
+  }: Props = $props();
+
+  function handleGripDragStart(e: DragEvent) {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('text/plain', item.id);
+      e.dataTransfer.effectAllowed = 'move';
+      // Use the full card wrapper as the drag ghost — dragging just the grip icon looks broken.
+      const wrapper = (e.currentTarget as HTMLElement).closest<HTMLElement>('.ds-kanban-card-wrapper');
+      if (wrapper) {
+        e.dataTransfer.setDragImage(wrapper, wrapper.offsetWidth / 2, 20);
+      }
+    }
+    ondragstart?.(e);
+  }
+
+  function getPriorityColor(p: KanbanCardData['priority']) {
+    switch (p) {
+      case 'low': return 'var(--color-info)';
+      case 'medium': return 'var(--color-warning)';
+      case 'high': return 'var(--color-accent)';
+      case 'urgent': return 'var(--color-error)';
+      default: return 'transparent';
+    }
+  }
+</script>
+
+<!-- Drag is scoped to the grip handle — the wrapper is NOT draggable.
+     Making the whole wrapper draggable suppresses click events on WebKit (Tauri/Safari). -->
+<div
+  class="ds-kanban-card-wrapper {className}"
+  class:is-dragging={isDragging}
+  aria-grabbed={isDragging}
+>
+  <Card 
+    variant="interactive" 
+    onclick={onclick}
+    class="ds-kanban-card-inner"
+  >
+    <!-- Priority Bar -->
+    {#if item.priority}
+      <div 
+        class="ds-kanban-priority-bar" 
+        style="background-color: {getPriorityColor(item.priority)};"
+        title="Priority: {item.priority}"
+      ></div>
+    {/if}
+
+    <div class="ds-kanban-header">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="ds-kanban-drag-handle"
+        title="Drag to reorder"
+        draggable="true"
+        ondragstart={handleGripDragStart}
+      >
+        <GripVertical size={14} />
+      </div>
+      
+      <h4 class="ds-kanban-title">{item.title}</h4>
+
+      <div class="ds-kanban-actions">
+        {#if actions}
+          {@render actions()}
+        {/if}
+        {#if ondelete}
+          <button 
+            class="ds-kanban-delete" 
+            onclick={(e) => { e.stopPropagation(); ondelete(); }}
+            title="Delete task"
+            aria-label="Delete task"
+          >
+            <X size={14} />
+          </button>
+        {/if}
+      </div>
+    </div>
+
+    {#if item.content}
+      <p class="ds-kanban-preview">{item.content}</p>
+    {/if}
+
+    <div class="ds-kanban-footer">
+      <div class="ds-kanban-badges">
+        {#if item.badges}
+          {#each item.badges as badge}
+            <Badge variant="status" color={badge.color || 'neutral'} size="sm">
+              {badge.label}
+            </Badge>
+          {/each}
+        {/if}
+      </div>
+
+      {#if item.assignee}
+        <div class="ds-kanban-assignee">
+          <Avatar 
+            name={item.assignee.name} 
+            src={item.assignee.src} 
+            size="sm" 
+            class="ds-kanban-avatar"
+          />
+        </div>
+      {/if}
+    </div>
+  </Card>
+</div>
+
+<style>
+  .ds-kanban-card-wrapper {
+    position: relative;
+    width: 100%;
+    transition: transform var(--transition-fast), opacity var(--transition-fast);
+  }
+
+  .ds-kanban-card-wrapper.is-dragging {
+    opacity: 0.5;
+    transform: scale(0.98);
+  }
+
+  /* Target the inner card to override default padding */
+  :global(.ds-kanban-card-inner.ds-card) {
+    padding: 0;
+    overflow: hidden; /* For priority bar */
+  }
+
+  .ds-kanban-priority-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .ds-kanban-header {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-2);
+    gap: var(--space-2);
+  }
+
+  .ds-kanban-drag-handle {
+    color: var(--color-text-muted);
+    cursor: grab;
+    margin-top: 2px;
+    padding: 2px;
+    border-radius: var(--radius-sm);
+    touch-action: none;
+    opacity: 0.4;
+    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
+  }
+
+  .ds-kanban-card-wrapper:hover .ds-kanban-drag-handle {
+    opacity: 1;
+  }
+
+  .ds-kanban-drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .ds-kanban-drag-handle:hover {
+    color: var(--color-text-secondary);
+    background: var(--color-bg-panel);
+  }
+
+  .ds-kanban-title {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-text-primary);
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-kanban-actions {
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+  }
+
+  .ds-kanban-card-wrapper:hover .ds-kanban-actions {
+    opacity: 1;
+  }
+
+  .ds-kanban-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted);
+    padding: 4px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+
+  .ds-kanban-delete:hover {
+    color: var(--color-error);
+    background: rgba(166, 94, 94, 0.15);
+  }
+
+  .ds-kanban-preview {
+    margin: 0 0 var(--space-3) var(--space-8);
+    padding-right: var(--space-4);
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .ds-kanban-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--space-4) var(--space-3) var(--space-8);
+    gap: var(--space-3);
+  }
+
+  .ds-kanban-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  .ds-kanban-assignee {
+    flex-shrink: 0;
+  }
+</style>

package/src/l0-layout/kanban/KanbanColumn.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Badge from '../../u0-primitives/badge/Badge.svelte';
+
+  interface Props {
+    id: string;
+    title: string;
+    count?: number;
+    wipLimit?: number;
+    isOverLimit?: boolean;
+    class?: string;
+    ondragover?: (e: DragEvent) => void;
+    ondragleave?: (e: DragEvent) => void;
+    ondrop?: (e: DragEvent) => void;
+    children?: Snippet; // The KanbanCards go here
+    actions?: Snippet; // Additional header actions (e.g. + button)
+  }
+
+  let {
+    id,
+    title,
+    count = 0,
+    wipLimit,
+    isOverLimit = false,
+    class: className = '',
+    ondragover,
+    ondragleave,
+    ondrop,
+    children,
+    actions
+  }: Props = $props();
+
+  let isDragTarget = $state(false);
+
+  // Derived state for WIP limit
+  let overLimit = $derived(isOverLimit || (wipLimit !== undefined && count > wipLimit));
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault(); // Necessary to allow dropping
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+    isDragTarget = true;
+    ondragover?.(e);
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    isDragTarget = false;
+    ondragleave?.(e);
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragTarget = false;
+    ondrop?.(e);
+  }
+</script>
+
+<div 
+  class="ds-kanban-column {className}"
+  class:is-over-limit={overLimit}
+  data-column-id={id}
+>
+  <header class="ds-kanban-column-header">
+    <div class="ds-kanban-column-title-group">
+      <h3 class="ds-kanban-column-title">{title}</h3>
+      <Badge
+        variant={overLimit ? 'status' : 'outline'}
+        color={overLimit ? 'error' : 'neutral'}
+        size="sm"
+      >
+        {count} {#if wipLimit}/ {wipLimit}{/if}
+      </Badge>
+    </div>
+
+    {#if actions}
+      <div class="ds-kanban-column-actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </header>
+
+  <div 
+    class="ds-kanban-column-content"
+    class:is-drag-target={isDragTarget}
+    role="region"
+    aria-label={`${title} column`}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
+  >
+    <div class="ds-kanban-column-scroll-area">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    <!-- Drop indicator overlay -->
+    <div class="ds-kanban-drop-indicator"></div>
+  </div>
+</div>
+
+<style>
+  .ds-kanban-column {
+    display: flex;
+    flex-direction: column;
+    min-width: 320px;
+    max-width: 360px;
+    height: 100%;
+    background: var(--color-bg-panel);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-default);
+    flex-shrink: 0;
+    transition: border-color var(--transition-normal);
+  }
+
+  .ds-kanban-column.is-over-limit {
+    border-color: rgba(166, 94, 94, 0.4);
+    box-shadow: 0 0 0 1px rgba(166, 94, 94, 0.1) inset;
+  }
+
+  .ds-kanban-column-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .ds-kanban-column-title-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .ds-kanban-column-title {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .ds-kanban-column-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ds-kanban-column-content {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100px;
+    background: transparent;
+    transition: background var(--transition-fast);
+  }
+
+  .ds-kanban-column-scroll-area {
+    padding: var(--space-3);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    height: 100%;
+  }
+
+  /* Custom scrollbar for column */
+  .ds-kanban-column-scroll-area::-webkit-scrollbar {
+    width: 6px;
+  }
+  .ds-kanban-column-scroll-area::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-full);
+  }
+  .ds-kanban-column-scroll-area::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Drag Target State */
+  .ds-kanban-column-content.is-drag-target {
+    background: rgba(184, 115, 51, 0.05); /* Very subtle brass tint */
+  }
+
+  .ds-kanban-drop-indicator {
+    position: absolute;
+    inset: var(--space-3);
+    border: 2px dashed var(--color-accent);
+    border-radius: var(--radius-md);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-fast);
+  }
+
+  .ds-kanban-column-content.is-drag-target .ds-kanban-drop-indicator {
+    opacity: 1;
+  }
+</style>

package/src/l0-layout/kanban/KanbanViewLayout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  interface Props {
+    header?: Snippet; // e.g. view switchers, filters, new task button
+    board: Snippet;   // e.g. KanbanBoard organism
+    class?: string;
+  }
+
+  let { header, board, class: className = '' }: Props = $props();
+</script>
+
+<div class="ds-kanban-layout {className}">
+  {#if header}
+    <div class="ds-kanban-layout-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="ds-kanban-layout-body">
+    <main class="ds-kanban-layout-main">
+      {@render board()}
+    </main>
+  </div>
+</div>
+
+<style>
+  .ds-kanban-layout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .ds-kanban-layout-header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    padding: 0;
+    background: var(--color-bg-panel);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .ds-kanban-layout-body {
+    flex: 1 1 0; /* flex-basis:0 makes height definite for % children */
+    min-height: 0;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .ds-kanban-layout-main {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+</style>

package/src/l0-layout/workspace/WorkspaceLayout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    sidebar?: Snippet;
+    header?: Snippet;
+    contextPanel?: Snippet;
+    main?: Snippet;
+    class?: string;
+  }
+
+  let {
+    sidebar,
+    header,
+    contextPanel,
+    main,
+    class: className = ''
+  }: Props = $props();
+</script>
+
+<div class="ds-workspace-layout {className}">
+  {#if sidebar}
+    <div class="ds-layout-sidebar">
+      {@render sidebar()}
+    </div>
+  {/if}
+
+  <div class="ds-layout-content-area">
+    {#if header}
+      <div class="ds-layout-header">
+        {@render header()}
+      </div>
+    {/if}
+
+    <main class="ds-layout-main">
+      {#if main}
+        {@render main()}
+      {/if}
+
+      <!-- Context Panel overlays or sits beside main content -->
+      {#if contextPanel}
+        <div class="ds-layout-context">
+          {@render contextPanel()}
+        </div>
+      {/if}
+    </main>
+  </div>
+</div>
+
+<style>
+  .ds-workspace-layout {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background: var(--color-bg-app);
+    color: var(--color-text-primary);
+  }
+
+  .ds-layout-sidebar {
+    height: 100%;
+    /* Sidebar component itself handles its width and collapse state */
+  }
+
+  .ds-layout-content-area {
+    flex: 1;
+    min-width: 0; /* Important for deeply nested flex overflows */
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+  }
+
+  .ds-layout-header {
+    flex-shrink: 0;
+    /* Header component manages its height */
+  }
+
+  .ds-layout-main {
+    flex: 1;
+    position: relative;
+    overflow: hidden; /* Main child should scroll if needed */
+    display: flex;
+  }
+
+  /* 
+    The Context Panel is typically positioned absolute covering the right side 
+    or flexed alongside. Our ContextPanel component is absolute by default.
+  */
+  .ds-layout-context {
+    position: static; /* Let the ContextPanel's absolute positioning work relative to main */
+  }
+</style>