@satinhq/kit 0.0.0-stage → 0.1.0-beta.0

package/dist/sw/updateCheck.js

@@ -0,0 +1,25 @@
+// Development telemetry is compile-time disabled in ordinary release builds.
+const checks = new Map();
+const listeners = new Map();
+export function checkAppShellUpdate(registration) {
+    if (import.meta.env.SATIN_DEV_MENU) {
+        const at = Date.now();
+        checks.set(registration.scope, at);
+        for (const listener of listeners.get(registration.scope) ?? [])
+            listener(at);
+    }
+    return registration.update();
+}
+export function subscribeAppShellChecks(scope, listener) {
+    const current = checks.get(scope);
+    if (current !== undefined)
+        listener(current);
+    const scoped = listeners.get(scope) ?? new Set();
+    scoped.add(listener);
+    listeners.set(scope, scoped);
+    return () => {
+        scoped.delete(listener);
+        if (!scoped.size)
+            listeners.delete(scope);
+    };
+}

package/dist/sw/vite.d.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite';
+export interface SatinAppShellPluginOptions {
+    readonly mediaProbe?: string;
+    readonly shellFile?: string;
+    readonly shellUrl?: string;
+    /** Output-relative public files that are part of an app screen but not the Vite bundle graph. */
+    readonly additionalPrecache?: readonly string[];
+    /** Exact pre-generator cache names to remove during the first generated-worker activation. */
+    readonly publicRoutes?: readonly string[];
+    /** Read-only legacy asset fallbacks; ambiguous unscoped caches are retained. */
+    readonly legacyCacheNames?: readonly string[];
+    /** Explicit diagnostic build only; production serves cached responses unchanged. */
+    readonly diagnosticTimingHeaders?: boolean;
+}
+export declare function satinAppShell(options?: SatinAppShellPluginOptions): Plugin;
+export { satinApp, satinAppFixtures, type SatinAppOptions } from '../app/vite.js';
+export { defineApp } from '../public/definition.js';
+/** Lab fixture definition, outside the stable app API. */
+export { defineSatinApp as defineAppFixture } from '../app/definition.js';
+export type { AppFixture } from '../app/head.js';

package/dist/sw/vite.js

@@ -0,0 +1,71 @@
+import { copyFile, mkdir } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { APP_SHELL_VERSION_FILE } from './protocol.js';
+import { generateAppShell } from './generator.js';
+export function satinAppShell(options = {}) {
+    let config;
+    let outputWritten = false;
+    const bundleFiles = new Set();
+    return {
+        name: 'satin:app-shell',
+        apply: 'build',
+        enforce: 'post',
+        buildStart() {
+            outputWritten = false;
+        },
+        writeBundle() {
+            outputWritten = true;
+        },
+        renderError() {
+            outputWritten = false;
+        },
+        // Installed WebKit glass identity depends on retaining authored CSS declarations.
+        // Vite 8's default CSS optimizer changes resting canvas/rim pixels.
+        config() {
+            return { build: { cssMinify: false } };
+        },
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        generateBundle(_outputOptions, bundle) {
+            bundleFiles.clear();
+            for (const output of Object.values(bundle))
+                bundleFiles.add(output.fileName);
+        },
+        closeBundle: {
+            sequential: true,
+            async handler() {
+                if (!outputWritten)
+                    return;
+                if (!config)
+                    throw new Error('Satin app-shell plugin did not receive Vite config.');
+                if (!config.build.write)
+                    return;
+                const { additionalPrecache, mediaProbe, shellFile, shellUrl, publicRoutes, legacyCacheNames, diagnosticTimingHeaders, } = options;
+                await generateAppShell({
+                    additionalPrecache,
+                    mediaProbe,
+                    shellFile,
+                    shellUrl,
+                    base: config.base,
+                    bundleFiles,
+                    legacyCacheNames,
+                    publicRoutes,
+                    diagnosticTimingHeaders,
+                    outDir: resolve(config.root, config.build.outDir),
+                });
+                if (shellUrl && shellUrl !== config.base) {
+                    const out = resolve(config.root, config.build.outDir);
+                    await mkdir(resolve(out, shellUrl.slice(config.base.length)), { recursive: true });
+                    await copyFile(resolve(out, 'sw.js'), resolve(out, shellUrl.slice(config.base.length), 'sw.js'));
+                    await copyFile(resolve(out, APP_SHELL_VERSION_FILE), resolve(out, shellUrl.slice(config.base.length), APP_SHELL_VERSION_FILE));
+                }
+            },
+        },
+    };
+}
+// measured-reference: definition-owned build integration.
+export { satinApp, satinAppFixtures } from '../app/vite.js';
+export { defineApp } from '../public/definition.js';
+/** Lab fixture definition, outside the stable app API. */
+export { defineSatinApp as defineAppFixture } from '../app/definition.js';

