@ketvietlab/design-system 0.1.25 → 0.1.30

package/dist/interactions/ket-table/styles.css

@@ -0,0 +1,282 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="ket-table"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kv-space-2);
+  }
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-busy="true"] {
+    opacity: 0.75;
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-scroll"] {
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-table-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-tools"] {
+    display: flex;
+    justify-content: flex-end;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-caption"] {
+    padding: var(--kv-space-3);
+    text-align: start;
+    color: var(--kv-text-secondary);
+  }
+  :where([data-kv-design-system])
+    [data-ui="ket-table"][data-gutter="compact"]
+    :is([data-ui="kt-col"], [data-ui="kt-cell"]) {
+    padding-inline: var(--kv-space-2);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-grid"] {
+    width: 100%;
+    min-width: 38rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: transparent;
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-col"] {
+    height: var(--kv-table-header-height);
+    padding: 0 var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+    color: var(--kv-table-header-text);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    text-align: left;
+    text-transform: none;
+    white-space: nowrap;
+  }
+  /* Badge deliberately shrinks-and-breaks (`overflow-wrap: anywhere`) for tight
+     spaces elsewhere in the system; inside a table cell that reads as one
+     character per line once the column gets squeezed. `nowrap` on the cell
+     alone doesn't stop it — Badge's own rule re-declares `white-space: normal`
+     on itself, which wins for its own text — so it needs overriding directly. */
+  :where([data-kv-design-system]) [data-ui="kt-cell"] [data-ui="badge"] {
+    white-space: nowrap;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-col"][data-align="end"] {
+    text-align: right;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-sort-button"] {
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-sort-icon"] {
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-select-col"],
+  :where([data-kv-design-system]) [data-ui="kt-select-cell"] {
+    position: relative;
+    z-index: 1;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    text-align: center;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-select-col"] {
+    height: var(--kv-table-header-height);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-select-cell"] {
+    height: var(--kv-row-height);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-row-bg);
+    vertical-align: middle;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-select-all"],
+  :where([data-kv-design-system]) [data-ui="kt-row-select"] {
+    width: 0.875rem;
+    height: 0.875rem;
+    margin: 0;
+    accent-color: var(--kv-color-accent);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-select-persisted"] {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-row"] {
+    position: relative;
+    background: var(--kv-table-row-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-row"]:hover {
+    background: var(--kv-surface-hover);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-row"][data-selected="true"] {
+    background: var(--kv-accent-subtle);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-cell"] {
+    height: var(--kv-row-height);
+    padding: 0.4375rem var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-cell"][data-align="end"] {
+    text-align: right;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-row-link"] {
+    color: inherit;
+    text-decoration: none;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-row-link"][data-primary="true"]::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+  }
+  :where([data-kv-design-system])
+    [data-ui="kt-cell"]
+    :is(a:not([data-primary="true"]), button, input, select) {
+    position: relative;
+    z-index: 1;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-person"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-group-row"] [data-ui="kt-group-cell"] {
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-header-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-group-toggle"] {
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--kv-weight-semibold);
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-group-indent"] {
+    display: inline-block;
+    inline-size: calc(var(--kt-group-depth, 0) * var(--kv-space-4));
+  }
+  :where([data-kv-design-system]) [data-ui="kt-group-count"] {
+    padding: 0 0.375rem;
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-panel-bg-subtle);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-group-pager"] td {
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-table-border);
+    background: var(--kv-table-row-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="kt-pager"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-pager-label"] {
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-pager-button"] {
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-panel-bg);
+    color: var(--kv-text-main);
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-pager-button"]:is(:hover, :focus-visible):not(:disabled) {
+    background: var(--kv-surface-hover);
+  }
+  :where([data-kv-design-system]) [data-ui="kt-pager-button"]:disabled {
+    color: var(--kv-text-disabled);
+    cursor: not-allowed;
+  }
+}
+
+@media (max-width: 48rem) {
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-responsive="stack"] [data-ui="kt-grid"] {
+    min-width: 0;
+  }
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-responsive="stack"] thead {
+    position: absolute;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+  }
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-responsive="stack"] [data-ui="kt-row"] {
+    display: grid;
+    padding: var(--kv-space-2);
+    border-bottom: 1px solid var(--kv-table-border);
+  }
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-responsive="stack"] [data-ui="kt-cell"] {
+    display: flex;
+    min-height: var(--kv-row-height);
+    height: auto;
+    gap: var(--kv-space-3);
+    justify-content: space-between;
+    white-space: normal;
+  }
+  :where([data-kv-design-system]) [data-ui="ket-table"][data-responsive="stack"] [data-ui="kt-cell"]::before {
+    content: attr(data-label);
+    color: var(--kv-text-secondary);
+    font-weight: var(--kv-weight-semibold);
+  }
+}
+
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="kt-selection-target"] {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--kv-space-6);
+    min-block-size: var(--kv-space-6);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) [data-ui="kt-scroll"]:focus-visible {
+    outline: 2px solid var(--kv-accent);
+    outline-offset: -2px;
+  }
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="ket-table"] {
+      --kv-row-height: var(--kv-touch-target);
+    }
+    :where([data-kv-design-system]) [data-ui="kt-selection-target"] {
+      min-inline-size: var(--kv-touch-target);
+      min-block-size: var(--kv-touch-target);
+    }
+    :where([data-kv-design-system]) [data-ui="kt-select-cell"] {
+      padding-block: 0;
+    }
+  }
+}

