@fudge-me/design-system 0.1.0

package/dist/components/Tooltip.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+  export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: string;
+    position?: TooltipPosition;
+    children?: Snippet<[{ 'aria-describedby'?: string }]>;
+  }
+
+  let { content, position = 'top', children }: Props = $props();
+
+  const tooltipId = `fds-tooltip-${Math.random().toString(36).slice(2, 9)}`;
+  let visible = $state(false);
+
+  function show() { visible = true; }
+  function hide() { visible = false; }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="fds-tooltip-wrapper"
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
+>
+  {#if children}
+    {@render children({ 'aria-describedby': visible ? tooltipId : undefined })}
+  {/if}
+  {#if visible}
+    <div
+      class="fds-tooltip fds-tooltip--{position}"
+      id={tooltipId}
+      role="tooltip"
+    >
+      {content}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fds-tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .fds-tooltip {
+    position: absolute;
+    font-family: var(--fds-tooltip-font-family);
+    font-size: var(--fds-tooltip-font-size);
+    padding: var(--fds-tooltip-padding-y) var(--fds-tooltip-padding-x);
+    background: var(--fds-tooltip-bg);
+    color: var(--fds-tooltip-text);
+    border-radius: var(--fds-tooltip-radius);
+    box-shadow: var(--fds-tooltip-shadow);
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .fds-tooltip--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 4px;
+  }
+
+  .fds-tooltip--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 4px;
+  }
+
+  .fds-tooltip--left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 4px;
+  }
+
+  .fds-tooltip--right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 4px;
+  }
+</style>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,12 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+import type { Snippet } from 'svelte';
+interface Props {
+    content: string;
+    position?: TooltipPosition;
+    children?: Snippet<[{
+        'aria-describedby'?: string;
+    }]>;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Button } from "./Button.svelte";
+export type { ButtonVariant, ButtonSize } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";
+export type { TooltipPosition } from "./Tooltip.svelte";
+export { default as Modal } from "./Modal.svelte";
+export { default as CommandPalette } from "./CommandPalette.svelte";
+export type { CommandPaletteItem } from "./CommandPalette.svelte";

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";
+export { default as Modal } from "./Modal.svelte";
+export { default as CommandPalette } from "./CommandPalette.svelte";

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./themes/index.js";
+export * from "./layout/index.js";
+export * from "./components/index.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./themes/index.js";
+export * from "./layout/index.js";
+export * from "./components/index.js";

package/dist/layout/AIPanel.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Panel from './Panel.svelte';
+
+  interface Props {
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+  }
+
+  let {
+    collapsed = $bindable(false),
+    width = $bindable(280),
+    minWidth = 200,
+    maxWidth = 480,
+    children,
+  }: Props = $props();
+</script>
+
+<aside class="fds-aipanel" aria-label="AI Panel">
+  <Panel side="right" bind:collapsed bind:width {minWidth} {maxWidth}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Panel>
+</aside>
+
+<style>
+  .fds-aipanel {
+    display: contents;
+  }
+</style>

package/dist/layout/AIPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+}
+declare const AIPanel: import("svelte").Component<Props, {}, "collapsed" | "width">;
+type AIPanel = ReturnType<typeof AIPanel>;
+export default AIPanel;

