foss-design 0.9.9 → 0.9.11

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,13 @@
     --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;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: "IBM Plex Sans", system-ui, sans-serif;
@@ -442,6 +453,10 @@
     position: sticky;
   }
 
+  .-inset-px {
+    inset: -1px;
+  }
+
   .inset-0 {
     inset: 0;
   }
@@ -470,6 +485,10 @@
     top: 50%;
   }
 
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -482,6 +501,10 @@
     top: 52px;
   }
 
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1033,6 +1056,10 @@
     max-width: 1440px;
   }
 
+  .max-w-\[calc\(100\%-24px\)\] {
+    max-width: calc(100% - 24px);
+  }
+
   .max-w-\[calc\(100vw-24px\)\] {
     max-width: calc(100vw - 24px);
   }
@@ -1364,6 +1391,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;
@@ -1389,6 +1421,10 @@
     border-style: dashed;
   }
 
+  .border-action {
+    border-color: var(--action);
+  }
+
   .border-action-line {
     border-color: var(--action-line);
   }
@@ -1522,6 +1558,16 @@
     }
   }
 
+  .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 +1970,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 +2030,10 @@
     white-space: pre-wrap;
   }
 
+  .\!text-ok-text {
+    color: var(--ok-text) !important;
+  }
+
   .text-action {
     color: var(--action);
   }
@@ -2066,6 +2121,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 +2151,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 +2186,26 @@
     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-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 +2285,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 +2294,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 +2349,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;
   }
@@ -3270,6 +3345,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/source.d.ts

@@ -37,9 +37,15 @@ export declare class ApiError extends Error {
 export declare const localSource: ViewerSource;
 /** The JSON files of a `design build` site, relative to its root. */
 export declare const staticSource: ViewerSource;
-/** `url` against a unit's base; an empty base leaves it as the doc has it. */
+/**
+ * `url` against a unit's base, or '' when it may not be loaded. Docs come from builds anyone who
+ * can push has written, so a URL is only kept when it is http(s) and, for a unit build, inside
+ * that unit's base: a `javascript:` frame source would run with the viewer's own origin.
+ */
 export declare function resolveUrl(url: string, base: string): string;
-/** A canvas with its frame, snapshot and image URLs resolved against its unit's base. */
+/** An external page for a `url` item: http or https only. */
+export declare function externalUrl(url: string): string;
+/** A canvas with its frame, snapshot and image URLs resolved against its unit's base, unsafe ones dropped. */
 export declare function resolveCanvas(doc: CanvasDoc, base: string): CanvasDoc;
 /** A design system with its specimen and asset URLs resolved against the system unit's base. */
 export declare function resolveSystem(doc: SystemDoc, base: string): SystemDoc;

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

@@ -28,6 +28,16 @@ export interface ViewerSlots {
     canvasesAfter?: ReactNode;
     /** Below the panels of the home page, full width. */
     homeAfter?: 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 +53,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,7 @@ 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 { 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/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/ui/copy-button.d.ts

@@ -0,0 +1,7 @@
+/** A ghost "Copy" button that turns into "Copied" with a check for a moment after it copies. */
+export declare function CopyButton({ text, label, done, className, }: {
+    text: string;
+    label?: string;
+    done?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /**
  * A modal over a dimmed page: focus stays inside until it closes, Escape and a
  * click outside close it. Head and foot are a panel's; `actions` go to the foot.
  * On a phone it is a sheet from the bottom edge with a handle: swiping it down closes it too.
  */
-export declare function Dialog({ open, onOpenChange, title, description, children, actions, footNote, below, width, }: {
+export declare function Dialog({ open, onOpenChange, title, description, children, actions, footNote, below, width, step, }: {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: ReactNode;
@@ -18,4 +18,9 @@ export declare function Dialog({ open, onOpenChange, title, description, childre
     /** Full-width content under the body, scrolling on its own: lists with row borders. */
     below?: ReactNode;
     width?: number;
+    /**
+     * The dialog's current step, for a dialog that turns into another one in place (a confirmation
+     * that becomes its result): a new value cross-fades the content while the panel eases to its size.
+     */
+    step?: string;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "description": "Design canvases and design systems for coding agents: live, animated, clickable screens on an infinite canvas, served locally from a .design folder.",
   "type": "module",
   "license": "MIT",