@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/u0-primitives/tooltip/Tooltip.test.js

@@ -0,0 +1,150 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import Tooltip from './Tooltip.svelte';
+describe('Tooltip', () => {
+    afterEach(() => cleanup());
+    it('renders the trigger wrapper', async () => {
+        const { container } = render(Tooltip, {
+            props: { content: 'tip', trigger: () => 'hover me' },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        expect(wrapper).not.toBeNull();
+    });
+    it('does not show tooltip content initially', () => {
+        const { container } = render(Tooltip, {
+            props: { content: 'secret tip', trigger: () => 'hover me' },
+        });
+        expect(container.querySelector('.ds-tooltip-content')).toBeNull();
+    });
+    it('shows tooltip on mouse enter', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'hovered!', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('hides tooltip on mouse leave', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'hovered!', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).not.toBeNull();
+        await fireEvent.mouseLeave(wrapper);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).toBeNull();
+        vi.useRealTimers();
+    });
+    it('applies position class for top (default)', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'top tip', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.pos-top')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('applies position class for bottom', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'bottom tip', position: 'bottom', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.pos-bottom')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('applies position class for left', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'left tip', position: 'left', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.pos-left')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('applies position class for right', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'right tip', position: 'right', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.pos-right')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('renders string content inside tooltip inner', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'hello world', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        const inner = container.querySelector('.ds-tooltip-inner');
+        expect(inner.textContent).toBe('hello world');
+        vi.useRealTimers();
+    });
+    it('respects delayMs before showing', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'delayed', trigger: () => 'target', delayMs: 500 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.mouseEnter(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(100);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).toBeNull();
+        await vi.advanceTimersByTimeAsync(400);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('shows tooltip on focus', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Tooltip, {
+            props: { content: 'focused!', trigger: () => 'target', delayMs: 0 },
+        });
+        const wrapper = container.querySelector('.ds-tooltip-wrapper');
+        await fireEvent.focusIn(wrapper);
+        await tick();
+        await vi.advanceTimersByTimeAsync(0);
+        await tick();
+        expect(container.querySelector('.ds-tooltip-content')).not.toBeNull();
+        vi.useRealTimers();
+    });
+    it('applies custom class to wrapper', () => {
+        const { container } = render(Tooltip, {
+            props: { content: 'tip', trigger: () => 'target', class: 'my-tooltip' },
+        });
+        expect(container.querySelector('.my-tooltip')).not.toBeNull();
+    });
+});

package/dist/u0-primitives/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { Props } from './Tooltip.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/u0-primitives/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/u0-primitives/web-components/button-component.d.ts

@@ -0,0 +1,13 @@
+declare class KosButton extends HTMLElement {
+    static observedAttributes: string[];
+    private svelteRoot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    getComponentProps(): Record<string, unknown>;
+    render(): void;
+}
+export { KosButton };
+export default KosButton;
+//# sourceMappingURL=button-component.d.ts.map

package/dist/u0-primitives/web-components/button-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/button-component.ts"],"names":[],"mappings":"AAWA,cAAM,SAAU,SAAQ,WAAW;IACjC,MAAM,CAAC,kBAAkB,WAMvB;IAEF,OAAO,CAAC,UAAU,CAA4B;;IAO9C,iBAAiB;IAIjB,oBAAoB;IAOpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAwB5C,MAAM;CA4BP;AAMD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC"}

package/dist/u0-primitives/web-components/button-component.js