package/dist/layout/AppShell.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    commandbar?: Snippet;
+    sidebar?: Snippet;
+    canvas?: Snippet;
+    aipanel?: Snippet;
+    statusbar?: Snippet;
+  }
+
+  let { commandbar, sidebar, canvas, aipanel, statusbar }: Props = $props();
+</script>
+
+<div class="fds-appshell">
+  <div class="fds-appshell__commandbar">
+    {#if commandbar}
+      {@render commandbar()}
+    {/if}
+  </div>
+  <div class="fds-appshell__sidebar">
+    {#if sidebar}
+      {@render sidebar()}
+    {/if}
+  </div>
+  <div class="fds-appshell__canvas">
+    {#if canvas}
+      {@render canvas()}
+    {/if}
+  </div>
+  <div class="fds-appshell__aipanel">
+    {#if aipanel}
+      {@render aipanel()}
+    {/if}
+  </div>
+  <div class="fds-appshell__statusbar">
+    {#if statusbar}
+      {@render statusbar()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .fds-appshell {
+    display: grid;
+    grid-template-areas:
+      'commandbar commandbar commandbar'
+      'sidebar    canvas     aipanel'
+      'statusbar  statusbar  statusbar';
+    grid-template-rows: var(--fds-appshell-commandbar-height) 1fr var(--fds-appshell-statusbar-height);
+    grid-template-columns: auto 1fr auto;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    background: var(--fds-appshell-bg);
+  }
+
+  .fds-appshell__commandbar {
+    grid-area: commandbar;
+  }
+
+  .fds-appshell__sidebar {
+    grid-area: sidebar;
+  }
+
+  .fds-appshell__canvas {
+    grid-area: canvas;
+    min-width: 0;
+  }
+
+  .fds-appshell__aipanel {
+    grid-area: aipanel;
+  }
+
+  .fds-appshell__statusbar {
+    grid-area: statusbar;
+  }
+</style>

package/dist/layout/AppShell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    commandbar?: Snippet;
+    sidebar?: Snippet;
+    canvas?: Snippet;
+    aipanel?: Snippet;
+    statusbar?: Snippet;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/layout/Canvas.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<main class="fds-canvas">
+  {#if children}
+    {@render children()}
+  {/if}
+</main>
+
+<style>
+  .fds-canvas {
+    overflow: auto;
+    background: var(--fds-canvas-bg);
+  }
+</style>

package/dist/layout/Canvas.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const Canvas: import("svelte").Component<Props, {}, "">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

package/dist/layout/CommandBar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<header class="fds-commandbar">
+  {#if children}
+    {@render children()}
+  {/if}
+</header>
+
+<style>
+  .fds-commandbar {
+    display: flex;
+    align-items: center;
+    padding: var(--fds-commandbar-padding);
+    background: var(--fds-commandbar-bg);
+    border-bottom: 1px solid var(--fds-commandbar-border-color);
+  }
+</style>

package/dist/layout/CommandBar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const CommandBar: import("svelte").Component<Props, {}, "">;
+type CommandBar = ReturnType<typeof CommandBar>;
+export default CommandBar;

package/dist/layout/Panel.svelte

@@ -0,0 +1,157 @@
+<script lang="ts" module>
+  export type PanelSide = 'left' | 'right';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    side?: PanelSide;
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+  }
+
+  let {
+    side = 'left',
+    collapsed = $bindable(false),
+    width = $bindable(280),
+    minWidth = 200,
+    maxWidth = 480,
+    children,
+  }: Props = $props();
+
+  let resizing = $state(false);
+  let startX = 0;
+  let startWidth = 0;
+
+  function onPointerDown(e: PointerEvent) {
+    const handle = e.currentTarget as HTMLElement;
+    handle.setPointerCapture(e.pointerId);
+    resizing = true;
+    startX = e.clientX;
+    startWidth = width;
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!resizing) return;
+    const delta = side === 'left' ? e.clientX - startX : startX - e.clientX;
+    width = Math.min(maxWidth, Math.max(minWidth, startWidth + delta));
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    if (!resizing) return;
+    const handle = e.currentTarget as HTMLElement;
+    handle.releasePointerCapture(e.pointerId);
+    resizing = false;
+    document.body.style.userSelect = '';
+    document.body.style.cursor = '';
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    const step = 10;
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      width = Math.max(minWidth, width - step);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      width = Math.min(maxWidth, width + step);
+    }
+  }
+</script>
+
+<div
+  class="fds-panel fds-panel--{side}"
+  class:fds-panel--collapsed={collapsed}
+  style:width="{collapsed ? 0 : width}px"
+>
+  <div class="fds-panel__content" aria-hidden={collapsed}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+  <div
+    class="fds-panel__handle"
+    role="separator"
+    aria-orientation="vertical"
+    aria-valuenow={width}
+    aria-valuemin={minWidth}
+    aria-valuemax={maxWidth}
+    tabindex="0"
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onlostpointercapture={onPointerUp}
+    onkeydown={onKeyDown}
+  ></div>
+</div>
+
+<style>
+  .fds-panel {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    background: var(--fds-panel-bg);
+    overflow: hidden;
+    transition: width 0.2s ease; /* TODO(v0.2): migrate to motion tokens */
+    flex-shrink: 0;
+  }
+
+  .fds-panel--collapsed {
+    width: 0 !important;
+  }
+
+  .fds-panel__content {
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .fds-panel__handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--fds-panel-handle-width);
+    background: var(--fds-panel-handle-color);
+    cursor: col-resize;
+    z-index: 1;
+    flex-shrink: 0;
+    touch-action: none;
+  }
+
+  .fds-panel__handle:hover {
+    background: var(--fds-panel-handle-color-hover);
+  }
+
+  .fds-panel__handle:active {
+    background: var(--fds-panel-handle-color-active);
+  }
+
+  .fds-panel__handle:focus-visible {
+    outline: 2px solid var(--fds-color-border-focus, currentColor);
+    outline-offset: -2px;
+  }
+
+  /* Left panel: handle on right edge */
+  .fds-panel--left .fds-panel__handle {
+    right: 0;
+  }
+
+  /* Right panel: handle on left edge */
+  .fds-panel--right .fds-panel__handle {
+    left: 0;
+  }
+
+  .fds-panel--right {
+    border-left: 1px solid var(--fds-panel-border-color);
+  }
+
+  .fds-panel--left {
+    border-right: 1px solid var(--fds-panel-border-color);
+  }
+</style>

package/dist/layout/Panel.svelte.d.ts

@@ -0,0 +1,13 @@
+export type PanelSide = 'left' | 'right';
+import type { Snippet } from 'svelte';
+interface Props {
+    side?: PanelSide;
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+}
+declare const Panel: import("svelte").Component<Props, {}, "collapsed" | "width">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/layout/Sidebar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Panel from './Panel.svelte';
+
+  interface Props {
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+  }
+
+  let {
+    collapsed = $bindable(false),
+    width = $bindable(280),
+    minWidth = 200,
+    maxWidth = 480,
+    children,
+  }: Props = $props();
+</script>
+
+<nav class="fds-sidebar" aria-label="Sidebar">
+  <Panel side="left" bind:collapsed bind:width {minWidth} {maxWidth}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Panel>
+</nav>
+
+<style>
+  .fds-sidebar {
+    display: contents;
+  }
+</style>

package/dist/layout/Sidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    collapsed?: boolean;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "collapsed" | "width">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/layout/StatusBar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<footer class="fds-statusbar">
+  {#if children}
+    {@render children()}
+  {/if}
+</footer>
+
+<style>
+  .fds-statusbar {
+    display: flex;
+    align-items: center;
+    padding: var(--fds-statusbar-padding);
+    background: var(--fds-statusbar-bg);
+    border-top: 1px solid var(--fds-statusbar-border-color);
+    font-size: var(--fds-font-label-size, 0.75rem);
+  }
+</style>

package/dist/layout/StatusBar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const StatusBar: import("svelte").Component<Props, {}, "">;
+type StatusBar = ReturnType<typeof StatusBar>;
+export default StatusBar;

package/dist/layout/__tests__/helpers.js

@@ -0,0 +1,53 @@
+import { createRawSnippet } from "svelte";
+import { tick } from "svelte";
+import { expect } from "vitest";
+/**
+ * Creates a Svelte 5 snippet that renders a text node.
+ * Use for slot content in component tests.
+ */
+export function textSnippet(text) {
+    return createRawSnippet(() => ({
+        render: () => `<span>${text}</span>`,
+    }));
+}
+/**
+ * Asserts WAI-ARIA separator attributes on an element.
+ */
+export function assertSeparator(el, { now, min, max }) {
+    expect(el.getAttribute("role")).toBe("separator");
+    expect(el.getAttribute("aria-orientation")).toBe("vertical");
+    expect(el.getAttribute("aria-valuenow")).toBe(String(now));
+    expect(el.getAttribute("aria-valuemin")).toBe(String(min));
+    expect(el.getAttribute("aria-valuemax")).toBe(String(max));
+    expect(el.getAttribute("tabindex")).toBe("0");
+}
+/**
+ * Fires a keyDown event for an arrow key and flushes Svelte state.
+ */
+export async function pressArrow(el, key) {
+    el.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+    await tick();
+}
+/**
+ * Asserts a landmark element exists with the expected aria-label.
+ */
+export function assertLandmark(container, tag, label) {
+    const el = container.querySelector(tag);
+    expect(el, `expected <${tag}> element`).not.toBeNull();
+    expect(el.getAttribute("aria-label")).toBe(label);
+}
+/**
+ * Asserts a zone element exists with the expected tag and CSS class.
+ */
+export function assertZone(container, tag, className) {
+    const el = container.querySelector(`${tag}.${className}`);
+    expect(el, `expected <${tag}> with class .${className}`).not.toBeNull();
+}
+/**
+ * Queries the separator element within a container. Throws if not found.
+ */
+export function getSeparator(container) {
+    const el = container.querySelector('[role="separator"]');
+    expect(el, "expected [role=separator] element").not.toBeNull();
+    return el;
+}

package/dist/layout/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Panel } from "./Panel.svelte";
+export type { PanelSide } from "./Panel.svelte";
+export { default as AppShell } from "./AppShell.svelte";
+export { default as CommandBar } from "./CommandBar.svelte";
+export { default as Canvas } from "./Canvas.svelte";
+export { default as StatusBar } from "./StatusBar.svelte";
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as AIPanel } from "./AIPanel.svelte";

package/dist/layout/index.js

@@ -0,0 +1,7 @@
+export { default as Panel } from "./Panel.svelte";
+export { default as AppShell } from "./AppShell.svelte";
+export { default as CommandBar } from "./CommandBar.svelte";
+export { default as Canvas } from "./Canvas.svelte";
+export { default as StatusBar } from "./StatusBar.svelte";
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as AIPanel } from "./AIPanel.svelte";