@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/shell.js

@@ -1,166 +1,2 @@
-import { t as Root } from "./root-qEh4u7y5.js";
-import { c } from "react/compiler-runtime";
-import { token } from "@stealthscale/theme";
-import { jsx } from "react/jsx-runtime";
-import { ColorSwatch } from "@stealthscale/component-data";
-import { useLocale } from "@stealthscale/provider-locale";
-import { useThemeChoice } from "@stealthscale/provider-shell";
-//#region src/locale-switcher/endonym.ts
-/**
-* Writes a locale's name in its own language, and the short mark a switcher shows beside it.
-*/
-/**
-* Matches the region and every subtag after the language in a tag.
-*/
-const AFTER_LANGUAGE = /-.*$/u;
-/**
-* Returns a locale's name in its own language, `Nederlands` for `nl`, or the tag where the runtime
-* has no name for it.
-*
-* @remarks
-*   `Intl.DisplayNames` runs with `fallback: "none"`, so it returns undefined for a tag it cannot
-*   name, and it throws for a malformed tag. The function returns the tag in both cases.
-* @param tag - The locale, as a BCP 47 tag.
-* @returns The name in its own language, or the tag.
-*/
-function endonymOf(tag) {
-	try {
-		return new Intl.DisplayNames([tag], {
-			fallback: "none",
-			type: "language"
-		}).of(tag) ?? tag;
-	} catch {
-		return tag;
-	}
-}
-/**
-* Returns a locale's language subtag in capitals, `NL` for `nl-BE`.
-*
-* @param tag - The locale, as a BCP 47 tag.
-* @returns The language subtag in capitals.
-*/
-function markOf(tag) {
-	return tag.replace(AFTER_LANGUAGE, "").toUpperCase();
-}
-//#endregion
-//#region src/locale-switcher/locale-switcher.tsx
-/**
-* Renders `Switcher.Root` with a row per locale on offer, and switches to the locale a person
-* picks.
-*
-* @param props - The control's name and the switcher's props.
-* @returns The switcher, or nothing where the application offers one locale.
-*/
-function LocaleSwitcher(t0) {
-	const $ = c(11);
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({label: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
-	} else {
-		props = $[1];
-		t1 = $[2];
-	}
-	const label = t1 === void 0 ? "Language" : t1;
-	const { locale, locales, setLocale } = useLocale();
-	if (locales.length < 2) return null;
-	let t2;
-	if ($[3] !== locales) {
-		t2 = locales.map(_temp$1);
-		$[3] = locales;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== label || $[6] !== locale || $[7] !== props || $[8] !== setLocale || $[9] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Root, {
-			...props,
-			items: t2,
-			label,
-			onValueChange: setLocale,
-			value: locale
-		});
-		$[5] = label;
-		$[6] = locale;
-		$[7] = props;
-		$[8] = setLocale;
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
-}
-function _temp$1(tag) {
-	return {
-		label: endonymOf(tag),
-		mark: markOf(tag),
-		value: tag
-	};
-}
-//#endregion
-//#region src/theme-switcher/theme-switcher.tsx
-/**
-* Colour of a theme's swatch: the primary solid of the theme in the swatch's `data-theme`.
-*/
-const PRIMARY = token.var("colors.primary.solid");
-/**
-* Renders `Switcher.Root` with a row per theme on offer, and switches to the theme a person picks.
-*
-* @param props - The control's name and the switcher's props.
-* @returns The switcher, or nothing where the application offers fewer than two themes.
-*/
-function ThemeSwitcher(t0) {
-	const $ = c(11);
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({label: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
-	} else {
-		props = $[1];
-		t1 = $[2];
-	}
-	const label = t1 === void 0 ? "Theme" : t1;
-	const { setTheme, theme, themes } = useThemeChoice();
-	if (themes.length < 2) return null;
-	let t2;
-	if ($[3] !== themes) {
-		t2 = themes.map(_temp);
-		$[3] = themes;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== label || $[6] !== props || $[7] !== setTheme || $[8] !== t2 || $[9] !== theme) {
-		t3 = /* @__PURE__ */ jsx(Root, {
-			...props,
-			items: t2,
-			label,
-			onValueChange: setTheme,
-			value: theme
-		});
-		$[5] = label;
-		$[6] = props;
-		$[7] = setTheme;
-		$[8] = t2;
-		$[9] = theme;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
-}
-function _temp(name) {
-	return {
-		label: name,
-		mark: /* @__PURE__ */ jsx(ColorSwatch, {
-			"data-theme": name,
-			shape: "circle",
-			size: "inherit",
-			value: PRIMARY
-		}),
-		value: name
-	};
-}
-//#endregion
+import { n as LocaleSwitcher, t as ThemeSwitcher } from "./shared-DxlFabHA.js";
 export { LocaleSwitcher, ThemeSwitcher };

package/dist/theme.js

@@ -1,5 +1,4 @@
-import { d as recipe$1, i as recipe$4, l as recipe$3, n as recipe$6, r as recipe$5, t as recipe$7, u as recipe$2, w as recipe } from "./recipe-sZAQY6Kq.js";
-import { t as recipe$8 } from "./recipe-DRMsitrw.js";
+import { O as recipe, a as recipe$4, h as recipe$1, i as recipe$5, m as recipe$2, n as recipe$7, r as recipe$6, t as recipe$8, u as recipe$3 } from "./recipes-Cmy1leBm.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**
@@ -20,8 +19,8 @@ var theme_default = definePreset({
 		section: recipe$4,
 		sidebar: recipe$5,
 		splitter: recipe$6,
-		switcher: recipe$8,
-		toolbar: recipe$7
+		switcher: recipe$7,
+		toolbar: recipe$8
 	} } }
 });
 //#endregion

