foss-design 0.9.10 → 0.9.12

package/dist/viewer-lib/styles.css

@@ -42,6 +42,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
     }
@@ -58,11 +67,14 @@
     --font-weight-semibold: 600;
     --tracking-wide: .025em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --blur-sm: 8px;
+    --blur-md: 12px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: "IBM Plex Sans", system-ui, sans-serif;
@@ -406,6 +418,10 @@
     pointer-events: none;
   }
 
+  .invisible {
+    visibility: hidden;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -442,6 +458,10 @@
     position: sticky;
   }
 
+  .-inset-px {
+    inset: -1px;
+  }
+
   .inset-0 {
     inset: 0;
   }
@@ -450,6 +470,10 @@
     inset-inline: 0;
   }
 
+  .inset-x-5 {
+    inset-inline: calc(var(--spacing) * 5);
+  }
+
   .inset-x-6 {
     inset-inline: calc(var(--spacing) * 6);
   }
@@ -470,6 +494,10 @@
     top: 50%;
   }
 
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -482,6 +510,10 @@
     top: 52px;
   }
 
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -502,6 +534,10 @@
     bottom: calc(var(--spacing) * 5);
   }
 
+  .bottom-full {
+    bottom: 100%;
+  }
+
   .left-0 {
     left: 0;
   }
@@ -871,6 +907,10 @@
     max-height: min(56vh, 520px);
   }
 
+  .max-h-\[min\(296px\,var\(--radix-popover-content-available-height\)\)\] {
+    max-height: min(296px, var(--radix-popover-content-available-height));
+  }
+
   .max-h-\[min\(560px\,76vh\)\] {
     max-height: min(560px, 76vh);
   }
@@ -891,6 +931,10 @@
     min-height: 38px;
   }
 
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
+
   .min-h-\[46px\] {
     min-height: 46px;
   }
@@ -917,6 +961,10 @@
     }
   }
 
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -1005,6 +1053,10 @@
     max-width: 80%;
   }
 
+  .max-w-\[95\%\] {
+    max-width: 95%;
+  }
+
   .max-w-\[260px\] {
     max-width: 260px;
   }
@@ -1033,6 +1085,10 @@
     max-width: 1440px;
   }
 
+  .max-w-\[calc\(100\%-24px\)\] {
+    max-width: calc(100% - 24px);
+  }
+
   .max-w-\[calc\(100vw-24px\)\] {
     max-width: calc(100vw - 24px);
   }
@@ -1103,6 +1159,10 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .rotate-180 {
+    rotate: 180deg;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1111,10 +1171,6 @@
     animation: .16s ease-out q-fade-in;
   }
 
-  .animate-\[q-pop_120ms_ease-out\] {
-    animation: .12s ease-out q-pop;
-  }
-
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1143,6 +1199,10 @@
     cursor: pointer;
   }
 
+  .cursor-text {
+    cursor: text;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -1349,6 +1409,11 @@
     border-radius: 3.40282e38px;
   }
 
+  .rounded-t-\[7px\] {
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
   .rounded-t-\[14px\] {
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
@@ -1364,6 +1429,11 @@
     border-width: 0;
   }
 
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1379,6 +1449,11 @@
     border-bottom-width: 1px;
   }
 
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1389,6 +1464,10 @@
     border-style: dashed;
   }
 
+  .border-action {
+    border-color: var(--action);
+  }
+
   .border-action-line {
     border-color: var(--action-line);
   }
@@ -1522,6 +1601,26 @@
     }
   }
 
+  .bg-surface\/80 {
+    background-color: var(--surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface\/80 {
+      background-color: color-mix(in oklab, var(--surface) 80%, transparent);
+    }
+  }
+
+  .bg-surface\/90 {
+    background-color: var(--surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface\/90 {
+      background-color: color-mix(in oklab, var(--surface) 90%, transparent);
+    }
+  }
+
   .bg-track {
     background-color: var(--track);
   }
@@ -1924,6 +2023,11 @@
     line-height: 1;
   }
 
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -1979,6 +2083,10 @@
     white-space: pre-wrap;
   }
 
+  .\!text-ok-text {
+    color: var(--ok-text) !important;
+  }
+
   .text-action {
     color: var(--action);
   }