@@ -0,0 +1,87 @@
+/**
+ * KosButton Web Component
+ *
+ * Web Component wrapper for the KosButton Svelte component.
+ * Enables usage of KosButton in vanilla JS, React, or other frameworks.
+ *
+ * @package @kos/design-system/u0-primitives
+ */
+import { mount } from 'svelte';
+import Button from '../button/Button.svelte';
+class KosButton extends HTMLElement {
+    static observedAttributes = [
+        'disabled',
+        'loading',
+        'variant',
+        'size',
+        'children'
+    ];
+    svelteRoot = null;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        if (this.svelteRoot) {
+            this.svelteRoot.innerHTML = '';
+            this.svelteRoot = null;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+    getComponentProps() {
+        const props = {};
+        if (this.hasAttribute('disabled')) {
+            props.disabled = true;
+        }
+        if (this.hasAttribute('loading')) {
+            props.loading = true;
+        }
+        if (this.hasAttribute('variant')) {
+            props.variant = this.getAttribute('variant') ?? 'primary';
+        }
+        if (this.hasAttribute('size')) {
+            props.size = this.getAttribute('size') ?? 'md';
+        }
+        if (this.hasAttribute('children')) {
+            props.children = this.getAttribute('children');
+        }
+        return props;
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        if (this.svelteRoot) {
+            this.svelteRoot.innerHTML = '';
+        }
+        this.svelteRoot = document.createElement('div');
+        this.shadowRoot.appendChild(this.svelteRoot);
+        mount(Button, {
+            target: this.svelteRoot,
+            props: this.getComponentProps()
+        });
+        if (!this.shadowRoot.querySelector('style')) {
+            const style = document.createElement('style');
+            style.textContent = `
+        :host {
+          display: inline-block;
+          font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+        }
+        ::slotted(*) {
+        }
+      `;
+            this.shadowRoot.appendChild(style);
+        }
+    }
+}
+if (!customElements.get('kos-button')) {
+    customElements.define('kos-button', KosButton);
+}
+export { KosButton };
+export default KosButton;

package/dist/u0-primitives/web-components/input-component.d.ts

@@ -0,0 +1,13 @@
+declare class KosInput extends HTMLElement {
+    static observedAttributes: string[];
+    private svelteRoot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    getComponentProps(): Record<string, unknown>;
+    render(): void;
+}
+export { KosInput };
+export default KosInput;
+//# sourceMappingURL=input-component.d.ts.map

package/dist/u0-primitives/web-components/input-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/input-component.ts"],"names":[],"mappings":"AAWA,cAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,WAOvB;IAEF,OAAO,CAAC,UAAU,CAA4B;;IAO9C,iBAAiB;IAIjB,oBAAoB;IAOpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IA0B5C,MAAM;CA4BP;AAMD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,eAAe,QAAQ,CAAC"}

package/dist/u0-primitives/web-components/input-component.js

@@ -0,0 +1,91 @@
+/**
+ * KosInput Web Component
+ *
+ * Web Component wrapper for the KosInput Svelte component.
+ * Enables usage of KosInput in vanilla JS, React, or other frameworks.
+ *
+ * @package @kos/design-system/u0-primitives
+ */
+import { mount } from 'svelte';
+import Input from '../input/Input.svelte';
+class KosInput extends HTMLElement {
+    static observedAttributes = [
+        'type',
+        'value',
+        'placeholder',
+        'disabled',
+        'readonly',
+        'required'
+    ];
+    svelteRoot = null;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        if (this.svelteRoot) {
+            this.svelteRoot.innerHTML = '';
+            this.svelteRoot = null;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+    getComponentProps() {
+        const props = {};
+        if (this.hasAttribute('type')) {
+            props.type = this.getAttribute('type') ?? 'text';
+        }
+        if (this.hasAttribute('value')) {
+            props.value = this.getAttribute('value') ?? '';
+        }
+        if (this.hasAttribute('placeholder')) {
+            props.placeholder = this.getAttribute('placeholder') ?? '';
+        }
+        if (this.hasAttribute('disabled')) {
+            props.disabled = true;
+        }
+        if (this.hasAttribute('readonly')) {
+            props.readonly = true;
+        }
+        if (this.hasAttribute('required')) {
+            props.required = true;
+        }
+        return props;
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        if (this.svelteRoot) {
+            this.svelteRoot.innerHTML = '';
+        }
+        this.svelteRoot = document.createElement('div');
+        this.shadowRoot.appendChild(this.svelteRoot);
+        mount(Input, {
+            target: this.svelteRoot,
+            props: this.getComponentProps()
+        });
+        if (!this.shadowRoot.querySelector('style')) {
+            const style = document.createElement('style');
+            style.textContent = `
+        :host {
+          display: block;
+          font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+        }
+        ::slotted(*) {
+        }
+      `;
+            this.shadowRoot.appendChild(style);
+        }
+    }
+}
+if (!customElements.get('kos-input')) {
+    customElements.define('kos-input', KosInput);
+}
+export { KosInput };
+export default KosInput;

package/{src → dist}/v0-diagrams/DiagramPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Tabs, type Tab } from '@kos/design-system/u0-primitives';
+  import { Tabs, type Tab } from '../u0-primitives';
   import MermaidDiagram from './MermaidDiagram.svelte';
   import MarkmapDiagram from './MarkmapDiagram.svelte';
   import type { DiagramPanelItem, RenderOptions } from './types';

package/dist/v0-diagrams/DiagramPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DiagramPanelItem, RenderOptions } from './types';
+type $$ComponentProps = {
+    items: DiagramPanelItem[];
+    layout?: 'tabs' | 'grid';
+    options?: RenderOptions;
+};
+declare const DiagramPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type DiagramPanel = ReturnType<typeof DiagramPanel>;
+export default DiagramPanel;
+//# sourceMappingURL=DiagramPanel.svelte.d.ts.map

