@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.100

package/generated/morphdom/index.d.ts

@@ -0,0 +1,8 @@
+export { default as morph } from './morph';
+export * from './morph';
+export { default as queryMorph } from './query-morph';
+export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/index.js

@@ -0,0 +1,8 @@
+export { default as morph } from './morph';
+export * from './morph';
+export { default as queryMorph } from './query-morph';
+export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/morph.d.ts

@@ -0,0 +1,4 @@
+import type { TemplateResult } from '../tpl';
+export default function (markup: TemplateResult, fromEl?: Element, options?: {
+    cb: () => void;
+}): void;

package/generated/morphdom/morph.js

@@ -0,0 +1,10 @@
+import morphdom from '../internal/vendor/morphdom';
+import renderToString from './render-to-string';
+export default function (markup, fromEl, options) {
+    if (!fromEl)
+        return;
+    morphdom(fromEl, renderToString(markup).toString(), {
+        onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
+        onBeforeElChildrenUpdated: (fromEl, toEl) => !toEl.matches('image-view,navigation-title'), // NOTE: image-view will alter it's contents! This is required to not empty it up again!
+    });
+}

package/generated/morphdom/query-morph.d.ts

@@ -0,0 +1,5 @@
+import type { TemplateResult } from '../tpl';
+export default function (scopedSelector: string, template: TemplateResult, container?: Element, options?: {
+    cb?: () => boolean;
+    removeIf?: boolean;
+}): void;

package/generated/morphdom/query-morph.js

@@ -0,0 +1,12 @@
+import { $ } from '../internal/utils';
+import morph from './morph';
+export default function (scopedSelector, template, container, options) {
+    if (false === options?.cb?.())
+        return;
+    if ('boolean' === typeof options?.removeIf && options?.removeIf)
+        return container?.querySelector(`:scope>${scopedSelector}`)?.remove();
+    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template, '>1'));
+    if (!fromEl)
+        return;
+    morph(template, fromEl);
+}

package/generated/morphdom/render-to-string.d.ts

@@ -0,0 +1,12 @@
+import { type TemplateResult } from '../tpl';
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template: TemplateResult): TrustedMarkup;

package/generated/morphdom/render-to-string.js