package/locales/en/specimen/action-bar.json

@@ -0,0 +1,46 @@
+{
+  "about": "The action bar is fixed to the bottom of the window and offers the actions for what a person has selected. It opens while anything is selected and leaves focus on the selection. A screen reader announces it once as it opens. Escape inside the bar and its close button clear the selection, and focus returns to the checkbox that opened it.",
+  "clear": "Clear selection",
+  "photos": {
+    "about": "The bar at the end of the window offers four actions. In a narrow window the toolbar moves the two actions without an icon into its More menu and shows only the icon of Download. Share is the primary action and keeps its words.",
+    "album": "Add to album",
+    "announcement": "Photo actions available",
+    "count": "{{count}} selected",
+    "done_one": "{{action}}: {{count}} photo.",
+    "done_other": "{{action}}: {{count}} photos.",
+    "download": "Download",
+    "label": "Actions for the selected photos",
+    "more": "More actions",
+    "names": {
+      "bridge": "Bridge at night",
+      "garden": "Roof garden",
+      "harbour": "Harbour at dawn",
+      "market": "Flower market",
+      "square": "Town square",
+      "tower": "Clock tower"
+    },
+    "share": "Share",
+    "title": "Folding",
+    "trash": "Move to trash"
+  },
+  "placement": {
+    "about": "Placement puts the bar at the start, in the middle or at the end of the bottom edge of the window. Start and end follow the writing direction. Select an invoice in a cell to open its bar.",
+    "title": "Placement"
+  },
+  "selection": {
+    "count": "{{count}} selected",
+    "download": {
+      "done_one": "Downloaded {{count}} invoice.",
+      "done_other": "Downloaded {{count}} invoices.",
+      "label": "Download"
+    },
+    "invoice": "Invoice {{number}}",
+    "label": "Actions for the selected invoices",
+    "mark": {
+      "done_one": "Marked {{count}} invoice as paid.",
+      "done_other": "Marked {{count}} invoices as paid.",
+      "label": "Mark as paid"
+    }
+  },
+  "title": "Action bar"
+}

package/locales/en/specimen/app-shell.json

