@stephen-netu/design-system 0.1.0

package/src/l0-layout/grove/GroveCard.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import type { GovernanceMode } from './grove-types';
+  import Card from '../../u0-primitives/card/Card.svelte';
+  import Badge from '../../u0-primitives/badge/Badge.svelte';
+
+  interface Props {
+    groveId: string;
+    governance: GovernanceMode;
+    memberCount: number;
+    coordinatorName?: string;
+    isJoined: boolean;
+    epoch: number;
+    class?: string;
+    onjoin?: () => void;
+    onleave?: () => void;
+  }
+
+  let {
+    groveId,
+    governance,
+    memberCount,
+    coordinatorName,
+    isJoined,
+    epoch,
+    class: className = '',
+    onjoin,
+    onleave
+  }: Props = $props();
+
+  let governanceLabel = $derived(
+    governance === 'leader' ? 'Leader'
+    : governance === 'peer' ? 'Peer'
+    : 'Role-Based'
+  );
+
+  let governanceColor = $derived<'accent' | 'info' | 'warning'>(
+    governance === 'leader' ? 'accent'
+    : governance === 'peer' ? 'info'
+    : 'warning'
+  );
+
+  function handleAction() {
+    if (isJoined) {
+      onleave?.();
+    } else {
+      onjoin?.();
+    }
+  }
+</script>
+
+<Card variant="elevated" class="ds-grove-card {className}">
+  <div class="ds-grove-card-inner">
+    <div class="ds-grove-header">
+      <h3 class="ds-grove-name" title={groveId}>{groveId}</h3>
+      <Badge variant="status" color={governanceColor} size="sm">
+        {governanceLabel}
+      </Badge>
+    </div>
+
+    <div class="ds-grove-meta">
+      <span class="ds-grove-stat">
+        <span class="ds-grove-stat-value">{memberCount}</span>
+        <span class="ds-grove-stat-label">{memberCount === 1 ? 'member' : 'members'}</span>
+      </span>
+
+      <span class="ds-grove-stat">
+        <span class="ds-grove-stat-value">e{epoch}</span>
+        <span class="ds-grove-stat-label">epoch</span>
+      </span>
+    </div>
+
+    {#if coordinatorName}
+      <div class="ds-grove-coordinator">
+        <span class="ds-grove-coordinator-label">Coordinator:</span>
+        <span class="ds-grove-coordinator-name">{coordinatorName}</span>
+      </div>
+    {/if}
+
+    <div class="ds-grove-footer">
+      <button
+        class="ds-grove-action"
+        class:is-joined={isJoined}
+        onclick={handleAction}
+        aria-label={isJoined ? 'Leave grove' : 'Join grove'}
+      >
+        {isJoined ? 'Leave' : 'Join'}
+      </button>
+    </div>
+  </div>
+</Card>
+
+<style>
+  .ds-grove-card-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    font-family: var(--font-sans);
+  }
+
+  .ds-grove-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .ds-grove-name {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .ds-grove-meta {
+    display: flex;
+    gap: var(--space-4);
+  }
+
+  .ds-grove-stat {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1);
+  }
+
+  .ds-grove-stat-value {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-family: var(--font-mono);
+  }
+
+  .ds-grove-stat-label {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+  }
+
+  .ds-grove-coordinator {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ds-grove-coordinator-label {
+    color: var(--color-text-muted);
+  }
+
+  .ds-grove-coordinator-name {
+    color: var(--color-accent);
+    font-weight: 500;
+  }
+
+  .ds-grove-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .ds-grove-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-1) var(--space-4);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    font-family: var(--font-sans);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-accent);
+    background: transparent;
+    color: var(--color-accent);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .ds-grove-action:hover {
+    background: var(--color-accent);
+    color: #111;
+  }
+
+  .ds-grove-action.is-joined {
+    border-color: var(--border-default);
+    color: var(--color-text-secondary);
+  }
+
+  .ds-grove-action.is-joined:hover {
+    border-color: var(--color-error);
+    color: var(--color-error);
+    background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  }
+</style>