package/dist/v0-diagrams/DiagramPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/DiagramPanel.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE9D,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAoDJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/v0-diagrams/MarkmapDiagram.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramSpec, RenderOptions } from './types';
+type $$ComponentProps = {
+    spec: DiagramSpec;
+    options?: RenderOptions;
+};
+declare const MarkmapDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkmapDiagram = ReturnType<typeof MarkmapDiagram>;
+export default MarkmapDiagram;
+//# sourceMappingURL=MarkmapDiagram.svelte.d.ts.map

package/dist/v0-diagrams/MarkmapDiagram.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkmapDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/MarkmapDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAoCJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/v0-diagrams/MermaidDiagram.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DiagramSpec, RenderOptions } from './types';
+type $$ComponentProps = {
+    spec: DiagramSpec;
+    options?: RenderOptions;
+};
+declare const MermaidDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type MermaidDiagram = ReturnType<typeof MermaidDiagram>;
+export default MermaidDiagram;
+//# sourceMappingURL=MermaidDiagram.svelte.d.ts.map

package/dist/v0-diagrams/MermaidDiagram.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/MermaidDiagram.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAoCJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/{src/v0-diagrams/index.ts → dist/v0-diagrams/index.d.ts}

@@ -2,3 +2,4 @@ export type { DiagramSpec, DiagramType, DiagramProvenance, RenderOptions, Diagra
 export { default as MarkmapDiagram } from './MarkmapDiagram.svelte';
 export { default as MermaidDiagram } from './MermaidDiagram.svelte';
 export { default as DiagramPanel } from './DiagramPanel.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/v0-diagrams/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC5G,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/v0-diagrams/index.js

@@ -0,0 +1,3 @@
+export { default as MarkmapDiagram } from './MarkmapDiagram.svelte';
+export { default as MermaidDiagram } from './MermaidDiagram.svelte';
+export { default as DiagramPanel } from './DiagramPanel.svelte';

package/dist/v0-diagrams/types.d.ts

@@ -0,0 +1,25 @@
+export type DiagramType = 'mermaid' | 'markmap';
+export interface DiagramSpec {
+    type: DiagramType;
+    source: string;
+    title?: string;
+    provenance?: DiagramProvenance;
+}
+export interface DiagramProvenance {
+    sourceFile: string;
+    sourceHash: string;
+    generationSeq: number;
+    sacsRefreshSeq: number;
+}
+export interface RenderOptions {
+    theme?: 'dark' | 'light';
+    width?: number;
+    height?: number;
+    padding?: number;
+}
+export interface DiagramPanelItem {
+    id: string;
+    spec: DiagramSpec;
+    options?: RenderOptions;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/v0-diagrams/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/v0-diagrams/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}

package/dist/v0-diagrams/types.js

@@ -0,0 +1 @@
+export {};

package/dist/v0-diagrams/v0-tokens.css

@@ -0,0 +1,6 @@
+:root {
+  --v0-diagram-bg: var(--color-bg-panel);
+  --v0-diagram-border: var(--border-subtle);
+  --v0-diagram-title-color: var(--color-text-secondary);
+  --v0-diagram-padding: var(--space-4);
+}

package/{src → dist}/x0-enchanted-blocks/components/EnchantedBlock.svelte

@@ -303,7 +303,7 @@
   .enchanted-block {
     position: relative;
     background: var(--color-bg-elevated, #2a2a2a);
-    border-left: 3px solid var(--type-color, #b87333);
+    border-left: 3px solid var(--type-color, var(--color-accent));
     border-radius: var(--radius-md, 8px);
     padding: var(--space-3, 12px);
     transition: all 0.2s ease;
@@ -318,7 +318,7 @@
   
   .enchanted-block.editing {
     border-left-width: 4px;
-    box-shadow: 0 0 0 2px var(--type-color, #b87333);
+    box-shadow: 0 0 0 2px var(--type-color, var(--color-accent));
   }
   
   .enchanted-block.suggested {
@@ -329,23 +329,23 @@
   .type-badge {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    padding: 2px 8px;
-    margin-bottom: 8px;
-    background: color-mix(in hsl, var(--type-color, #b87333) 15%, transparent);
-    border: 1px solid color-mix(in hsl, var(--type-color, #b87333) 30%, transparent);
+    gap: var(--space-15);
+    padding: 2px var(--space-2);
+    margin-bottom: var(--space-2);
+    background: color-mix(in hsl, var(--type-color, var(--color-accent)) 15%, transparent);
+    border: 1px solid color-mix(in hsl, var(--type-color, var(--color-accent)) 30%, transparent);
     border-radius: var(--radius-sm, 4px);
     font-size: var(--text-xs, 11px);
     font-weight: 500;
-    color: var(--type-color, #b87333);
+    color: var(--type-color, var(--color-accent));
     cursor: pointer;
     transition: all 0.15s ease;
     user-select: none;
   }
   
   .type-badge:hover {
-    background: color-mix(in hsl, var(--type-color, #b87333) 25%, transparent);
-    border-color: color-mix(in hsl, var(--type-color, #b87333) 50%, transparent);
+    background: color-mix(in hsl, var(--type-color, var(--color-accent)) 25%, transparent);
+    border-color: color-mix(in hsl, var(--type-color, var(--color-accent)) 50%, transparent);
   }
   
   .type-badge.suggested {
@@ -396,7 +396,7 @@
     min-height: 60px;
     outline: none;
     cursor: text;
-    caret-color: var(--type-color, #b87333);
+    caret-color: var(--type-color, var(--color-accent));
   }
   
   .block-content.editable:empty::before {
@@ -420,11 +420,11 @@
     color: var(--color-text-muted, #a09880);
     display: flex;
     align-items: flex-start;
-    gap: 6px;
+    gap: var(--space-15);
   }
   
   .annotation-icon {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     flex-shrink: 0;
   }
   
@@ -449,8 +449,8 @@
   
   .expand-toggle:hover {
     background: var(--color-bg-hover, #333);
-    border-color: var(--color-accent, #b87333);
-    color: var(--color-accent, #b87333);
+    border-color: var(--color-accent, var(--color-accent));
+    color: var(--color-accent, var(--color-accent));
   }
   
   /* Footer */

package/dist/x0-enchanted-blocks/components/EnchantedBlock.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import { type BlockType, type EnchantedBlockData } from '../core/block-types.js';
+interface Props {
+    /** Block data (content, type, id) */
+    block: EnchantedBlockData;
+    /** Allow editing */
+    editable?: boolean;
+    /** Maximum width constraint */
+    maxWidth?: number;
+    /** Line height multiplier */
+    lineHeight?: number;
+    /** Show type badge */
+    showTypeBadge?: boolean;
+    /** Show annotation (if available) */
+    showAnnotation?: boolean;
+    /** Callback when content changes */
+    onContentChange?: (content: string) => void;
+    /** Callback when type changes */
+    onTypeChange?: (type: BlockType) => void;
+    /** Callback when block is focused */
+    onFocus?: () => void;
+    /** Optional footer snippet */
+    footer?: Snippet<[]>;
+}
+declare const EnchantedBlock: import("svelte").Component<Props, {}, "">;
+type EnchantedBlock = ReturnType<typeof EnchantedBlock>;
+export default EnchantedBlock;
+//# sourceMappingURL=EnchantedBlock.svelte.d.ts.map

package/dist/x0-enchanted-blocks/components/EnchantedBlock.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnchantedBlock.svelte.d.ts","sourceRoot":"","sources":["../../../src/x0-enchanted-blocks/components/EnchantedBlock.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EACH,KAAK,SAAS,EACd,KAAK,kBAAkB,EAMxB,MAAM,wBAAwB,CAAC;AAKhC,UAAU,KAAK;IACb,qCAAqC;IACrC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qCAAqC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;CACtB;AAiOH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}