@@ -0,0 +1,288 @@
+{
+  "about": "Lays an application out: bars across the top and the bottom, as many as it renders, and a body between them with panels on either side of the page, as many as it renders. Each panel states its width, how it closes and when it folds, and the root states what scrolls and which look. A shell reads on a phone without being told: the navbar folds below the `md` breakpoint and the aside below `lg`. Fourteen applications here, each laid out on the one shell.",
+  "accounts": "Accounts",
+  "accountsWhen": "To you · today at 08:52",
+  "add": "Add",
+  "addCard": "Add card",
+  "agents": "3 agents idle",
+  "agreementNorthwind": "Northwind master agreement",
+  "approvals": "Approvals",
+  "apps": "Apps",
+  "archive": "Archive",
+  "artist": "Artist",
+  "assignee": "Assignee",
+  "basket": "Basket (2)",
+  "billing": {
+    "about": "Bars stack in the order they render, each as tall as its content: a notice above the toolbar.",
+    "title": "A billing console, a notice above the toolbar"
+  },
+  "billingBrand": "Billing",
+  "bot": "Deploy bot",
+  "bowl": "Serving bowl",
+  "bowlAbout": "Hand thrown, 24 cm across",
+  "branch": "Branch",
+  "brokeOne": "Retries broke first. A slow partner bank made each worker retry the same payout, and the queue grew faster than we drained it.",
+  "brokeTwo": "Idempotency keys stopped the duplicate payments, but the delays remained. We moved each partner to a queue of its own.",
+  "buildFailed": "Your build failed",
+  "buildFailedFrom": "Ledger · yesterday",
+  "byline": "Mara Okafor · 6 min read",
+  "calendarApp": "Calendar",
+  "canary": "Canary looks clean, error rate flat.",
+  "canvas": {
+    "about": "The floating look raises each panel's content as a card with a margin around it, and the canvas runs behind. The layers close from the menu button and the properties from Details.",
+    "title": "A design tool, panels afloat"
+  },
+  "canvasLayer": "Canvas",
+  "card": "Card number",
+  "channels": "Channels",
+  "chat": {
+    "about": "Panels render across in order, each with its own width and named for its triggers. The rail of workspaces never folds. The panel of channels beside it closes from the menu button and folds below the `md` breakpoint, as a navbar does by default.",
+    "title": "A chat client, a rail beside the channels"
+  },
+  "checkout": {
+    "about": "A header and the page alone. A part that is not rendered takes no room, so a checkout states nothing about the navigation it does not have.",
+    "title": "A checkout, header and page alone"
+  },
+  "choosePlan": "Choose a plan",
+  "clock": "09:14",
+  "closing": "Nice. Closing the release ticket.",
+  "code": "Security code",
+  "compose": "Compose",
+  "connected": "Connected",
+  "console": {
+    "about": "A toolbar, a sidebar of pages with a search, the page, an aside and a status bar. The menu button, the rail on the navbar's edge and ⌘B close the navbar to icons, and the sidebar follows. Details closes the aside. The navbar leaves the body below the `sm` breakpoint here and the aside below `lg`, and each opens over the page from its control. The status bar lays its entries out in a row at the foot of the shell.",
+    "title": "An operations console"
+  },
+  "contents": "Contents",
+  "contracts": "Contracts",
+  "cta": "Call to action",
+  "deployed": "Deploy 4128 finished in 4m 12s.",
+  "deploys": "deploys",
+  "details": "Details",
+  "direct": "Direct messages",
+  "draft": "Draft — landing page",
+  "duration": "Duration",
+  "email": "Email",
+  "environments": "Environments",
+  "expiry": "Expiry date",
+  "failed": "Failed",
+  "fieldNotes": "Field notes",
+  "files": {
+    "about": "The application keeps the folders' width in its own state through `size` and `onSizeChange`, and the bar shows the width. Drag the rail on the folders' edge, or focus it and press the arrow keys, to resize the folders between `minSize` and `maxSize`, 200 and 360px here. Reset width sets the width back to 240px. Below the `md` breakpoint the folders open over the page from the menu button.",
+    "title": "A file browser, the folders' width in the application's state"
+  },
+  "filesApp": "Files",
+  "fill": "Fill",
+  "filter": "Filter…",
+  "findPage": "Find a page",
+  "fleet": "Promoting to the full fleet.",
+  "folders": "Folders",
+  "foldersWidth": "Folders {{width}}px",
+  "footerLayer": "Footer",
+  "forward": "Forward",
+  "general": "general",
+  "gettingStarted": "Getting started",
+  "handbook": {
+    "about": "A bar renders where it is placed: in a pane it spans the page alone, and the navbar runs the full height of the shell beside it. The header and the footer in the pane are the page's banner and footer, and the page scrolls between them. The inset look raises the pane as a card on a muted ground.",
+    "title": "A handbook, sidebar first and page inset"
+  },
+  "handbookBrand": "Handbook · Working here",
+  "handbookName": "Handbook",
+  "headerLayer": "Header",
+  "height": "Height",
+  "hero": "Hero image",
+  "heroAction": "Start a free trial",
+  "heroBody": "Ledger runs your releases, checks every deploy and rolls back when an error rate climbs.",
+  "heroTitle": "Ship on a Friday",
+  "hours": "Hours",
+  "hoursOne": "Core hours run from 10:00 to 16:00 in your own time zone. Outside them, plan your day around your work and your life.",
+  "hosts": "60% of hosts run 4.2.",
+  "hoursTwo": "Put leave and appointments in the team calendar, so nobody waits on you for an answer.",
+  "idempotency": "Idempotency keys",
+  "inProgress": "In progress",
+  "inbox": "Inbox",
+  "incidents": "incidents",
+  "invoiceBody": "Hi, the invoice from March has not been settled. Could you have a look?",
+  "invoiceOverdue": "Invoice 2041 is overdue",
+  "invoiceOverdueFrom": "Accounts · 08:52",
+  "invoiceThanks": "Thanks, the accounts team",
+  "invoices": "Invoices",
+  "invoicesAppear": "Invoices appear here when your first billing period closes.",
+  "issue": "Issue 412",
+  "issueOne": "A card payment that times out at the bank is retried with a new idempotency key, so the bank charges the card a second time.",
+  "issueTitle": "Retries charge a card twice",
+  "issueTwo": "Every retry of one payment must reuse the key of its first attempt.",
+  "issueUpdated": "Updated 12 minutes ago by Jonas",
+  "jonas": "Jonas",
+  "journal": {
+    "about": "While the window scrolls, a panel sticks under the pinned bars and is as tall as the room they leave, so the contents reach the bottom of the window however far the article has scrolled.",
+    "title": "A journal, the contents stuck under the masthead"
+  },
+  "journalBrand": "The Ledger Journal",
+  "jug": "Milk jug",
+  "jugAbout": "Pours without a drip, 500 ml",
+  "jumpTo": "Jump to…",
+  "keptOne": "We kept the ledger. Every payout is still written once, and every retry reads it before it sends anything.",
+  "keptTwo": "We also kept the alerts. They fire on the age of the oldest message, which is what a customer notices.",
+  "layers": "Layers",
+  "live": "Canary 4.2 takes 5% of traffic.",
+  "leave": "Leave",
+  "ledger": "Ledger",
+  "length": "Length",
+  "library": "Library",
+  "lunch": "Lunch?",
+  "lunchFrom": "Jonas Berg · yesterday",
+  "mail": {
+    "about": "The folders close to icons: the track moves to the rail's width and remains in reach, and the sidebar inside it renders its rows as icons. Press the menu button or the rail on its edge to see the track move. The list beside it is a second panel, and the message is the page.",
+    "title": "A mail client, folders closing to icons"
+  },
+  "mailApp": "Mail",
+  "mara": "Mara",
+  "meetings": "Meetings",
+  "meetingsOne": "Every meeting has an agenda in its invite and ends five minutes early. A meeting without an agenda is cancelled.",
+  "meetingsTwo": "Decisions are made in the document, not in the call. The call is for the questions the document leaves open.",
+  "message": "Message",
+  "messageActions": "Message actions",
+  "messageDeploys": "Message #deploys",
+  "moreFiles": "More file actions",
+  "movedOne": "For three years every payout went through one queue. It was simple to run and easy to reason about, until the day it was neither.",
+  "movedQuote": "A queue hides its backlog until the backlog is the problem.",
+  "movedTwo": "We replaced it with one queue per partner bank, so a slow partner delays only its own payouts.",
+  "mug": "Stoneware mug",
+  "mugAbout": "Speckled glaze, 350 ml",
+  "mugs": "Stoneware mug × 2",
+  "navigation": "Navigation",
+  "newIn": "New in",
+  "newRun": "New run",
+  "next": "Next track",
+  "nextOne": "Next we move refunds onto the same design, and add a dashboard with the age of every queue.",
+  "nextTwo": "If you run a service that sends money, the runbook for the new queues is in the handbook under On call.",
+  "noInvoices": "No invoices yet",
+  "noRoom": "No rooms match",
+  "northwind": "Northwind",
+  "notifications": "Notifications",
+  "notificationsAbout": "Choose which notifications you get, and when.",
+  "notifyDigest": "Everything else comes in one digest at 08:00.",
+  "notifyMentions": "You get mentions and replies at once, on every device.",
+  "notifyQuiet": "You get no notification between 20:00 and 07:00.",
+  "offsite": "Re: the offsite",
+  "offsiteFrom": "Mara Okafor · 07:40",
+  "onCall": "On call",
+  "opened": "Opened",
+  "openedWhen": "Yesterday at 16:20",
+  "operations": "Operations",
+  "orderLedger": "Ledger order form",
+  "outage": "The outage of May",
+  "overview": "Overview",
+  "passed": "Passed",
+  "pause": "Pause",
+  "pay": "Pay £48.00",
+  "payment": "Payment",
+  "pipelines": "Pipelines",
+  "plan": "Plan",
+  "plate": "Side plate",
+  "plateAbout": "Matte white, set of two",
+  "platform": "Platform",
+  "playback": "Playback",
+  "played": "2:41 of 4:05",
+  "player": {
+    "about": "A footer told to stick pins to the bottom of the window while the page scrolls, so the player remains in reach however far the library has scrolled.",
+    "title": "A music player, the player pinned to the bottom"
+  },
+  "playlists": "Playlists",
+  "position": "Playback position",
+  "post": "Post",
+  "previous": "Previous track",
+  "priority": "Priority",
+  "priorityHigh": "High",
+  "profile": "Profile",
+  "projectCheckout": "Checkout",
+  "projectPayouts": "Payouts",
+  "projectSearch": "Search",
+  "projects": "Projects",
+  "properties": "Properties",
+  "push": "push to main",
+  "quality": "Quality",
+  "queues": "Queues",
+  "radio": "Radio",
+  "reader": {
+    "about": "Two columns and no navbar: the article is the page, and the notes that go with it are an aside told to fold under. The root constrains the page's content to the theme's wide page measure, centred in the main region. Below the `lg` breakpoint the aside drops under the article as a block, the way related notes read on a phone, and its trigger renders nothing, because there is nothing to open.",
+    "title": "A reader, the page and a column beside it"
+  },
+  "receipts": "Receipts",
+  "related": "Related",
+  "relay": "Relay",
+  "reliability": "Reliability",
+  "renewalRelay": "Relay renewal",
+  "replace": "Replace",
+  "reply": "Reply",
+  "reports": "Reports",
+  "resetWidth": "Reset width",
+  "resizeFolders": "Resize the folders",
+  "resizeSections": "Resize the settings",
+  "resolve": "Resolve",
+  "retries": "Retries done right",
+  "rolling": "Rolling 4.2 to eu-west-1 now.",
+  "run": "Run",
+  "run4128": "Run #4128",
+  "runs": "Runs",
+  "searchProducts": "Search products",
+  "secure": "Secure checkout",
+  "security": "Security",
+  "send": "Send",
+  "sent": "Sent",
+  "settings": "Settings",
+  "share": "Share",
+  "shipping": "Shipping",
+  "spam": "Spam",
+  "starred": "Starred",
+  "started": "Started",
+  "starting": "Starting the canary in eu-west-1.",
+  "status": "Status",
+  "statusBar": "Status",
+  "stealth": "Stealth Scale",
+  "storefront": {
+    "about": "Told that the window scrolls, the root grows with the page and the window scrolls. A bar told to stick pins to the top while the page scrolls by. Here the window is a box of a stated height.",
+    "title": "A storefront, the toolbar pinned"
+  },
+  "subscribe": "Subscribe",
+  "suite": {
+    "about": "Two panels at the start: a rail of apps, and the sidebar of the app on screen. The header is in a pane beside them, so both panels run the full height of the shell and the header spans the page alone. Drag the sidebar's edge, or focus it and press the arrow keys, to resize the sidebar. Below the `md` breakpoint the rail leaves the shell, a bar of the apps at the foot of the pane replaces it, and the sidebar opens over the page from the menu button.",
+    "title": "An office suite, a rail of apps beside the app's sidebar"
+  },
+  "summary": "Order summary",
+  "tagged": "Morning. Release 4.2 is tagged.",
+  "teapot": "Teapot",
+  "teapotAbout": "Brews four cups, with a steel strainer",
+  "thanks": "Thanks, both.",
+  "time": "2:41 / 4:05",
+  "title": "App shell",
+  "took": "4m 12s",
+  "tools": "Tools",
+  "total": "Total",
+  "trackTitle": "Title",
+  "tracker": {
+    "about": "`AppShell.Pane` is the column between the panels at the start and the panels at the end. It contains the header, the main region and the footer, so the bars span the page alone, and the projects and the details run the full height of the shell. The header in the pane is the banner landmark, and the main region scrolls under it. Below the `md` breakpoint the projects open over the page from the menu button, and below `lg` the details open from their button.",
+    "title": "An issue tracker, the bars in a pane between the panels"
+  },
+  "tracks": "Tracks",
+  "trialEnds": "Your trial ends in 4 days.",
+  "trigger": "Trigger",
+  "update": "Last updated 3 days ago by Mara",
+  "usage": "Usage",
+  "vase": "Bud vase",
+  "vaseAbout": "Ash glaze, 18 cm tall",
+  "vat": "VAT",
+  "version": "v4.2 · eu-west-1",
+  "whatBroke": "What broke first",
+  "whatKept": "What we kept",
+  "whatNext": "What is next",
+  "whyMoved": "Why we moved off the queue",
+  "width": "Width",
+  "workingHere": "Working here",
+  "workingHereAbout": "How we plan the week, when we meet, and how decisions are written down.",
+  "workspaces": "Workspaces",
+  "writing": "Writing things down",
+  "writingOne": "Write a proposal before you build anything that takes more than a week. Keep it to one page, with the problem first.",
+  "writingTwo": "Link the proposal from the ticket, so the next person finds the reasoning without asking."
+}

