@stephen-netu/design-system 0.2.2 → 0.5.1

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

@@ -1,12 +1,16 @@
+import type { Props as ButtonProps } from '../button/Button.svelte';
 declare class KosButton extends HTMLElement {
     static observedAttributes: string[];
     private svelteRoot;
+    private svelteComponent;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getComponentProps(): Record<string, unknown>;
+    getComponentProps(): ButtonProps;
     render(): void;
+    destroy(): void;
+    private ensureHostStyle;
 }
 export { KosButton };
 export default KosButton;

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

@@ -1 +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"}
+{"version":3,"file":"button-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/button-component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAWpE,cAAM,SAAU,SAAQ,WAAW;IACjC,MAAM,CAAC,kBAAkB,WAUvB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAAwC;;IAO/D,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,WAAW;IAyChC,MAAM;IAaN,OAAO;IAWP,OAAO,CAAC,eAAe;CAYxB;AAuBD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC"}

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

@@ -1,22 +1,22 @@
-/**
- * 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 { createRawSnippet, mount, unmount } from 'svelte';
 import Button from '../button/Button.svelte';
+const variants = ['primary', 'secondary', 'ghost', 'danger'];
+const sizes = ['sm', 'md', 'lg'];
+const types = ['button', 'submit', 'reset'];
 class KosButton extends HTMLElement {
     static observedAttributes = [
         'disabled',
         'loading',
         'variant',
         'size',
+        'type',
+        'class',
+        'aria-label',
+        'aria-expanded',
         'children'
     ];
     svelteRoot = null;
+    svelteComponent = null;
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -25,10 +25,7 @@ class KosButton extends HTMLElement {
         this.render();
     }
     disconnectedCallback() {
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-            this.svelteRoot = null;
-        }
+        this.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
@@ -37,48 +34,90 @@ class KosButton extends HTMLElement {
     }
     getComponentProps() {
         const props = {};
+        const variant = this.getAttribute('variant');
+        const size = this.getAttribute('size');
+        const type = this.getAttribute('type');
+        const className = this.getAttribute('class');
+        const ariaLabel = this.getAttribute('aria-label');
+        const ariaExpanded = this.getAttribute('aria-expanded');
+        const children = this.getAttribute('children');
         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 (variant) {
+            props.variant = readOption(variant, variants, 'primary');
+        }
+        if (size) {
+            props.size = readOption(size, sizes, 'md');
+        }
+        if (type) {
+            props.type = readOption(type, types, 'button');
         }
-        if (this.hasAttribute('size')) {
-            props.size = this.getAttribute('size') ?? 'md';
+        if (className) {
+            props.class = className;
         }
-        if (this.hasAttribute('children')) {
-            props.children = this.getAttribute('children');
+        if (ariaLabel) {
+            props['aria-label'] = ariaLabel;
+        }
+        if (ariaExpanded !== null) {
+            props['aria-expanded'] = ariaExpanded !== 'false';
+        }
+        if (children !== null) {
+            props.children = createTextSnippet(children);
         }
         return props;
     }
     render() {
         if (!this.shadowRoot)
             return;
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-        }
+        this.destroy();
         this.svelteRoot = document.createElement('div');
         this.shadowRoot.appendChild(this.svelteRoot);
-        mount(Button, {
+        this.svelteComponent = 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.ensureHostStyle();
+    }
+    destroy() {
+        if (this.svelteComponent) {
+            void unmount(this.svelteComponent);
+            this.svelteComponent = null;
         }
-      `;
-            this.shadowRoot.appendChild(style);
+        if (this.svelteRoot) {
+            this.svelteRoot.remove();
+            this.svelteRoot = null;
         }
     }
+    ensureHostStyle() {
+        if (!this.shadowRoot || this.shadowRoot.querySelector('style'))
+            return;
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: inline-block;
+        font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+      }
+    `;
+        this.shadowRoot.appendChild(style);
+    }
+}
+function readOption(value, options, fallback) {
+    return options.includes(value) ? value : fallback;
+}
+function createTextSnippet(value) {
+    return createRawSnippet(() => ({
+        render: () => `<span>${escapeHtml(value)}</span>`
+    }));
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
 }
 if (!customElements.get('kos-button')) {
     customElements.define('kos-button', KosButton);

package/dist/u0-primitives/web-components/index.d.ts

@@ -0,0 +1,3 @@
+export { KosButton } from './button-component';
+export { KosInput } from './input-component';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/u0-primitives/web-components/index.js

@@ -0,0 +1,2 @@
+export { KosButton } from './button-component';
+export { KosInput } from './input-component';

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

@@ -1,12 +1,16 @@
+import type { Props as InputProps } from '../input/Input.svelte';
 declare class KosInput extends HTMLElement {
     static observedAttributes: string[];
     private svelteRoot;
+    private svelteComponent;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getComponentProps(): Record<string, unknown>;
+    getComponentProps(): InputProps;
     render(): void;
+    destroy(): void;
+    private ensureHostStyle;
 }
 export { KosInput };
 export default KosInput;

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

@@ -1 +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"}
+{"version":3,"file":"input-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/input-component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOjE,cAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,WASvB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAAwC;;IAO/D,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,UAAU;IAqC/B,MAAM;IAaN,OAAO;IAWP,OAAO,CAAC,eAAe;CAYxB;AAUD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,eAAe,QAAQ,CAAC"}

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

@@ -1,23 +1,19 @@
-/**
- * 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 { mount, unmount } from 'svelte';
 import Input from '../input/Input.svelte';
+const types = ['text', 'search', 'password', 'email', 'url'];
 class KosInput extends HTMLElement {
     static observedAttributes = [
         'type',
         'value',
         'placeholder',
         'disabled',
-        'readonly',
-        'required'
+        'error',
+        'class',
+        'id',
+        'name'
     ];
     svelteRoot = null;
+    svelteComponent = null;
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -26,10 +22,7 @@ class KosInput extends HTMLElement {
         this.render();
     }
     disconnectedCallback() {
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-            this.svelteRoot = null;
-        }
+        this.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
@@ -38,51 +31,75 @@ class KosInput extends HTMLElement {
     }
     getComponentProps() {
         const props = {};
-        if (this.hasAttribute('type')) {
-            props.type = this.getAttribute('type') ?? 'text';
+        const type = this.getAttribute('type');
+        const value = this.getAttribute('value');
+        const placeholder = this.getAttribute('placeholder');
+        const className = this.getAttribute('class');
+        const id = this.getAttribute('id');
+        const name = this.getAttribute('name');
+        if (type) {
+            props.type = readOption(type, types, 'text');
         }
-        if (this.hasAttribute('value')) {
-            props.value = this.getAttribute('value') ?? '';
+        if (value !== null) {
+            props.value = value;
         }
-        if (this.hasAttribute('placeholder')) {
-            props.placeholder = this.getAttribute('placeholder') ?? '';
+        if (placeholder !== null) {
+            props.placeholder = placeholder;
         }
         if (this.hasAttribute('disabled')) {
             props.disabled = true;
         }
-        if (this.hasAttribute('readonly')) {
-            props.readonly = true;
+        if (this.hasAttribute('error')) {
+            props.error = true;
+        }
+        if (className) {
+            props.class = className;
         }
-        if (this.hasAttribute('required')) {
-            props.required = true;
+        if (id) {
+            props.id = id;
+        }
+        if (name) {
+            props.name = name;
         }
         return props;
     }
     render() {
         if (!this.shadowRoot)
             return;
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-        }
+        this.destroy();
         this.svelteRoot = document.createElement('div');
         this.shadowRoot.appendChild(this.svelteRoot);
-        mount(Input, {
+        this.svelteComponent = 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.ensureHostStyle();
+    }
+    destroy() {
+        if (this.svelteComponent) {
+            void unmount(this.svelteComponent);
+            this.svelteComponent = null;
         }
-      `;
-            this.shadowRoot.appendChild(style);
+        if (this.svelteRoot) {
+            this.svelteRoot.remove();
+            this.svelteRoot = null;
         }
     }
+    ensureHostStyle() {
+        if (!this.shadowRoot || this.shadowRoot.querySelector('style'))
+            return;
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+        font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+      }
+    `;
+        this.shadowRoot.appendChild(style);
+    }
+}
+function readOption(value, options, fallback) {
+    return options.includes(value) ? value : fallback;
 }
 if (!customElements.get('kos-input')) {
     customElements.define('kos-input', KosInput);

package/dist/u0-primitives/web-components/web-components.test.js

@@ -0,0 +1,96 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { KosButton } from './button-component';
+import { KosInput } from './input-component';
+describe('u0-primitives/web-components', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('defines and renders the kos-button custom element', () => {
+        const element = createButton({
+            variant: 'danger',
+            size: 'lg',
+            type: 'submit',
+            class: 'custom-button',
+            'aria-label': 'Submit form',
+            'aria-expanded': 'true',
+            children: 'Save'
+        });
+        const button = element.shadowRoot?.querySelector('button');
+        expect(customElements.get('kos-button')).toBe(KosButton);
+        expect(button).not.toBeNull();
+        expect(button?.getAttribute('type')).toBe('submit');
+        expect(button?.getAttribute('aria-label')).toBe('Submit form');
+        expect(button?.getAttribute('aria-expanded')).toBe('true');
+        expect(button?.classList.contains('variant-danger')).toBe(true);
+        expect(button?.classList.contains('size-lg')).toBe(true);
+        expect(button?.classList.contains('custom-button')).toBe(true);
+        expect(button?.textContent?.trim()).toBe('Save');
+    });
+    it('updates the kos-button when attributes change', () => {
+        const element = createButton();
+        const button = element.shadowRoot?.querySelector('button');
+        expect(button?.hasAttribute('disabled')).toBe(false);
+        element.setAttribute('loading', '');
+        const updatedButton = element.shadowRoot?.querySelector('button');
+        expect(updatedButton?.hasAttribute('disabled')).toBe(true);
+        expect(updatedButton?.classList.contains('is-loading')).toBe(true);
+    });
+    it('falls back to safe button defaults for invalid attributes', () => {
+        const element = createButton({
+            variant: 'invalid',
+            size: 'invalid',
+            type: 'invalid'
+        });
+        const button = element.shadowRoot?.querySelector('button');
+        expect(button?.classList.contains('variant-primary')).toBe(true);
+        expect(button?.classList.contains('size-md')).toBe(true);
+        expect(button?.getAttribute('type')).toBe('button');
+    });
+    it('defines and renders the kos-input custom element', () => {
+        const element = createInput({
+            type: 'search',
+            value: 'needle',
+            placeholder: 'Search',
+            disabled: '',
+            error: '',
+            class: 'custom-input',
+            id: 'search-box',
+            name: 'q'
+        });
+        const input = element.shadowRoot?.querySelector('input');
+        expect(customElements.get('kos-input')).toBe(KosInput);
+        expect(input).not.toBeNull();
+        expect(input?.getAttribute('type')).toBe('search');
+        expect(input.value).toBe('needle');
+        expect(input?.getAttribute('placeholder')).toBe('Search');
+        expect(input?.getAttribute('id')).toBe('search-box');
+        expect(input?.getAttribute('name')).toBe('q');
+        expect(input?.hasAttribute('disabled')).toBe(true);
+        expect(input?.getAttribute('aria-invalid')).toBe('true');
+        expect(element.shadowRoot?.querySelector('.custom-input')).not.toBeNull();
+    });
+    it('updates the kos-input when attributes change', () => {
+        const element = createInput({ type: 'text' });
+        expect(element.shadowRoot?.querySelector('input')?.getAttribute('type')).toBe('text');
+        element.setAttribute('type', 'password');
+        const input = element.shadowRoot?.querySelector('input');
+        expect(input?.getAttribute('type')).toBe('password');
+    });
+    it('falls back to safe input defaults for invalid attributes', () => {
+        const element = createInput({ type: 'tel' });
+        const input = element.shadowRoot?.querySelector('input');
+        expect(input?.getAttribute('type')).toBe('text');
+    });
+});
+function createButton(attributes = {}) {
+    const element = document.createElement('kos-button');
+    Object.entries(attributes).forEach(([name, value]) => element.setAttribute(name, value));
+    document.body.appendChild(element);
+    return element;
+}
+function createInput(attributes) {
+    const element = document.createElement('kos-input');
+    Object.entries(attributes).forEach(([name, value]) => element.setAttribute(name, value));
+    document.body.appendChild(element);
+    return element;
+}

package/dist/u0-primitives/window-frame/WindowFrame.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div class="ds-window-frame {className}">
+  <div class="ds-window-frame-header">
+    <div class="ds-window-frame-dots">
+      <span class="dot dot-close"></span>
+      <span class="dot dot-minimize"></span>
+      <span class="dot dot-expand"></span>
+    </div>
+    {#if title}
+      <span class="ds-window-frame-title">{title}</span>
+    {/if}
+  </div>
+
+  {#if children}
+    <div class="ds-window-frame-body">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-window-frame {
+    display: flex;
+    flex-direction: column;
+    border: var(--border-width-thin) solid var(--border-default);
+    background: var(--color-card-bg);
+    overflow: hidden;
+  }
+
+  .ds-window-frame-header {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-pad-x);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    background: var(--color-bg-panel);
+    border-bottom: var(--border-width-thin) solid var(--border-default);
+  }
+
+  .ds-window-frame-dots {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius-full);
+  }
+
+  .dot-close { background: var(--color-error); }
+  .dot-minimize { background: var(--color-warning); }
+  .dot-expand { background: var(--color-success); }
+
+  .ds-window-frame-title {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ds-window-frame-body {
+    padding: var(--ui-pad-x);
+    font-family: var(--font-mono);
+    color: var(--color-text-secondary);
+  }
+</style>

package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const WindowFrame: import("svelte").Component<Props, {}, "">;
+type WindowFrame = ReturnType<typeof WindowFrame>;
+export default WindowFrame;
+//# sourceMappingURL=WindowFrame.svelte.d.ts.map

package/dist/u0-primitives/window-frame/WindowFrame.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowFrame.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/window-frame/WindowFrame.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/u0-primitives/window-frame/WindowFrame.test.js

@@ -0,0 +1,31 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import WindowFrame from './WindowFrame.svelte';
+const textSnippet = (text) => createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+describe('WindowFrame', () => {
+    afterEach(() => cleanup());
+    it('renders three chrome dots', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelectorAll('.dot')).toHaveLength(3);
+    });
+    it('renders the title when provided', () => {
+        const { getByText } = render(WindowFrame, { title: 'PROPERTY SEARCH' });
+        expect(getByText('PROPERTY SEARCH')).toBeDefined();
+    });
+    it('omits the title element when not provided', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelector('.ds-window-frame-title')).toBeNull();
+    });
+    it('renders slotted children in the body', () => {
+        const { container, getByText } = render(WindowFrame, {
+            children: textSnippet('Body content')
+        });
+        expect(container.querySelector('.ds-window-frame-body')).not.toBeNull();
+        expect(getByText('Body content')).toBeDefined();
+    });
+    it('omits the body element when no children given', () => {
+        const { container } = render(WindowFrame);
+        expect(container.querySelector('.ds-window-frame-body')).toBeNull();
+    });
+});

package/dist/u0-primitives/window-frame/index.d.ts

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

package/dist/u0-primitives/window-frame/index.d.ts.map

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

package/dist/u0-primitives/window-frame/index.js

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

package/dist/x0-enchanted-blocks/components/NodepadBlock.svelte

@@ -85,10 +85,19 @@
   }
   
   function handleKeydown(e: KeyboardEvent) {
-    // Tab inserts spaces
+    // Tab inserts two spaces via Selection/Range (no deprecated execCommand)
     if (e.key === 'Tab') {
       e.preventDefault();
-      document.execCommand('insertText', false, '  ');
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode('  '));
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        handleInput();
+      }
     }
   }
 </script>

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

@@ -1 +1 @@
-{"version":3,"file":"NodepadBlock.svelte.d.ts","sourceRoot":"","sources":["../../../src/x0-enchanted-blocks/components/NodepadBlock.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EACH,KAAK,SAAS,EACd,KAAK,kBAAkB,EAIxB,MAAM,wBAAwB,CAAC;AAGhC,UAAU,KAAK;IACb,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAqHH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NodepadBlock.svelte.d.ts","sourceRoot":"","sources":["../../../src/x0-enchanted-blocks/components/NodepadBlock.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EACH,KAAK,SAAS,EACd,KAAK,kBAAkB,EAIxB,MAAM,wBAAwB,CAAC;AAGhC,UAAU,KAAK;IACb,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AA8HH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}