package/dist/interactions/lightbox/demo.d.ts

@@ -0,0 +1,3 @@
+import type { LightboxConfig } from './index.tsx';
+export declare const lightboxDemoConfig: LightboxConfig;
+//# sourceMappingURL=demo.d.ts.map

package/dist/interactions/lightbox/demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/lightbox/demo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAQjD,eAAO,MAAM,kBAAkB,EAAE,cAiBhC,CAAA"}

package/dist/interactions/lightbox/demo.js

@@ -0,0 +1,21 @@
+// Inline SVG pictures, so the catalogue specimen needs no network or asset files.
+const picture = (fill, label) => `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="960" height="720" viewBox="0 0 960 720"><rect width="960" height="720" fill="${fill}"/><text x="480" y="380" font-family="sans-serif" font-size="64" fill="#fff" text-anchor="middle">${label}</text></svg>`)}`;
+export const lightboxDemoConfig = {
+    thumbnails: 'all',
+    items: [
+        { src: picture('#1d4ed8', 'Front'), alt: 'Jacket, front', caption: 'Front' },
+        { src: picture('#b45309', 'Back'), alt: 'Jacket, back', caption: 'Back' },
+        { src: picture('#047857', 'Detail'), alt: 'Jacket, collar detail', caption: 'Collar detail' },
+    ],
+    labels: {
+        open: 'Open {alt}',
+        close: 'Close',
+        previous: 'Previous image',
+        next: 'Next image',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        counter: '{index} / {total}',
+        empty: 'No image',
+    },
+};
+//# sourceMappingURL=demo.js.map

package/dist/interactions/lightbox/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/lightbox/demo.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,KAAa,EAAU,EAAE,CACtD,sBAAsB,kBAAkB,CACtC,+HAA+H,IAAI,qGAAqG,KAAK,eAAe,CAC7P,EAAE,CAAA;AAEL,MAAM,CAAC,MAAM,kBAAkB,GAAmB;IAChD,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE;QACL,EAAE,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE;QAC5E,EAAE,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE;QACzE,EAAE,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,uBAAuB,EAAE,OAAO,EAAE,eAAe,EAAE;KAC9F;IACD,MAAM,EAAE;QACN,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,gBAAgB;QAC1B,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,mBAAmB;QAC5B,KAAK,EAAE,UAAU;KAClB;CACF,CAAA"}

package/dist/interactions/lightbox/index.d.ts

@@ -0,0 +1,58 @@
+import type { IslandController, IslandProps, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['lightbox', 'lightbox-thumbs', 'lightbox-thumb', 'lightbox-empty', 'lightbox-layer', 'lightbox-backdrop', 'lightbox-toolbar', 'lightbox-counter', 'lightbox-tool', 'lightbox-stage', 'lightbox-image', 'lightbox-nav', 'lightbox-caption'];
+export type LightboxItem = {
+    src: string;
+    alt: string;
+    /** A smaller rendition for the trigger; the full `src` is used when omitted. */
+    thumbnail?: string | null;
+    caption?: string | null;
+};
+export type LightboxLabels = {
+    /** The trigger's accessible name, `{alt}` interpolated. */
+    open: string;
+    close: string;
+    previous: string;
+    next: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** `{index}` and `{total}` interpolated. */
+    counter: string;
+    /** Shown in place of a thumbnail when there are no items. */
+    empty?: string;
+};
+export type LightboxConfig = {
+    items: readonly LightboxItem[];
+    labels: LightboxLabels;
+    /** `first` shows one thumbnail that opens the whole set; `all` shows one per item. */
+    thumbnails?: 'first' | 'all';
+    size?: 'small' | 'medium' | 'large';
+};
+export type LightboxIslandProps = {
+    id: string;
+    config: LightboxConfig;
+};
+/**
+ * The viewer without a trigger of its own: whatever renders thumbnails (a record's
+ * image field, the rows of a variant editor) calls `open` with the set to show and
+ * places `layer()` anywhere in its own view. `attach` wires the keyboard once, for
+ * the lifetime of the island that owns it.
+ */
+export type LightboxController = {
+    open: (items: readonly LightboxItem[], at: number, trigger: EventTarget | null) => void;
+    close: () => void;
+    isOpen: () => boolean;
+    layer: () => TemplateResult | null;
+    attach: (lifetime: AbortSignal) => void;
+};
+export declare function createLightbox(labels: LightboxLabels, id?: string): LightboxController;
+/** A thumbnail — or one per item — that opens the whole set in the viewer. */
+export declare function createLightboxView(props: LightboxIslandProps): IslandController;
+/** One thumbnail button, for a view that drives its own `createLightbox` controller. */
+export declare const LightboxThumb: (props: {
+    item: LightboxItem;
+    labels: Pick<LightboxLabels, 'open'>;
+    size?: 'small' | 'medium' | 'large';
+    onOpen: (trigger: EventTarget | null) => void;
+}) => TemplateResult;
+export declare const lightbox: (props: IslandProps) => IslandController;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/lightbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/lightbox/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE3F,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,CACV,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B,MAAM,EAAE,cAAc,CAAA;IACtB,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,cAAc,CAAA;CAAE,CAAA;AAWxE;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACvF,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,OAAO,CAAA;IACrB,KAAK,EAAE,MAAM,cAAc,GAAG,IAAI,CAAA;IAClC,MAAM,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,EAAE,SAAa,GAAG,kBAAkB,CA+P1F;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAwC/E;AAED,wFAAwF;AACxF,eAAO,MAAM,aAAa,UAAW;IACnC,IAAI,EAAE,YAAY,CAAA;IAClB,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC9C,KAAG,cAWH,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,WAAW,KAAG,gBACe,CAAA"}

package/dist/interactions/lightbox/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+// A Fancybox-style image viewer, as a ketjs-view island: a thumbnail (or a row of
+// them) that opens a full-screen stage over several images, with zoom (buttons,
+// wheel, keyboard, tap), pan (drag), pinch-to-zoom (two fingers), previous/next
+// (buttons, arrow keys) and a counter.
+//
+// Like relation-select, it owns reactive state rather than being a static control
+// wired by the shared delegator — zoom level, pan offset and the open item all
+// change on every pointer move. A consuming app mounts it through its own island
+// runtime; everything it needs (the images, the labels) arrives as JSON props.
+import { each, signal } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'lightbox',
+    'lightbox-thumbs',
+    'lightbox-thumb',
+    'lightbox-empty',
+    'lightbox-layer',
+    'lightbox-backdrop',
+    'lightbox-toolbar',
+    'lightbox-counter',
+    'lightbox-tool',
+    'lightbox-stage',
+    'lightbox-image',
+    'lightbox-nav',
+    'lightbox-caption',
+];
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_STEP = 0.5;
+const fill = (template, params) => template.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? `{${name}}`));
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+export function createLightbox(labels, id = 'lightbox') {
+    const items = signal([]);
+    const open = signal(false);
+    const index = signal(0);
+    const zoom = signal(MIN_ZOOM);
+    const pan = signal({ x: 0, y: 0 });
+    let returnFocus = null;
+    // Every pointer down on the stage, so two fingers read as a pinch and one as a pan.
+    const pointers = new Map();
+    let gesture = null;
+    const resetView = () => {
+        zoom.set(MIN_ZOOM);
+        pan.set({ x: 0, y: 0 });
+    };
+    const show = (set, at, trigger) => {
+        if (!set.length)
+            return;
+        returnFocus = trigger instanceof HTMLElement ? trigger : null;
+        items.set(set);
+        index.set(clamp(at, 0, set.length - 1));
+        resetView();
+        open.set(true);
+        queueMicrotask(() => {
+            if (typeof document === 'undefined')
+                return;
+            document.getElementById(`${id}-lightbox-close`)?.focus();
+        });
+    };
+    const hide = () => {
+        if (!open())
+            return;
+        open.set(false);
+        resetView();
+        pointers.clear();
+        gesture = null;
+        returnFocus?.focus();
+        returnFocus = null;
+    };
+    const step = (delta) => {
+        const total = items().length;
+        if (total < 2)
+            return;
+        index.set((index() + delta + total) % total);
+        resetView();
+    };
+    const zoomTo = (next) => {
+        const value = clamp(next, MIN_ZOOM, MAX_ZOOM);
+        zoom.set(value);
+        // Back at fit size there is nothing to pan across.
+        if (value === MIN_ZOOM)
+            pan.set({ x: 0, y: 0 });
+    };
+    const centerOf = () => {
+        const points = [...pointers.values()];
+        if (!points.length)
+            return { x: 0, y: 0 };
+        return {
+            x: points.reduce((sum, point) => sum + point.x, 0) / points.length,
+            y: points.reduce((sum, point) => sum + point.y, 0) / points.length,
+        };
+    };
+    const distanceOf = () => {
+        const [a, b] = [...pointers.values()];
+        return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
+    };
+    const endPointer = (event, completed) => {
+        // At fit size a horizontal swipe with one finger moves to the neighbouring image.
+        if (completed && gesture && pointers.size === 1 && zoom() === MIN_ZOOM && gesture.distance === null) {
+            const dx = event.clientX - gesture.start.x;
+            if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(event.clientY - gesture.start.y))
+                step(dx < 0 ? 1 : -1);
+        }
+        pointers.delete(event.pointerId);
+        event.currentTarget?.releasePointerCapture?.(event.pointerId);
+        if (!pointers.size) {
+            // Keep `moved` until the click that follows this pointerup has been read.
+            const finished = gesture;
+            if (finished && completed)
+                setTimeout(() => (gesture === finished ? (gesture = null) : null), 0);
+            else
+                gesture = null;
+            return;
+        }
+        // One finger lifted from a pinch: carry on as a pan from where things are now.
+        if (gesture)
+            gesture = { ...gesture, start: centerOf(), origin: pan(), zoom: zoom(), distance: null };
+    };
+    const layer = () => {
+        const set = items();
+        const item = set[index()];
+        if (!open() || !item)
+            return null;
+        const scale = zoom();
+        const offset = pan();
+        const many = set.length > 1;
+        return (_jsxs("div", { "data-ui": "lightbox-layer", role: "dialog", "aria-modal": "true", "aria-label": item.alt, id: `${id}-lightbox`, children: [_jsx("div", { "data-ui": "lightbox-backdrop", "aria-hidden": "true", onClick: hide }), _jsxs("div", { "data-ui": "lightbox-toolbar", children: [_jsx("span", { "data-ui": "lightbox-counter", "aria-live": "polite", children: many ? fill(labels.counter, { index: index() + 1, total: set.length }) : '' }), _jsx("button", { type: "button", "data-ui": "lightbox-tool", "data-tool": "zoom-out", "aria-label": labels.zoomOut, title: labels.zoomOut, disabled: scale <= MIN_ZOOM, onClick: () => zoomTo(scale - ZOOM_STEP), children: "\u2212" }), _jsx("button", { type: "button", "data-ui": "lightbox-tool", "data-tool": "zoom-in", "aria-label": labels.zoomIn, title: labels.zoomIn, disabled: scale >= MAX_ZOOM, onClick: () => zoomTo(scale + ZOOM_STEP), children: "+" }), _jsx("button", { type: "button", "data-ui": "lightbox-tool", "data-tool": "close", id: `${id}-lightbox-close`, "aria-label": labels.close, title: labels.close, onClick: hide, children: "\u00D7" })] }), _jsx("div", { role: "presentation", "data-ui": "lightbox-stage", "data-zoomed": String(scale > MIN_ZOOM), onClick: (event) => {
+                        // A click on the empty stage around the picture closes, like the backdrop.
+                        if (event.target === event.currentTarget && !gesture?.moved)
+                            hide();
+                    }, onWheel: (event) => {
+                        event.preventDefault();
+                        zoomTo(zoom() * (event.deltaY < 0 ? 1.15 : 1 / 1.15));
+                    }, onPointerDown: (event) => {
+                        pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                        event.currentTarget.setPointerCapture?.(event.pointerId);
+                        gesture = {
+                            start: centerOf(),
+                            origin: pan(),
+                            zoom: zoom(),
+                            distance: pointers.size > 1 ? distanceOf() : null,
+                            moved: gesture?.moved === true && pointers.size > 1,
+                        };
+                    }, onPointerMove: (event) => {
+                        if (!gesture || !pointers.has(event.pointerId))
+                            return;
+                        pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+                        const center = centerOf();
+                        const dx = center.x - gesture.start.x;
+                        const dy = center.y - gesture.start.y;
+                        if (Math.abs(dx) + Math.abs(dy) > 4)
+                            gesture.moved = true;
+                        if (pointers.size > 1 && gesture.distance) {
+                            // Pinch: scale by how far the fingers spread since they both came down.
+                            zoomTo(gesture.zoom * (distanceOf() / gesture.distance));
+                            gesture.moved = true;
+                        }
+                        if (zoom() > MIN_ZOOM)
+                            pan.set({ x: gesture.origin.x + dx, y: gesture.origin.y + dy });
+                    }, onPointerUp: (event) => endPointer(event, true), onPointerCancel: (event) => endPointer(event, false), children: _jsx("img", { "data-ui": "lightbox-image", src: item.src, alt: item.alt, draggable: "false", style: `transform: translate(${offset.x}px, ${offset.y}px) scale(${scale})`, onClick: () => {
+                            // A tap (not the end of a pan or pinch) toggles between fit and 2×.
+                            if (!gesture?.moved)
+                                zoomTo(zoom() > MIN_ZOOM ? MIN_ZOOM : 2);
+                        } }) }), many ? (_jsx("button", { type: "button", "data-ui": "lightbox-nav", "data-direction": "previous", "aria-label": labels.previous, title: labels.previous, onClick: () => step(-1), children: "\u2039" })) : null, many ? (_jsx("button", { type: "button", "data-ui": "lightbox-nav", "data-direction": "next", "aria-label": labels.next, title: labels.next, onClick: () => step(1), children: "\u203A" })) : null, item.caption ? _jsx("p", { "data-ui": "lightbox-caption", children: item.caption }) : null] }));
+    };
+    const attach = (lifetime) => {
+        // Capture phase: an enclosing record modal also closes on Escape, and the
+        // viewer on top of it must be the only layer that answers.
+        document.addEventListener('keydown', (event) => {
+            if (!open())
+                return;
+            if (event.key === 'Escape')
+                hide();
+            else if (event.key === 'ArrowLeft')
+                step(-1);
+            else if (event.key === 'ArrowRight')
+                step(1);
+            else if (event.key === '+' || event.key === '=')
+                zoomTo(zoom() + ZOOM_STEP);
+            else if (event.key === '-')
+                zoomTo(zoom() - ZOOM_STEP);
+            else
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }, { signal: lifetime, capture: true });
+        lifetime.addEventListener('abort', () => {
+            open.set(false);
+            pointers.clear();
+            gesture = null;
+        });
+    };
+    return { open: show, close: hide, isOpen: () => open(), layer, attach };
+}
+/** A thumbnail — or one per item — that opens the whole set in the viewer. */
+export function createLightboxView(props) {
+    const { id, config } = props;
+    const labels = config.labels;
+    const items = config.items;
+    const viewer = createLightbox(labels, id);
+    const thumbs = () => {
+        const shown = config.thumbnails === 'all' ? items : items.slice(0, 1);
+        if (!shown.length)
+            return (_jsx("span", { "data-ui": "lightbox-empty", "data-size": config.size ?? 'medium', children: labels.empty ?? '' }));
+        return (_jsx("div", { "data-ui": "lightbox-thumbs", children: each([...shown], (item) => item.src, (item) => LightboxThumb({
+                item,
+                labels,
+                size: config.size,
+                onOpen: (trigger) => viewer.open(items, items.indexOf(item), trigger),
+            })) }));
+    };
+    return {
+        view: () => (_jsxs("div", { "data-ui": "lightbox", id: id, children: [thumbs(), viewer.layer()] })),
+        mount: ({ lifetime }) => viewer.attach(lifetime),
+    };
+}
+/** One thumbnail button, for a view that drives its own `createLightbox` controller. */
+export const LightboxThumb = (props) => (_jsx("button", { type: "button", "data-ui": "lightbox-thumb", "data-size": props.size ?? 'medium', "aria-label": fill(props.labels.open, { alt: props.item.alt }), "aria-haspopup": "dialog", onClick: (event) => props.onOpen(event.currentTarget), children: _jsx("img", { src: props.item.thumbnail ?? props.item.src, alt: "", loading: "lazy", decoding: "async" }) }));
+export const lightbox = (props) => createLightboxView(props);
+//# sourceMappingURL=index.js.map

package/dist/interactions/lightbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/lightbox/index.tsx"],"names":[],"mappings":"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"}