package/locales/en/specimen/floating-panel.json

@@ -0,0 +1,70 @@
+{
+  "about": "A floating panel is a window over the page that a person opens from a trigger, moves by its header and resizes from its edges and corners. The page around it remains in use. Minimize leaves the header, Maximize fills the window and Restore returns the panel to its size and place. While the panel itself has focus, the arrow keys move it and Alt with an arrow resizes it. Escape closes the panel in front.",
+  "close": "Close",
+  "controlled": {
+    "about": "The application keeps the open state and the size in its own state. It passes them as open and size, and takes each change from onOpenChange and onSizeChange. The line under the button reports the place and the size. Reset in the panel restores the first size.",
+    "body": "Resize the panel from an edge, then reset it.",
+    "heading": "Size",
+    "place": "At {{x}}, {{y}}, {{width}} by {{height}} pixels",
+    "reset": "Reset the size",
+    "title": "Controlled open state and size",
+    "trigger": "Size"
+  },
+  "inspector": {
+    "about": "The panel opens under its trigger through getAnchorPosition and contains form fields. Tab moves from the trigger into the panel and from the panel's last field to the page after the trigger.",
+    "height": "Height",
+    "heading": "Layer",
+    "locked": "Lock the layer",
+    "name": "Name",
+    "title": "Anchored to the trigger",
+    "trigger": "Layer",
+    "value": "Hero image",
+    "width": "Width"
+  },
+  "maximize": "Maximize",
+  "minimize": "Minimize",
+  "notes": {
+    "about": "The panel opens in the middle of the window. Drag the header to move it and any edge or corner to resize it. Minimize leaves the header, Maximize fills the window, and a double click on the header maximizes and restores it.",
+    "body": "The launch moves to the first week of November. Marketing needs the final screenshots by the end of October.",
+    "heading": "Launch notes",
+    "title": "Stages and resizing",
+    "trigger": "Notes"
+  },
+  "preview": {
+    "about": "The panel keeps its proportions as it resizes, between 240 and 640 pixels wide.",
+    "ada": "Ada Lovelace",
+    "heading": "Call with Ada",
+    "leave": "Leave the call",
+    "speaking": "Ada Lovelace is speaking",
+    "title": "Locked aspect ratio",
+    "trigger": "Join the call"
+  },
+  "restore": "Restore",
+  "snapped": {
+    "about": "The panel moves and resizes in steps of 16 pixels, remains inside the window, and is between 256 and 480 pixels wide.",
+    "heading": "Shortcuts",
+    "shortcuts": {
+      "bold": { "keys": "Ctrl+B", "label": "Bold" },
+      "italic": { "keys": "Ctrl+I", "label": "Italic" },
+      "link": { "keys": "Ctrl+K", "label": "Link" },
+      "undo": { "keys": "Ctrl+Z", "label": "Undo" }
+    },
+    "title": "Grid and limits",
+    "trigger": "Shortcuts"
+  },
+  "stacked": {
+    "about": "Two panels open side by side. A press or focus in a panel brings it in front, and Escape closes the panel in front.",
+    "history": {
+      "body": "Seven edits since the last save.",
+      "heading": "History",
+      "trigger": "History"
+    },
+    "layers": {
+      "body": "Three layers: the title, the image and the background.",
+      "heading": "Layers",
+      "trigger": "Layers"
+    },
+    "title": "Stacked panels"
+  },
+  "title": "Floating panel"
+}

package/locales/en/specimen/locale-switcher.json

@@ -0,0 +1,15 @@
+{
+  "about": "A locale switcher changes the language an application is read in. It renders `Switcher.Root` with a row per locale the locale provider offers, each in its own language, so a pick translates the page, and a language written right to left mirrors it. It renders nothing where the application offers one locale. Import it from `@stealthscale/component-screen/shell`. Every switcher on this page switches the catalogue itself.",
+  "application": "Application",
+  "label": "Language",
+  "looks": {
+    "about": "The switcher takes the looks of `Switcher.Root`, so a bar sets the look it uses for its other controls. Each shows the language subtag as its mark, the language's own name and the indicator.",
+    "title": "Looks"
+  },
+  "product": "Ledger",
+  "title": "Locale switcher",
+  "toolbar": {
+    "about": "At the end of an application's bar the switcher is one of the toolbar's controls at the toolbar's size, so the arrow keys move focus to it.",
+    "title": "In a toolbar"
+  }
+}