@@ -2066,6 +2174,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[0_1px_3px_rgb\(0_0_0\/0\.08\)\] {
+    --tw-shadow: 0 1px 3px var(--tw-shadow-color, #00000014);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-\[inset_0_0_0_1px_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2091,6 +2204,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2121,14 +2239,32 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-\[background-color\,opacity\] {
-    transition-property: background-color, opacity;
+  .transition-\[background-color\,opacity\,scale\] {
+    transition-property: background-color, opacity, scale;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[color\,background-color\,scale\] {
+    transition-property: color, background-color, scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2208,12 +2344,6 @@
     user-select: none;
   }
 
-  @media (hover: hover) {
-    .group-hover\:opacity-100:is(:where(.group):hover *) {
-      opacity: 1;
-    }
-  }
-
   .placeholder\:text-muted::placeholder {
     color: var(--muted);
   }
@@ -2223,10 +2353,6 @@
     border-top-width: 0;
   }
 
-  .focus-within\:opacity-100:focus-within {
-    opacity: 1;
-  }
-
   .focus-within\:outline-2:focus-within {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -2282,6 +2408,14 @@
     background-color: var(--soft2);
   }
 
+  .active\:not-disabled\:scale-\[0\.94\]:active:not(:disabled) {
+    scale: .94;
+  }
+
+  .active\:not-disabled\:scale-\[0\.97\]:active:not(:disabled) {
+    scale: .97;
+  }
+
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -2437,6 +2571,10 @@
       flex-wrap: wrap;
     }
   }