@@ -0,0 +1,48 @@
+import { isTemplateResult } from '../tpl';
+// morph.ts and queryMorph.ts only need something with `.toString()` that
+// yields a safe, escaped HTML string — this is that, built on top of the
+// same TemplateResult instead of a separate tag function.
+// values built via `raw` itself are trusted markup; wrap them so `stringify`
+// knows to skip escaping — same idea as lit-html's `unsafeHTML`
+export class TrustedMarkup {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+function stringifyValue(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (isTemplateResult(value))
+        return renderToString(value).value;
+    if (Array.isArray(value))
+        return value.map(stringifyValue).join('');
+    return escapeHtml(String(value));
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template) {
+    let out = template.strings[0];
+    for (let i = 0; i < template.values.length; i++) {
+        out += stringifyValue(template.values[i]) + template.strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/unsafe-html.d.ts

@@ -0,0 +1,2 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value: string): TrustedMarkup;

package/generated/morphdom/unsafe-html.js

@@ -0,0 +1,4 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value) {
+    return new TrustedMarkup(value);
+}

package/generated/namespace-browser/base.d.ts

@@ -0,0 +1,45 @@
+export declare abstract class DialogBase extends HTMLDialogElement {
+    static polyfillExtends: "dialog";
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+export declare abstract class InputBase extends HTMLInputElement {
+    static polyfillExtends: "input";
+    static polyfillConnectedCallback(el: HTMLInputElement): void;
+    static polyfillDisconnectedCallback(el: HTMLInputElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+export declare abstract class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends: "button";
+    static polyfillConnectedCallback(el: HTMLButtonElement): void;
+    static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+export declare abstract class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends: "details";
+    static polyfillConnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+export declare abstract class FormBase extends HTMLFormElement {
+    static polyfillExtends: "form";
+    static polyfillConnectedCallback(el: HTMLFormElement): void;
+    static polyfillDisconnectedCallback(el: HTMLFormElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/namespace-browser/base.js

@@ -0,0 +1,115 @@
+export class DialogBase extends HTMLDialogElement {
+    static polyfillExtends = 'dialog';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+}
+export class InputBase extends HTMLInputElement {
+    static polyfillExtends = 'input';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+}

package/generated/namespace-browser/event.d.ts

@@ -0,0 +1,10 @@
+export interface TypedEventTargetMethods<M> {
+    addEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | AddEventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    };
+    removeEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | EventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    };
+}

package/generated/namespace-browser/event.js

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

package/generated/namespace-browser/index.d.ts

@@ -0,0 +1,7 @@
+export type WebComponentCtor = typeof HTMLElement & {
+    observedAttributes?: string[];
+    polyfillExtends?: string;
+    polyfillConnectedCallback(el: HTMLElement): void;
+    polyfillDisconnectedCallback(el: HTMLElement): void;
+    polyfillAttributeChangedCallback?(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+};

package/generated/namespace-browser/index.js

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

package/generated/snapshot/index.d.ts

@@ -0,0 +1,9 @@
+export declare class Snapshot {
+    #private;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
+    static readonly waitReady: Promise<[void, void]>;
+    static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
+    static get config(): Record<string, string> | undefined;
+    static setOwnConfig(): Promise<void>;
+}

package/generated/snapshot/index.js

@@ -0,0 +1,60 @@
+import { devFlags, onoff } from '../internal/utils';
+export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
+    static waitReady = Promise.all([
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', () => r(), { once: true })),
+        (async () => {
+            if (!this.#readyCalled)
+                await this.setOwnConfig();
+        })(), // Lazy config read promise, triggered on first access
+    ]);
+    static async waitReadyFor(element) {
+        if (!element.isConnected)
+            return null;
+        await this.waitReady;
+        return element.isConnected ? element : null;
+    }
+    static get config() {
+        return this.#config;
+    }
+    static async setOwnConfig() {
+        if (!this.#readyCalled)
+            this.#readyCalled = true;
+        if ('complete' !== document.readyState)
+            await new Promise((r) => self.addEventListener('load', r, { once: true }));
+        this.#getOwnConfig();
+    }
+    static #getOwnConfig() {
+        const style = self.getComputedStyle(document.documentElement, '::before'), content = style.getPropertyValue('content'), unquoted = content.replace(/^"(.*)"$/, '$1'); // Remove quotes around the content
+        try {
+            this.#config = Object.fromEntries(new URLSearchParams(unquoted).entries()); // {"none": ""}
+        }
+        catch {
+            console.error('could-not-parse-config');
+        }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
+        if (devFlags.debug)
+            console.debug(this.#config);
+    }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        if (devFlags.debug)
+            console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
+}

package/generated/tpl/html.d.ts

@@ -0,0 +1,5 @@
+export interface TemplateResult {
+    strings: TemplateStringsArray;
+    values: unknown[];
+}
+export default function (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult;

package/generated/tpl/html.js

@@ -0,0 +1,7 @@
+// Purely structural — captures strings/values as-is. render.ts relies on
+// `strings` identity (TemplateStringsArray) for its template cache, so this
+// must stay exactly this shape: no wrapping, no cloning, no new object
+// allocation beyond the literal { strings, values }.
+export default function (strings, ...values) {
+    return { strings, values };
+}

package/generated/tpl/index.d.ts

@@ -0,0 +1,6 @@
+export { default as html } from './html';
+export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/index.js

@@ -0,0 +1,6 @@
+export { default as html } from './html';
+export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/is-template-result.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateResult } from './html';
+declare const _default: (v: unknown) => v is TemplateResult;
+export default _default;

package/generated/tpl/is-template-result.js

@@ -0,0 +1 @@
+export default (v) => !!v && typeof v === 'object' && 'strings' in v && 'values' in v;

package/generated/tpl/render.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateResult } from './html';
+export default function (result: TemplateResult, container: Element | ShadowRoot): void;

package/generated/tpl/render.js

@@ -0,0 +1,132 @@
+// --- Template preparation (runs ONCE per unique template literal) -----
+const MARKER = '\uD83D\uDD25PART\uD83D\uDD25'; // unlikely-collision sentinel
+const templateCache = new WeakMap();
+function prepare(strings) {
+    let cached = templateCache.get(strings);
+    if (cached)
+        return cached;
+    const partDescriptors = [];
+    let htmlStr = '';
+    strings.forEach((chunk, i) => {
+        htmlStr += chunk;
+        if (i < strings.length - 1) {
+            // Is this interpolation inside an attribute value?
+            // e.g. `...aria-checked="${...}"` — chunk ends with `attr="` or `attr='` or `attr=`
+            const attrMatch = /([a-zA-Z0-9_-]+)=(["']?)$/.exec(chunk);
+            if (attrMatch) {
+                partDescriptors.push({ type: 'attr', name: attrMatch[1] });
+                htmlStr += MARKER; // becomes the attribute's value
+            }
+            else {
+                partDescriptors.push({ type: 'child' });
+                // start/end comment pair — gives us a stable region to patch later,
+                // and room to grow into list/array rendering without a redesign
+                htmlStr += `<!--${MARKER}-->`;
+            }
+        }
+    });
+    const element = document.createElement('template');
+    element.innerHTML = htmlStr;
+    cached = { element, partDescriptors };
+    templateCache.set(strings, cached);
+    return cached;
+}
+const instanceCache = new WeakMap();
+function createInstance(prepared) {
+    const fragment = prepared.element.content.cloneNode(true);
+    const parts = [];
+    // Walk the clone once, in the same order `prepare()` emitted markers,
+    // and bind each descriptor to a real node.
+    const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+    let descriptorIndex = 0;
+    const descriptors = prepared.partDescriptors;
+    let node;
+    while ((node = walker.nextNode())) {
+        if (descriptorIndex >= descriptors.length)
+            break;
+        if (node.nodeType === Node.COMMENT_NODE && node.data === MARKER) {
+            parts.push({ type: 'child', anchor: node, nodes: [], committed: undefined });
+            descriptorIndex++;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            for (const attr of Array.from(el.attributes)) {
+                if (attr.value === MARKER) {
+                    const desc = descriptors[descriptorIndex];
+                    if (desc.type === 'attr') {
+                        parts.push({ type: 'attr', el, name: desc.name, committed: undefined });
+                        descriptorIndex++;
+                    }
+                }
+            }
+        }
+    }
+    return { fragment, parts };
+}
+// --- Committing values into parts (the only thing that runs per update) -
+function isTemplateResult(v) {
+    return !!v && typeof v === 'object' && 'strings' in v && 'values' in v;
+}
+function toNode(value) {
+    if (value instanceof Node)
+        return value;
+    if (isTemplateResult(value)) {
+        const { fragment, parts } = createInstance(prepare(value.strings));
+        parts.forEach((part, i) => {
+            const v = value.values[i];
+            part.type === 'child' ? commitChild(part, v) : commitAttr(part, v);
+        });
+        return fragment;
+    }
+    return document.createTextNode(String(value));
+}
+function commitChild(part, value) {
+    if (value === part.committed)
+        return; // dirty-check, skip untouched parts
+    for (const n of part.nodes)
+        n.remove();
+    const nodes = [];
+    for (const item of Array.isArray(value) ? value : [value]) {
+        if (item === null || item === undefined || item === false)
+            continue;
+        const node = toNode(item);
+        const inserted = node instanceof DocumentFragment ? Array.from(node.childNodes) : [node];
+        part.anchor.before(node);
+        nodes.push(...inserted);
+    }
+    part.nodes = nodes;
+    part.committed = value;
+}
+function commitAttr(part, value) {
+    if (value === part.committed)
+        return;
+    if (value === null || value === undefined || value === false) {
+        part.el.removeAttribute(part.name);
+    }
+    else {
+        part.el.setAttribute(part.name, String(value));
+    }
+    part.committed = value;
+}
+// --- Public render() ----------------------------------------------------
+export default function (result, container) {
+    const prepared = prepare(result.strings);
+    let instance = instanceCache.get(container);
+    if (!instance || instance.strings !== result.strings) {
+        // first render, OR the template shape changed entirely — full (re)build
+        container.textContent = '';
+        const { fragment, parts } = createInstance(prepared);
+        container.append(fragment);
+        instance = { strings: result.strings, fragmentRoot: fragment, parts };
+        instanceCache.set(container, instance);
+    }
+    // same template shape as last time → patch existing DOM nodes only,
+    // no innerHTML, no re-clone, no focus/scroll loss
+    instance.parts.forEach((part, i) => {
+        const value = result.values[i];
+        if (part.type === 'child')
+            commitChild(part, value);
+        else
+            commitAttr(part, value);
+    });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.1",
-  "description": "Elegant SwiftUI-inspired web components for ambitious web apps and web extensions.",
+  "version": "0.0.0-dev.100",
+  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
   },
@@ -15,10 +15,16 @@
     "url": "git+https://github.com/swiftwc/ui.git",
     "directory": "packages/ui"
   },
+  "bugs": {
+    "url": "https://github.com/swiftwc/ui/issues"
+  },
   "files": [
     "generated",
-    "scss"
+    "scss",
+    "web-components.html-data",
+    "web-components.css-data"
   ],
+  "sass": "scss/index.scss",
   "keywords": [
     "components",
     "ui",
@@ -38,18 +44,53 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
-    "./styles": "./generated/styles.css"
+    "./events": {
+      "types": "./generated/events/index.d.ts",
+      "default": "./generated/events/index.js"
+    },
+    "./css": "./generated/css/index.css",
+    "./scss": "./scss/index.scss",
+    "./scss/*": "./scss/*.scss",
+    "./customElements/en": "./custom-elements/en.json",
+    "./webComponentsHTMLData/en": "./web-components.html-data/en.json",
+    "./webComponentsCSSData/en": "./web-components.css-data/en.json"
   },
   "bin": {
     "swiftwc": "./generated/index.js"
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
+    "postbuild": "npm run format:write && vitest run --dom",
+    "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
-    "build:scss": "sass --no-source-map scss/index.scss generated/styles.css"
+    "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
+    "build:manifest": "tsx scripts/make-manifest.ts && prettier ./web-components.html-data/en.json && prettier ./web-components.css-data/en.json --write",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:morphdom && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
+    "build:barrels:morphdom": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/morphdom --exclude \".\\.test\\.ts\"",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
+    "format:check": "prettier . --check",
+    "format:write": "prettier . --write",
+    "lint:scripts": "tsc -p tsconfig.scripts.json --noEmit",
+    "test": "vitest --dom",
+    "prepackage": "rm -rf generated",
+    "package": "npm run build:ts && npm run build:scss",
+    "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {
-    "sass": "^1.97.2"
-  }
+    "doctrine": "^3.0.0",
+    "element-internals-polyfill": "^3.0.2",
+    "gonzales-pe": "^4.3.0",
+    "happy-dom": "^20.7.0",
+    "sass": "^1.98.0",
+    "ts-morph": "^28.0.0",
+    "tsx": "^4.21.0",
+    "vitest": "^4.0.18"
+  },
+  "customElements": "custom-elements/en.json"
 }