package/src/l0-layout/grove/MemberBadge.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { TrustState } from './grove-types';
+
+  interface Props {
+    name: string;
+    trustState: TrustState;
+    isCoordinator?: boolean;
+    size?: 'sm' | 'md';
+    class?: string;
+  }
+
+  let {
+    name,
+    trustState,
+    isCoordinator = false,
+    size = 'md',
+    class: className = ''
+  }: Props = $props();
+
+  let dotColor = $derived(
+    trustState === 'provisional' ? 'warning'
+    : trustState === 'trusted' ? 'success'
+    : trustState === 'vouched' ? 'accent'
+    : 'error'
+  );
+</script>
+
+<div
+  class="ds-member-badge size-{size} {className}"
+  title="{name} ({trustState}){isCoordinator ? ' — coordinator' : ''}"
+  role="status"
+>
+  <span class="ds-member-dot dot-{dotColor}"></span>
+  {#if isCoordinator}
+    <span class="ds-member-coordinator" aria-label="Coordinator">&#9733;</span>
+  {/if}
+  <span class="ds-member-name">{name}</span>
+</div>
+
+<style>
+  .ds-member-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-family: var(--font-sans);
+    color: var(--color-text-primary);
+    white-space: nowrap;
+  }
+
+  /* Sizes */
+  .size-sm {
+    font-size: var(--text-xs);
+    gap: var(--space-1);
+  }
+
+  .size-md {
+    font-size: var(--text-sm);
+  }
+
+  /* Trust state dot */
+  .ds-member-dot {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--radius-full);
+    flex-shrink: 0;
+  }
+
+  .size-sm .ds-member-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+  }
+
+  .dot-warning { background: var(--color-warning); }
+  .dot-success { background: var(--color-success); }
+  .dot-accent  { background: var(--color-accent); }
+  .dot-error   { background: var(--color-error); }
+
+  /* Coordinator indicator */
+  .ds-member-coordinator {
+    font-size: 0.6rem;
+    color: var(--color-accent);
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .size-sm .ds-member-coordinator {
+    font-size: 0.5rem;
+  }
+
+  /* Name */
+  .ds-member-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/src/l0-layout/grove/MemberList.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { MemberInfo } from './grove-types';
+  import MemberBadge from './MemberBadge.svelte';
+
+  interface Props {
+    members: MemberInfo[];
+    maxVisible?: number;
+    class?: string;
+  }
+
+  let {
+    members,
+    maxVisible = 5,
+    class: className = ''
+  }: Props = $props();
+
+  let visibleMembers = $derived(members.slice(0, maxVisible));
+  let overflowCount = $derived(Math.max(0, members.length - maxVisible));
+</script>
+
+<div class="ds-member-list {className}" role="list" aria-label="Grove members">
+  {#each visibleMembers as member (member.realmId)}
+    <div class="ds-member-list-item" role="listitem">
+      <MemberBadge
+        name={member.name}
+        trustState={member.trustState}
+        isCoordinator={member.isCoordinator}
+        size="sm"
+      />
+    </div>
+  {/each}
+
+  {#if overflowCount > 0}
+    <span class="ds-member-overflow" title="{overflowCount} more members">
+      +{overflowCount} more
+    </span>
+  {/if}
+</div>
+
+<style>
+  .ds-member-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    font-family: var(--font-sans);
+  }
+
+  .ds-member-list-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .ds-member-overflow {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    padding-left: calc(0.375rem + var(--space-1));
+    cursor: default;
+  }
+</style>

package/src/l0-layout/grove/grove-types.ts

@@ -0,0 +1,29 @@
+// Grove & Accord domain types for the LEAP design system
+
+export type TrustState = 'provisional' | 'trusted' | 'vouched' | 'banned';
+
+export type GovernanceMode = 'leader' | 'peer' | 'role_based';
+
+export interface MemberInfo {
+  realmId: string;
+  name: string;
+  trustState: TrustState;
+  isCoordinator: boolean;
+}
+
+export interface GroveInfo {
+  groveId: string;
+  governance: GovernanceMode;
+  memberCount: number;
+  coordinatorName?: string;
+  isJoined: boolean;
+  epoch: number;
+}
+
+export interface AccordInfo {
+  accordId: string;
+  domains: string[];
+  participantCount: number;
+  expiresAt: number;
+  groveId?: string;
+}

package/src/l0-layout/grove/index.ts

@@ -0,0 +1,14 @@
+// Grove & Accord — Collaboration UI components
+
+export { default as MemberBadge } from './MemberBadge.svelte';
+export { default as MemberList } from './MemberList.svelte';
+export { default as GroveCard } from './GroveCard.svelte';
+export { default as AccordCard } from './AccordCard.svelte';
+
+export type {
+  TrustState,
+  GovernanceMode,
+  MemberInfo,
+  GroveInfo,
+  AccordInfo,
+} from './grove-types';

package/src/l0-layout/index.ts

@@ -0,0 +1,45 @@
+// L0 Layout — Layout composition templates
+
+export { default as WorkspaceLayout } from './workspace/WorkspaceLayout.svelte';
+export { default as ChatViewLayout } from './chat-view/ChatViewLayout.svelte';
+export { default as KanbanViewLayout } from './kanban/KanbanViewLayout.svelte';
+export { default as KanbanBoard } from './kanban/KanbanBoard.svelte';
+export { default as KanbanColumn } from './kanban/KanbanColumn.svelte';
+export { default as KanbanCard } from './kanban/KanbanCard.svelte';
+
+// Grove & Accord
+export { default as MemberBadge } from './grove/MemberBadge.svelte';
+export { default as MemberList } from './grove/MemberList.svelte';
+export { default as GroveCard } from './grove/GroveCard.svelte';
+export { default as AccordCard } from './grove/AccordCard.svelte';
+export type {
+  TrustState,
+  GovernanceMode,
+  MemberInfo,
+  GroveInfo,
+  AccordInfo,
+} from './grove/grove-types';
+
+// Epistemic organisms
+export * from './epistemic/index.js';
+
+// Block Writer — visual block-based writing layout (controlled component)
+export {
+  BlockWriter,
+  BlockItem,
+  BlockHeader,
+  BlockContent,
+  BlockConnectionLines,
+  PHASE_CONFIG,
+  renderMarkdown,
+  renderInlineMarkdown,
+} from './block-writer/index.js';
+
+export type {
+  WritingBlock,
+  BlockConnection,
+  BlockWriterSchema,
+  BlockWriterConfig,
+  WritingPhase,
+  BlockOrigin,
+} from './block-writer/index.js';

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet; // The KanbanColumns go here
+  }
+
+  let {
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div class="ds-kanban-board {className}">
+  <!-- Drag-scrollable container -->
+  <div class="ds-kanban-board-scroll">
+    <div class="ds-kanban-board-track">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .ds-kanban-board {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg-canvas); /* Dark desk look */
+    /* subtle dot grid for the board background */
+    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  .ds-kanban-board-scroll {
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Smooth scrolling on touch pads */
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .ds-kanban-board-track {
+    display: flex;
+    height: 100%;
+    padding: var(--space-6);
+    gap: var(--space-6);
+    /* Ensure track expands to fit content, but at least fills the screen */
+    min-width: min-content;
+  }
+
+  /* Custom horizontal scrollbar */
+  .ds-kanban-board-scroll::-webkit-scrollbar {
+    height: 12px;
+  }
+  .ds-kanban-board-scroll::-webkit-scrollbar-thumb {
+    background: rgba(184, 115, 51, 0.2); /* Brass tinted scrollbar */
+    border-radius: var(--radius-full);
+    border: 3px solid var(--color-bg-canvas);
+  }
+  .ds-kanban-board-scroll::-webkit-scrollbar-thumb:hover {
+    background: rgba(184, 115, 51, 0.4);
+  }
+  .ds-kanban-board-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+</style>