+
+  .\[\&\>\:not\(\:first-child\)\]\:shrink-0 > :not(:first-child) {
+    flex-shrink: 0;
+  }
 }
 
 @font-face {
@@ -3007,9 +3145,9 @@
 }
 
 .canvas-overlay .section-title {
+  translate: 0 max(-100%, min(0px, calc(var(--body) * var(--z) * 1px - 44px)));
   padding-bottom: 8px;
   display: none;
-  translate: 0 -100%;
 }
 
 .canvas-overlay[data-titles="on"] .section-title {
@@ -3270,6 +3408,51 @@
   inherits: false
 }
 
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-duration {
   syntax: "*";
   inherits: false

package/dist/viewer-lib/types/src/shared/types.d.ts

@@ -326,6 +326,18 @@ export type RuntimeMessage = {
     type: 'keydown';
     code: string;
 }
+/**
+ * Where the pointer is in the frame, once the viewer asked with `pointer` (0.9.11+): on moves (at
+ * most once a frame), `down` on a press (a tap on a touch screen), -1, -1 when it leaves.
+ */
+ | {
+    source: 'design-runtime';
+    key: string;
+    type: 'pointer';
+    x: number;
+    y: number;
+    down: boolean;
+}
 /** ⌘/Ctrl pressed or released in the frame, or a key pressed while one is down. */
  | {
     source: 'design-runtime';
@@ -365,6 +377,11 @@ export type ViewerMessage = {
     source: 'design-viewer';
     type: 'canvas';
 }
+/** Report the pointer: the viewer shows its controls when the pointer nears them over the frame. */
+ | {
+    source: 'design-viewer';
+    type: 'pointer';
+}
 /** Inspect mode on or off; `tokens` let the frame name the tokens behind computed styles. */
  | {
     source: 'design-viewer';

package/dist/viewer-lib/types/viewer/src/app.d.ts

@@ -11,10 +11,17 @@ export interface DesignViewerProps {
     base?: string;
     /** The `sandbox` attribute for every frame; none when unset. */
     frameSandbox?: string;
+    /**
+     * The `allow` attribute (permissions policy) for every frame; `clipboard-read; clipboard-write;
+     * fullscreen` when unset, as the local viewer has it. A permission the user grants is the
+     * embedding page's and then holds for every frame, so a host that shows screens from others
+     * should grant less, such as `clipboard-write` alone.
+     */
+    frameAllow?: string;
     slots?: ViewerSlots;
     scope?: ViewerScope;
     /** Shared with the embedding app; the viewer makes its own when unset. */
     queryClient?: QueryClient;
 }
 /** The whole viewer: home, canvases, screens and the design system of one project. */
-export declare function DesignViewer({ source, base, frameSandbox, slots, scope, queryClient }: DesignViewerProps): import("react").JSX.Element;
+export declare function DesignViewer({ source, base, frameSandbox, frameAllow, slots, scope, queryClient, }: DesignViewerProps): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/components/corner-plate.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/**
+ * A plate in the top-right corner over a full-window frame. It shows while the screen loads and for a
+ * few seconds after, then fades out; a pointer in the window's top-right quarter brings it back and
+ * keeps it while it stays there, a tap there shows it for a while, and so does focus inside it.
+ *
+ * The page does not see the pointer over the frame, so the frame's runtime reports it (0.9.11+).
+ * Until a frame does (an older runtime, a URL item), the plate shows whenever the pointer is over the
+ * page, as before.
+ */
+export declare function CornerPlate({ frame, note, badge, children, }: {
+    frame: HTMLIFrameElement | null;
+    /** A muted line under the plate's controls: whose content the screen is. */
+    note?: ReactNode;
+    /**
+     * Instead of fading out, the plate folds into this small badge, which a click opens again: for pages
+     * anyone can open, so a screen can never pass for the app around it.
+     */
+    badge?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/components/error-boundary.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+/** One page that throws shows what went wrong in its place, instead of blanking the whole viewer. */
+export declare function PageBoundary({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/viewer-lib/types/viewer/src/components/markdown.d.ts

@@ -1,4 +1,7 @@
-/** http, https, mailto or relative. Browsers drop whitespace and control characters inside a scheme, so do we. */
+/**
+ * http, https, mailto or relative, read as the browser reads a URL (it drops whitespace and
+ * control characters inside a scheme, and so does URL parsing).
+ */
 export declare function isSafeHref(href: string): boolean;
 export declare function renderMarkdown(text: string): string;
 /** Markdown from the project's own files (guidelines, notes, descriptions). */

package/dist/viewer-lib/types/viewer/src/lib/frames.d.ts

@@ -23,13 +23,19 @@ export declare function reloadFrame(frame: HTMLIFrameElement | null): void;
  * process, so frames served from the viewer's twin host (localhost ↔ 127.0.0.1,
  * both reach the same server) run their scripts and animations off the viewer's
  * thread: a canvas full of live screens still pans smoothly. Any other host,
- * and static builds, keep frames on the viewer's origin.
+ * and static builds, keep frames on the viewer's origin. The dev server keeps
+ * its viewer on localhost and gives 127.0.0.1 to frames (server/hosts.ts).
  */
 export declare const FRAME_ORIGIN: string;
 /** A frame URL with the theme it should open in. */
 export declare function frameSrc(url: string, theme: Theme, extra?: Record<string, string>): string;
 /** Absolute URL for opening a frame in a new tab. */
 export declare function absoluteUrl(url: string): string;
+/** A screen a link can lead to: its id and the app routes it shows. */
+export interface LinkTarget {
+    id: string;
+    routes?: string[];
+}
 /**
  * A link, form or history push the runtime kept from leaving its frame. The path goes to the
  * screen whose `route` matches it best (a relative `href` resolves against the route of the
@@ -39,5 +45,7 @@ export declare function absoluteUrl(url: string): string;
  */
 export declare function followLink(message: Extract<RuntimeMessage, {
     type: 'link';
-}>, canvas: CanvasDoc, go: (id: string) => void, from?: string): void;
+}>, canvas: CanvasDoc | LinkTarget[], go: (id: string) => void, from?: string, 
+/** A link to a path no screen has; a toast says so by default. */
+missing?: (path: string) => void): void;
 export {};

package/dist/viewer-lib/types/viewer/src/lib/messages.d.ts

@@ -0,0 +1,12 @@
+import type { RuntimeMessage } from '../../../src/shared/types';
+/**
+ * Frames run code anyone who can push wrote, and any of them may post the viewer anything: a
+ * message only reaches the viewer's handlers with the fields its type has, of their types.
+ * Strings are cut and sizes kept within reason, so a frame cannot swell the viewer's state.
+ */
+export declare const MAX_FRAME_SIZE = 100000;
+export declare const MAX_FRAME_ERRORS = 20;
+/** `data` as a runtime message, with its sizes and texts bounded; null when it is none. */
+export declare function readRuntimeMessage(data: unknown): RuntimeMessage | null;
+/** A frame's error list with `message` added: once, and no more than `MAX_FRAME_ERRORS` of them. */
+export declare function withError(list: string[], message: string): string[];

package/dist/viewer-lib/types/viewer/src/lib/viewer.d.ts

@@ -1,3 +1,4 @@
+import type { CanvasItem } from '../../../src/shared/types';
 import { type ReactNode } from 'react';
 import type { ViewerSource } from './source';
 /** Places where an app that embeds the viewer adds its own controls. */
@@ -28,6 +29,18 @@ export interface ViewerSlots {
     canvasesAfter?: ReactNode;
     /** Below the panels of the home page, full width. */
     homeAfter?: ReactNode;
+    /** In the bar of the item selected on a canvas, before the way to zoom to it: sharing that screen, say. */
+    selectionActions?: (canvasId: string, item: CanvasItem) => ReactNode;
+    /**
+     * On a screen's full-window page, the corner plate with the way out: `note` is a muted line under it
+     * (whose content the screen is), `actions` sit next to the way out, and with `badge` the plate folds
+     * into that badge instead of fading out (pages anyone can open).
+     */
+    fullPlate?: {
+        note?: ReactNode;
+        actions?: ReactNode;
+        badge?: ReactNode;
+    };
 }
 /** Single-canvas mode: only this canvas is reachable, without the design system or other canvases. */
 export interface ViewerScope {
@@ -43,10 +56,14 @@ export declare function viewerKeys(id: string): {
     source: (unit: string, path: string) => readonly ['design', string, 'source', string, string];
 };
 export type ViewerKeys = ReturnType<typeof viewerKeys>;
+/** What frames of the local viewer may use: the clipboard, both ways, and fullscreen. */
+export declare const DEFAULT_FRAME_ALLOW = "clipboard-read; clipboard-write; fullscreen";
 export interface Viewer {
     source: ViewerSource;
     keys: ViewerKeys;
     frameSandbox?: string;
+    /** The `allow` attribute (permissions policy) of every frame. */
+    frameAllow: string;
     slots: ViewerSlots;
     scope: ViewerScope | null;
 }

package/dist/viewer-lib/types/viewer/src/library.d.ts

@@ -1,11 +1,13 @@
-export type { AssetDoc, CanvasDoc, CanvasItem, CanvasPage, CanvasSection, CanvasSummary, ComponentDoc, FrameSize, GuidelineDoc, ImageItem, Issue, NoteItem, ProjectInfo, ScreenItem, SystemDoc, SystemSummary, Theme, Token, TokenKind, TokenValue, UrlItem, } from '../../src/shared/types';
+export type { AssetDoc, CanvasDoc, CanvasItem, CanvasPage, CanvasSection, CanvasSummary, ComponentDoc, FrameSize, GuidelineDoc, ImageItem, Issue, NoteItem, ProjectInfo, RuntimeMessage, ScreenItem, SystemDoc, SystemSummary, Theme, Token, TokenKind, TokenValue, UrlItem, } from '../../src/shared/types';
 export { DesignViewer, type DesignViewerProps } from './app';
+export { CornerPlate } from './components/corner-plate';
 export { SlidePanel } from './components/slide-panel';
 export { ThemeMenu } from './components/theme-menu';
 export { Bar, useBarCompact } from './components/topbar';
 export { Mark, Wordmark } from './components/wordmark';
 export { cn } from './lib/cn';
 export { copyText } from './lib/copy';
+export { followLink, frameSrc, type LinkTarget, listenToFrame, sendTheme } from './lib/frames';
 export { useIsPhone } from './lib/phone';
 export { ApiError, localSource, resolveUrl, staticSource, type ViewerSource } from './lib/source';
 export { setThemePref, type ThemePref, useTheme, useThemePref } from './lib/theme';
@@ -14,6 +16,8 @@ export { Avatar, initials } from './ui/avatar';
 export { Badge, Count, type Tone } from './ui/badge';
 export { Button, ButtonAnchor, type ButtonKind, ButtonLink, type ButtonProps, buttonClass, IconButton, type IconButtonProps, iconButtonClass, } from './ui/button';
 export { Segmented, Switch } from './ui/choice';
+export { Combobox, type ComboboxOption } from './ui/combobox';
+export { CopyButton } from './ui/copy-button';
 export { Dialog } from './ui/dialog';
 export { Icon, type IconName } from './ui/icon';
 export { floatingSurface, Menu, MenuItem, MenuLabel, MenuSeparator, menuItemClass, menuSurface } from './ui/menu';

package/dist/viewer-lib/types/viewer/src/pages/canvas/canvas-bar.d.ts

@@ -13,7 +13,7 @@ export declare function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSid
     inspect: boolean;
     onInspect(value: boolean): void;
 }): import("react").JSX.Element;
-/** The selected item's name and actions, floating over the bottom of the canvas. */
+/** The selected item's name and actions, floating over the bottom of the canvas; it eases in and out. */
 export declare function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect, }: {
     canvas: CanvasDoc;
     store: ViewStore;
@@ -21,7 +21,7 @@ export declare function SelectionBar({ canvas, store, layoutItems, theme, onPlay
     theme: Theme;
     onPlay(id: string): void;
     inspect: boolean;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;
 /** The inspect mode switch: a button that stays pressed while on. */
 export declare function InspectToggle({ on, onChange, compact, }: {
     on: boolean;

package/dist/viewer-lib/types/viewer/src/pages/canvas/full-page.d.ts

@@ -7,7 +7,7 @@ export declare const fullHref: (canvas: string, item: string, theme: Theme) => s
  * tab gets the full-window page of the viewer; otherwise the screen's own URL.
  */
 export declare function useOpenUrl(canvasId: string, item: Frame | undefined, theme: Theme): string | null;
-/** `/c/:canvas/full/:item`: one screen filling the window, a way out on hover and Esc. */
+/** `/c/:canvas/full/:item`: one screen filling the window, a way out in the top-right corner and on Esc. */
 export declare function FullPage({ canvasId, itemId }: {
     canvasId: string;
     itemId: string;

package/dist/viewer-lib/types/viewer/src/pages/canvas/layout.d.ts

@@ -8,6 +8,8 @@ export interface PlacedSection extends Rect {
     section: CanvasSection;
     /** Height of the title/description block above the row. */
     header: number;
+    /** How far below the section's top its first row starts. */
+    body: number;
 }
 export interface Layout {
     items: Placed[];