package/dist/symbols/Symbol.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode, type SVGProps } from 'react';
+import { type CoreSymbolName } from './catalogue.js';
+import type { SymbolGlyph, SymbolSource, SymbolWeight, SymbolScale, SymbolRenderingMode } from './types.js';
+/** A symbol name in SF Symbols style (`'plus'`, `'trash.fill'`). The bundled names autocomplete;
+ * any string is accepted for glyphs added through `SymbolProvider`. */
+export type SymbolName = CoreSymbolName | (string & {});
+export declare const SymbolSelectionContext: import("react").Context<boolean>;
+/** Extend or override glyphs locally. Paths must be original or redistributable with provenance. */
+export declare function SymbolProvider({ glyphs, children, }: {
+    glyphs: SymbolSource;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function resolveSymbol(source: SymbolSource, name: string, selected?: boolean): SymbolGlyph | undefined;
+/** The symbol's name, symbol properties and an optional accessible label. */
+export type SymbolImageProps = Omit<SVGProps<SVGSVGElement>, 'name' | 'children' | 'scale'> & {
+    name: SymbolName;
+    weight?: SymbolWeight;
+    scale?: SymbolScale;
+    selected?: boolean;
+    renderingMode?: SymbolRenderingMode;
+    palette?: readonly [string, string?, string?];
+    /** Decorative by default; label an independently meaningful symbol, or label its parent button. */
+    label?: string;
+    glyph?: SymbolGlyph;
+};
+/**
+ * `Image(systemName:)`: a vector symbol that sizes with the surrounding font and takes its
+ * colour. A `.fill` variant is chosen automatically where the context selects it (a selected tab).
+ *
+ * @example
+ * <SymbolImage name="star.fill" />
+ */
+export declare function SymbolImage({ name, weight: explicitWeight, scale, selected, renderingMode, palette, label, glyph: suppliedGlyph, style, ...props }: SymbolImageProps): import("react").JSX.Element;

package/dist/symbols/Symbol.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useRef, } from 'react';
+import { coreSymbols } from './catalogue.js';
+import { isExcludedSymbolName } from './exclusions.js';
+import { symbolGeometry, symbolNormalization, symbolNormalizationTransform, symbolOutlineOffset, } from './metrics.js';
+import { useInheritedSymbolWeight } from './inheritedWeight.js';
+const SourceContext = createContext(coreSymbols);
+export const SymbolSelectionContext = createContext(false);
+/** Extend or override glyphs locally. Paths must be original or redistributable with provenance. */
+export function SymbolProvider({ glyphs, children, }) {
+    const inherited = useContext(SourceContext);
+    return _jsx(SourceContext, { value: { ...inherited, ...glyphs }, children: children });
+}
+export function resolveSymbol(source, name, selected = false) {
+    if (isExcludedSymbolName(name))
+        return undefined;
+    const filledName = `${name}.fill`;
+    if (selected && !name.endsWith('.fill') && Object.hasOwn(source, filledName))
+        return source[filledName];
+    return Object.hasOwn(source, name) ? source[name] : undefined;
+}
+/**
+ * `Image(systemName:)`: a vector symbol that sizes with the surrounding font and takes its
+ * colour. A `.fill` variant is chosen automatically where the context selects it (a selected tab).
+ *
+ * @example
+ * <SymbolImage name="star.fill" />
+ */
+export function SymbolImage({ name, weight: explicitWeight, scale = 'medium', selected, renderingMode = 'monochrome', palette, label, glyph: suppliedGlyph, style, ...props }) {
+    const source = useContext(SourceContext);
+    const inheritedSelection = useContext(SymbolSelectionContext);
+    const ref = useRef(null);
+    const weight = useInheritedSymbolWeight(ref, explicitWeight);
+    const maskId = `satin-symbol-${useId().replaceAll(':', '')}`;
+    const glyph = isExcludedSymbolName(name)
+        ? undefined
+        : (suppliedGlyph ?? resolveSymbol(source, name, selected ?? inheritedSelection));
+    const artwork = glyph ?? coreSymbols['questionmark.square'];
+    const normalization = symbolNormalization(artwork, weight);
+    const geometry = symbolGeometry(scale, artwork.opticalSize, normalization?.baseline);
+    const offset = symbolOutlineOffset(weight);
+    const accessibleLabel = label ?? props['aria-label'];
+    const meaningful = Boolean(accessibleLabel || props['aria-labelledby']);
+    const layers = { primary: 0, secondary: 1, tertiary: 2 };
+    const layout = {
+        display: 'inline-block',
+        verticalAlign: `${geometry.verticalAlign}em`,
+        flexShrink: 0,
+        overflow: 'visible',
+        ...style,
+    };
+    return (_jsxs("svg", { ...props, ref: ref, width: props.width ?? `${geometry.size}em`, height: props.height ?? `${geometry.size}em`, viewBox: "0 0 56 56", focusable: "false", role: meaningful ? 'img' : 'presentation', "aria-label": accessibleLabel, "aria-hidden": props['aria-hidden'] ?? (meaningful ? undefined : true), "data-satin-symbol": name, "data-satin-symbol-weight": weight, "data-satin-symbol-placeholder": artwork.placeholder || !glyph || undefined, style: layout, children: [offset < 0 && (_jsx("defs", { children: _jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "-4", y: "-4", width: "64", height: "64", style: { maskType: 'luminance' }, children: artwork.paths.map((path, index) => (_jsx("path", { d: path.d, transform: path.transform, fillRule: path.fillRule, fill: "white", stroke: "black", strokeWidth: -offset, strokeLinejoin: "round" }, index))) }) })), _jsx("g", { mask: offset < 0 ? `url(#${maskId})` : undefined, transform: symbolNormalizationTransform(artwork, weight), children: artwork.paths.map((path, index) => {
+                    const layer = layers[path.layer ?? 'primary'];
+                    const color = renderingMode === 'palette'
+                        ? (palette?.[layer] ?? palette?.[0] ?? 'currentColor')
+                        : 'currentColor';
+                    return (_jsx("path", { d: path.d, transform: path.transform, fillRule: path.fillRule, fill: color, stroke: offset > 0 ? color : undefined, strokeWidth: Math.max(0, offset), strokeLinejoin: "round", opacity: renderingMode === 'hierarchical' ? [1, 0.55, 0.3][layer] : undefined }, index));
+                }) })] }));
+}

package/dist/symbols/catalogue.d.ts

@@ -0,0 +1,4 @@
+import type { SymbolGlyph } from './types.js';
+/** The core symbol name contract used by public app declarations. */
+export type CoreSymbolName = "pin" | "pin.fill" | "pin.slash" | "pin.slash.fill" | "star" | "star.fill" | "house" | "house.fill" | "bell" | "bell.fill" | "person" | "person.fill" | "calendar" | "clock" | "clock.fill" | "trash" | "trash.fill" | "heart" | "heart.fill" | "folder" | "folder.fill" | "pencil" | "checkmark" | "checkmark.circle" | "checkmark.circle.fill" | "xmark" | "xmark.circle" | "xmark.circle.fill" | "info.circle" | "info.circle.fill" | "ellipsis" | "ellipsis.circle" | "ellipsis.circle.fill" | "plus" | "minus" | "chevron.left" | "chevron.right" | "chevron.up" | "chevron.down" | "circle" | "circle.fill" | "chart.bar" | "chart.bar.fill" | "photo" | "photo.fill" | "envelope" | "envelope.fill" | "bookmark" | "bookmark.fill" | "timer" | "timer.fill" | "stopwatch" | "stopwatch.fill" | "book" | "book.fill" | "doc.text" | "doc.text.fill" | "rectangle.stack" | "rectangle.stack.fill" | "slider.horizontal.3" | "square.and.arrow.up" | "square.and.arrow.up.fill" | "square.and.pencil" | "square.and.pencil.fill" | "gearshape" | "gearshape.fill" | "magnifyingglass" | "sidebar.left" | "arrowshape.turn.up.left" | "arrowshape.turn.up.left.fill" | "chevron.up.chevron.down" | "questionmark.square" | "questionmark.square.fill" | "play" | "play.fill" | "pause" | "pause.fill" | "arrow.clockwise" | "bolt" | "bolt.fill" | "flag" | "flag.fill" | "tray" | "tray.fill" | "cart" | "cart.fill" | "list.bullet" | "person.crop.circle" | "person.crop.circle.fill" | "dot.radiowaves.left.right" | "square.grid.2x2" | "square.grid.2x2.fill" | "battery.100" | "camera" | "camera.fill" | "car" | "device.phone.portrait" | "globe" | "keyboard" | "lock" | "lock.fill" | "moon" | "moon.fill" | "hand.raised" | "hand.raised.fill" | "sparkles" | "textformat" | "hourglass" | "arrow.up" | "arrow.down" | "arrow.down.circle" | "arrow.down.circle.fill" | "stop" | "stop.fill" | "doc.on.doc" | "doc.on.doc.fill" | "face.smiling" | "face.smiling.fill" | "bell.slash" | "bell.slash.fill" | "envelope.open" | "envelope.open.fill" | "envelope.badge" | "envelope.badge.fill" | "hand.thumbsup" | "hand.thumbsup.fill" | "hand.thumbsdown" | "hand.thumbsdown.fill" | "line.3.horizontal" | "line.3.horizontal.decrease" | "photo.on.rectangle" | "square.stack" | "square.stack.fill" | "forward" | "forward.fill" | "backward" | "backward.fill" | "shuffle" | "repeat" | "repeat.1" | "music.note" | "music.note.list" | "music.mic" | "music.house" | "music.house.fill" | "speaker" | "speaker.fill" | "speaker.wave.3" | "speaker.wave.3.fill" | "quote.bubble" | "quote.bubble.fill" | "tv.music.note" | "tv.music.note.fill" | "waveform" | "play.circle" | "play.circle.fill" | "play.rectangle" | "play.rectangle.fill" | "plus.circle" | "plus.circle.fill" | "checkmark.square" | "checkmark.square.fill" | "heart.slash" | "heart.slash.fill" | "flag.slash" | "flag.slash.fill" | "person.2" | "person.2.fill" | "arrowshape.turn.up.right" | "arrowshape.turn.up.right.fill" | "bubble.left.and.bubble.right" | "bubble.left.and.bubble.right.fill" | "text.insert" | "text.append" | "text.badge.plus" | "viewfinder" | "sun.max" | "sun.max.fill" | "gift" | "gift.fill" | "airplane" | "pawprint" | "briefcase" | "briefcase.fill" | "list.number" | "dot.radiowaves.left.and.right" | "exclamationmark.triangle" | "exclamationmark.triangle.fill" | "arrow.right" | "arrow.left" | "square.and.arrow.down" | "square.and.arrow.down.fill" | "gear" | "link" | "arrow.counterclockwise" | "arrow.uturn.backward" | "arrow.uturn.forward" | "archivebox" | "archivebox.fill" | "line.3.horizontal.decrease.circle" | "line.3.horizontal.decrease.circle.fill" | "questionmark.circle" | "questionmark.circle.fill" | "arrow.up.arrow.down" | "tag" | "tag.fill" | "paperplane" | "paperplane.fill" | "flame" | "flame.fill" | "location" | "location.fill" | "doc" | "doc.fill" | "mappin" | "mappin.and.ellipse" | "arrow.up.right" | "at" | "drop" | "drop.fill" | "headphones" | "bed.double" | "bed.double.fill" | "pause.circle" | "pause.circle.fill" | "display" | "dollarsign.circle" | "dollarsign.circle.fill" | "checkmark.seal" | "checkmark.seal.fill" | "tray.full" | "tray.full.fill" | "person.badge.plus" | "person.badge.plus.fill" | "folder.badge.plus" | "arrow.2.squarepath" | "dumbbell" | "figure.run" | "leaf" | "clock.arrow.circlepath" | "receipt" | "airplayaudio" | "bell.badge.fill" | "bell.badge" | "bicycle" | "book.closed.fill" | "book.closed" | "brain.head.profile" | "calendar.badge.clock" | "chart.line.uptrend.xyaxis" | "checklist" | "cross.case.fill" | "cross.case" | "cup.and.saucer.fill" | "cup.and.saucer" | "dumbbell.fill" | "exclamationmark.2" | "eye.fill" | "eye.slash.fill" | "eye.slash" | "eye" | "fork.knife" | "graduationcap.fill" | "graduationcap" | "key.fill" | "key" | "leaf.fill" | "list.bullet.clipboard.fill" | "list.bullet.clipboard" | "note.text.fill" | "note.text" | "pill.fill" | "pill" | "receipt.fill" | "scalemass.fill" | "scalemass" | "server.rack.fill" | "server.rack";
+export declare const coreSymbols: Readonly<Record<CoreSymbolName, SymbolGlyph>>;