efficient-shell 8.41.0 → 9.9.0

package/README.md

@@ -1380,7 +1380,15 @@ deleted once this ships.
 
 ```tsx
 <InputNumber aria-label="Columns" value={count} onChange={n => n && setCount(n)} min={1} max={4} />
-<WidthsBar label="Widths" count={count} value={row.columnShares} onChange={shares => save({ columnShares: shares })} />
+<SettingRow
+  size="compact"
+  label="Widths"
+  action={resolveColumnShares(row.columnShares, count) ? (
+    <SettingReset label="Widths" detail={strings.widths.equal} onReset={() => save({ columnShares: undefined })} />
+  ) : undefined}
+>
+  <WidthsBar label="Widths" count={count} value={row.columnShares} onChange={shares => save({ columnShares: shares })} />
+</SettingRow>
 ```
 
 The value is `ColumnShares`: the first `count - 1` shares, whole percentages.
@@ -1398,24 +1406,23 @@ narrow segment grows to at least 40px, over the handles and inside the bar.
 A segment narrower than 36px shows "10" rather than "10%". Each field is a
 `spinbutton` named "Column 1", "Column 2", … (`strings.widths.column`), valued
 in percent and described by the hint. Tab goes column 1, the handle after it,
-column 2, …, the last column, then "Reset to equal".
+column 2, …, the last column.
 
 A handle trades width with its neighbour and stops at the floor. Its line is
 2px at rest and 4px on hover, keyboard focus and while dragged; the grab area
-is 12px either way. Under 264px of its own width (a container query, not the
-window), the bar puts "Reset to equal" under the hint, at the right end.
+is 12px either way.
 
-A host that draws its own reset and hint passes `footer={false}`: for
-example a settings field with a reset in its heading row (shown only when
-the value has changed) and a hint that folds away. The bar then draws
-nothing under itself, not even a gap. The hint is still there for screen
-readers, as visually hidden text that the group and every field are
-described by. The host's reset calls `onChange(undefined)`, as the bar's own
-does.
+The hint ("Type a width or drag a line. No column goes below 10%.") is a
+`Tooltip` on each column, and visually hidden text that the group and every
+field are described by; no hint line is drawn (Lewis, 2026-10-13).
 
-```tsx
-<WidthsBar label="Widths" count={count} value={row.columnShares} onChange={save} footer={false} />
-```
+The bar draws no ↺ and nothing but itself. Its reset goes BY THE ROW TITLE,
+like every other panel row's (2026-10-23): the host's `SettingRow` takes
+`SettingReset` as its `action` while the widths are set (above), so the ↺ is
+"Reset Widths", "back to equal widths" (`strings.widths.equal`), at the end of
+the title line, and the bar keeps its whole width for the numbers in a narrow
+segment. The reset CLEARS the value (`undefined`): no stored value is what
+equal widths are.
 
 While a field in a narrow segment is focused and grown, a neighbour's label
 that it covers even in part is hidden whole, so only whole numbers are ever
@@ -1637,15 +1644,16 @@ All exports are named — `import { Modal, ... } from 'efficient-shell'`.
 | `BugReportDetail` | Used inside an entity-window registry entry; reads from `<BugReportConfigProvider>`. |
 | `StatusBadge` | Colored pill rendering a status string. Map status→semantic group via `<StatusBadgeProvider groups={{...}}>`. `label` overrides the derived text for a status that arrived from elsewhere; the color still comes from `status`. `emphasis` (`subtle` default / `solid`, the same two words `Banner` uses) is the volume: the quiet register is a transparent wash that composites over a raised panel and a hovered row, the loud one is a saturated fill for the detail header where the same fact is the headline. Color comes from the status tokens in `ui.css`, which carry both themes. |
 | `SidebarLayout` | Two-pane layout with a drag-to-resize sidebar (`storageKey` persists the width). Pair with a `flushBody` window so the sidebar runs edge-to-edge. On a phone the sidebar folds into a section bar over the page (the active rows' names, plus `sidebarTop`) and a bottom sheet the name opens; choosing a row closes it, a row with `aria-expanded` or anything inside `[data-sheet-keep-open]` does not. |
-| `SidebarNavItem`, `SidebarGroupLabel` | Filter-sidebar button (optional `count` badge and `severity` marker dot) plus its group heading. Roll the severity up in the app; omitting it renders exactly as before it existed. An unrecognised `severity` renders a visible "unknown" marker and logs — it never silently disappears. `icon` is a 16 px glyph at the leading edge, decorative in the a11y tree and a step quieter than the words it introduces (gray-400 idle, blue-600 active); `trailing` is the right edge after the count, for what a count cannot say — a plan chip, an external-link mark, a sync state. `label` widened to `ReactNode` for a name that needs its own markup; only a string gets the truncation `title`, because a node has no text to read without walking it. The label truncates and the count keeps its edge however many slots are filled. The group heading is 12px gray-500 (4.8:1 on white). |
+| `ItemCount` | How many things are in here — a folder's photos, a bucket's records, a heading's pages: ONE muted box that its row puts at its END, never against the name (Lewis, 2026-10-23, after he read "Ford F-150" and its photo count as "Ford F-150 1"). `count`; `label` is the full words with the number ("2 photos", the caller's plural; default "N items"), shown in the shell `Tooltip` and read by a screen reader, while the figure is `aria-hidden`; `active` takes the selected row's blue; `showZero` draws a zero; `className` lands on the outer element (`ml-auto` ends a row). Every kit count is this part: `TreeRow` / `TreeGroupLabel` `count` + `countLabel`, the `SidebarNav*` parts' `count` + `countLabel`, the media library. Not `CountBadge`, which is an alert pinned to a corner. |
+| `SidebarNavItem`, `SidebarGroupLabel` | Filter-sidebar button (optional `count`, an `ItemCount` at the row's end with `countLabel` for its words, and `severity` marker dot) plus its group heading. Roll the severity up in the app; omitting it renders exactly as before it existed. An unrecognised `severity` renders a visible "unknown" marker and logs — it never silently disappears. `icon` is a 16 px glyph at the leading edge, decorative in the a11y tree and a step quieter than the words it introduces (gray-400 idle, blue-600 active); `trailing` is the right edge after the count, for what a count cannot say — a plan chip, an external-link mark, a sync state. `label` widened to `ReactNode` for a name that needs its own markup; only a string gets the truncation `title`, because a node has no text to read without walking it. The label truncates and the count keeps its edge however many slots are filled. The group heading is 12px gray-500 (4.8:1 on white). |
 | `MetricBar` | Value + proportional bar with optional `warn` / `crit` threshold ticks — the CPU / memory / disk row. `value={null}` renders "no data" (dashed empty track), never a zero-width bar; with no thresholds the fill stays grey rather than claiming health. `max` must be a positive finite number — given `0`/`NaN` the row prints the value but draws no bar, rather than dividing by zero into a full one. `size` is `sm` (the compact row), `md` (a standalone stat) or `lg` (`md` with its label and detail at the 12px floor in gray-500). |
 | `MetricBarLegend` | One row under a group of `MetricBar`s naming the ticks in words — the lighter mark is the warning bound, the darker the critical — in 12px gray-500, with swatches drawn from the bars' own tick ink. A tick's `title` is hover-only, which a touch screen never shows (UI-17). `link={{ href, label }}` says where the bounds are set. |
 | `BudgetBar` | A run's wall clock, drawn as **budget consumed** — not work done, which nothing here knows. Three states a glance separates: within budget (a solid fill), past the deadline (a hatched band, never the shape of a finished bar; with a `grace` the track spans budget + grace so it is only full when the reaper is due), and **no estimate at all** (no bar — not a zero one, not an empty track). Keeps `MetricBar`'s rule that `elapsed={null}` is no reading and `elapsed={0}` is a measurement. `budgetState(elapsed, budget)` is the same verdict for a list to sort by. |
 | `TimelineTrack` | The time axis both timelines are drawn on, and the reason they look and move alike rather than merely similar. A 6 px rail with a fill, a **date ruler** (month ticks always, week ticks where they clear 14 px, a month label only where it clears 72 px of the last one), dots whose shape and glyph say what kind of event they are — every one of them in the theme accent at its 600 step, the colour a primary `Button` wears, so a shape survives the greyscale print and the colour-blind reader that a hue never did, and one of two label strategies: `labels="lanes"` packs them into two rows and folds runs of the same kind into `×N` pills, `labels="active"` draws the one label a scrubber needs, `labels="none"` draws none — the bare rail, where an item's `caption` is the only text near its mark, the edge captions flank the rail on its own row, and the `pending` things are one dashed cap past a dashed tail rather than a column. `axis="compressed"` CUTS any stretch holding more than 30% of the window's time down to a fixed notch with a break glyph saying how many days it hides, and shares the rest of the track proportionally; `axis="linear"` keeps time proportional throughout; `axis="spread"` cuts nothing and keeps the 48 px floor, the idle stretches paying for it in proportion. `highlightKeys` lights one band from the leftmost named mark to the rightmost and every mark inside it; `onHoverChange` reports the mark under the pointer or the focus. A `provisional` item is hollow, never current, and outside the fill. `endMark` puts a hollow, dashed mark ON a bare rail's right edge for a day the window already runs to — an estimate, a contractual date — with the label and the date in its popover. An optional `thumb` turns it into a scrubber: give it `stops` and it becomes discrete — a drag follows the pointer but snaps to the nearest stop as it goes, arrows step stop to stop, and `valueText` says which one for a screen reader. An optional `playback` then drives that thumb along the rail by itself: the caller owns the button and the `playing` flag, the track owns the travel, because the distance between two stops is a distance in **pixels of its axis** and nobody outside knows how wide the track is. It is paced by that distance — 350 ms per 100 px, clamped to 450–1400 ms, eased in and out — so a compressed `//` notch costs 48 px of travel like any other 48 px instead of swallowing the glide, and the date chip, read back through the axis's inverse mapping, skips exactly the days the notch hides. `onArrive(key, ms)` fires on arrival and never mid-travel; the thumb then rests 700 ms before setting off again. The timing is the **wall clock**, not the frame rate: the rest is waited out on a timer and the travel is measured against the high-resolution timestamp each animation frame carries, so 700 ms is 700 ms on a throttled or occluded surface that hands out one frame a second instead of sixty — and a page that comes back after an idle stretch walks its backlog forward at one report per frame rather than announcing four at once. `onProgress({ fromKey, toKey, t, ms } | null)` hands out the in-flight position on every frame of a glide and `null` the moment there is none (arrival, pause, cancel, end, and a released drag), so a consumer can interpolate a table under the bar on the same eased `t` that places the disc; a drag reports the pointer's linear fraction between its two neighbouring stops. Flipping `playing` off freezes it where it is — keeping what is left of the rest rather than spending it — and flipping it back on carries on from there; taking hold of the thumb — a drag, a click, an arrow key — ends the playback through `onStop`. Under `prefers-reduced-motion` the walk stays, the travel goes, and `onProgress` only ever says `null`. Hovering a `×N` pill **magnifies** its stretch so the members can carry their own labels (or do it from code with `zoomRange`), and an item's `preview` fills the hover/focus popover with the document in miniature, with an "Open" footer that fires its `onOpen` — the popover has already drawn the mark's label and its date above the preview, so a consumer leaves both out of it. Also `markers` — each one free to name its own `glyph` where its kind's is not specific enough — `phases`, `edgeCaptions`, and a `pending` list for the things that have no date. Every mark takes its own pointer, including on a scrubber: the 24 px hit strip that makes a 6 px rail pressable runs UNDER the dots rather than over them, so hover, focus and click reach a report, an inspection or a shipment, while a press on the bare rail between two of them still starts a drag and a drag crossing a mark is not interrupted by it. No two marks are ever drawn on top of each other: a run whose centres are closer than one mark's width — of any kinds, folded or not — becomes ONE mark carrying `×N`, its kind's own shape and glyph where the run shares a kind and a neutral `×N` pill where it does not, named after every member it stands for. A pointer opens it: the axis magnifies around the run and each member is a mark again with its own popover, the same magnification a `×N` label pill asks for. A run that is all one DATE can never be opened — no magnification separates a coordinate from itself — so its popover lists every member with its date and its own preview instead. Folding is a drawing decision only: the thumb's stops, `onActivate` and playback all still see every mark. The marks are an `<ol>` with exactly one `aria-current="step"` and ONE tab stop — arrows traverse, Home/End jump, Enter/Space activates — and every tooltip and pill popover is hoverable, persistent and Escape-dismissible (WCAG 1.4.13). A popover is kept inside the track and inside the shell window that owns it (UI-11), the first day's mark included, and a mark carries no native `title` — its popover is the tooltip, on hover and on focus alike. Under a 320 px track it stops squeezing the axis and switches to a vertical variant. Motion is `rosh-tl-*` classes in `ui.css` behind one `prefers-reduced-motion` rule, replayed on every mount, total budget 600 ms. |
 | `ProductionTimeline` | The scrubbable production bar, drawn on `TimelineTrack` inside the shared timeline card: a sentence-case heading with the PO as its subject, the window and the lead time as meta, a Play **pill** on the right whose glyph follows its state, and a footer carrying the status line and legend chips drawn with the track's own glyphs — a shipment is a diamond with a truck in it and an inspection a disc with a flask, on the rail and in the chip alike, because every kind is painted in the one accent and the glyph is the only thing left to tell them apart. The thumb only ever rests on a date a report was filed on — drag it and it snaps report to report, arrow it and it steps one report at a time — so the bar never shows an estimate dressed as a fact. Press Play and it **travels** between them: a fresh press rewinds to the first report, the thumb reads each snapshot for 700 ms and then glides to the next with the date chip counting the days it crosses, and the status line under the bar changes on arrival rather than while it is on its way. Pausing freezes it mid-glide and pressing Play again carries on from exactly there; touching the thumb ends the playback and hands it back. The walk keeps time by the clock rather than by the frame rate, so an idle or throttled pane does not stretch it. `onScrubProgress` forwards the track's in-flight fraction — `{ fromKey, toKey, t, ms }` keyed by report id, `null` at a stop — which is how a consumer's items table moves WITH the thumb instead of jumping a whole report's worth of quantities when it lands; it is optional and undefined by default, so a caller that only reads the snapshot needs no change. `onPickReport` selects a report; the optional `onOpenReport` / `onOpenMarker` make the label above the thumb a real button that opens the document behind it. `reportLabel` names a report wherever the bar states its identity — the caption over the thumb, the popover header, each dot's accessible name, the slider's value text and the status line — and defaults to its own `progress_number`, while `resetLabel` replaces the whole of the `Back to …` button: together they are what lets a portal that must not print an internal document number run the same card. A report carries an optional `preview` for its hover/focus popover — the stage row it filed, the note attached to it — and `renderReportPreview` builds one for the reports that carry none, the convenience for a caller whose list arrives straight off an API; the report's own preview wins where both exist, and the popover prints the report number and the date itself. `useProductionTimeline(opts)` owns the slider state and the derived snapshot so the caller's items table and the bar read the same state; `STAGES` / `calcOverall` / `calcReportOverall` are the stage maths it shares with that table. **`variant="rail"`** is the bar alone, for a window whose own header already says what the order is: no card, no heading, no lead-time line, no label under the active report — every report, shipment, inspection and **invoice** (kind `invoice`, a disc with a receipt) is a dot with a popover — the thumb with its date chip, `Start` and `Est. done` flanking the rail, the estimated completion as a hollow mark on the right edge while it is still ahead, and under the rail one row: Play, the return button when the thumb has been moved, and the `<report> · date · N% overall · N pc in stock` line. The rail spreads the reports (the track's `spread` axis) rather than folding two a week apart into a `×2`. `onPlayStart` fires before the thumb moves, on a fresh run and on a resume, so a window that keeps the bar in view while its table shows something else can switch the table first. |
 | `MilestoneTimeline` | The static sibling, on the same `TimelineTrack` and in the same card: one dot per milestone on a date axis, no scrubber. `heading` and `subject` split the title from the record it is about (`Mould development` · **001F/1813**), and the meta line states when it started, how long it has run and how many milestones are dated. The axis **cuts** rather than squeezes: a stretch holding more than 30% of the window's time becomes a fixed notch with a break glyph saying how many days it hides, and every stretch that still keeps time gets at least 48 px. Labels are packed into **two lanes** by their **measured** width, and a run of same-kind revisions folds into one `DFM ×4` pill whose members keep their dots on the rail: hovering it magnifies that stretch until each member can carry its own label, a click pins the popover listing them, Escape closes it. A milestone carries an optional `glyph` (a `default` one that names `doc` is drawn as the signed drawing it is), a `preview` for the popover, and an `onOpen` that the popover's "Open" button fires — `onClick` selects the dot on the bar, `onOpen` opens the drawing behind it, and a card that declares only the first keeps its Open button because the footer falls back to it. Label and date are printed by the popover above the preview, so a consumer supplies neither. A milestone with **no date gets no position**, because the only position available would be a date the record does not have: it is listed beside the bar under "Not yet reached" (two rows, then a real `+N more` button) and takes no part in the range, the fill or a phase bracket. `phase` groups of 2+ get a bracket marking parallel work, the fill never runs past today, and today gets its dashed rule and tag even when it IS the right edge — the commonest case, because a programme with no finish date ends at today. **`variant="rail"`** is the bar alone, for a window whose stepper already names the stages: no card, no heading, no label under any dot — every milestone is a dot with a popover, a revision carries a two-character `caption` over its dot (`v3`; captions that would overprint collapse to `v1–v4`), `edgeCaptions` flank the rail on its own row (`{ start: 'Start', end: 'Ready' }`), nothing is cut (the `spread` axis: every stretch at least 48 px, the idle ones drawn short rather than notched), and what has not happened is one dashed **cap** at the end of a dashed tail — a real button announced as the last undated milestone, naming the rest in its popover. The stepper and the rail then point at each other: `highlightKeys` lights one soft band from the leftmost named milestone to the rightmost and every dot inside it (a single key rings one dot; the cap answers to the pending milestone's key), and `onHoverChange` reports the milestone under the pointer or the focus, `null` on leave. A `provisional` milestone — a sample ORDERED, drawn where the shipment will be — is hollow, never "where we are", and outside the fill. |
-| `SettingRow` | One setting in a settings card: the name with its explanation stacked under it on the left, the control or value on the right (it never shrinks), and an optional body (`children`) that opens beneath behind its own line. Each row draws its own top line (`divider`) and padding, so rows stack in a card. One prop per slot: `label` (the name) and `value` (a control or a read-only fact). `size="compact"` is the editor-panel row (Lewis, final 2026-10-17): `icon` before the name; the name on one line, never wrapped; and at the right end the value, then a 24px reset slot drawn on EVERY row, empty until `action` (the Reset button) fills it, so every control in a group ends on one line. When the name and the control do not fit, the control drops under the name and still ends on that line. Number boxes in a compact row are one 80px box with the compact steppers, by default; a `Slider` takes the room from the name to its box (track at least 96px) or drops under the name. The default size draws what it always drew. Handles a value that is a control (`controlId` labels it; `labelId` puts an id on the name; in a compact row a `Switch` in the value with no name of its own takes the row's name by `aria-labelledby`, so the host names it once), a read-only fact, a value nobody knows (an em dash in the faint ink, never an empty cell), and a `quiet` row nothing can write yet. A name over a field (children, no value) draws nothing on the right. `DescriptionList` is the record-detail neighbour and stays that. `showWhen` (with `values`, and `context` for where the row is) hides the row while the rule is false — see `ShowWhen` below. **The per-view state** (S7: V2 2026-10-09, D3 2026-10-12): `viewState="auto"` is a value never edited in the view on screen, worked out from the view above — an "auto" tag after the name, and every `InputNumber`, `Select` and `Slider` in the value wears the auto look (dashed edge, sunken ground, grey value) and is described as "auto" to a screen reader, from this one prop (a control's own `auto` wins; `useSettingAuto()` lets a host's own control follow it). `viewState="edited"` is a value set in this view: the kit's blue changed dot (`CountBadge dot tone="accent"`) after the name, heard as "Changed in this view". `readout` is the value's word ("1600px") with the control in `children`: it stays on the name line at the right in every row; where both do not fit, the name wraps between its words and a readout of several words gives way first; the hint goes under that line. |
-| `SettingReset` | The ↺ in a `SettingRow`'s reset slot (`action`), passed while the value is edited in this view. `view="desktop"` (default): "Reset Padding", back to the site default. `view="tablet"` / `"phone"`: "Inherit parent layout for Padding", back to auto. `detail` says what it goes back to ("auto, 40px"), in its tooltip and description. The kit's 24px ghost `IconButton` with a 44 x 44 hit area that reaches 4px left (never over the value) and 16px right; a press calls `onReset` and moves focus to the row's own control. A host's right-click item on Tablet and Phone uses the same words: `strings.settingView.inheritParentLayout`, with a `PopupMenuItem` `description` second line. |
+| `SettingRow` | One setting in a settings card: the name with its explanation stacked under it on the left, the control or value on the right (it never shrinks), and an optional body (`children`) that opens beneath behind its own line. Each row draws its own top line (`divider`) and padding, so rows stack in a card. One prop per slot: `label` (the name) and `value` (a control or a read-only fact). `size="compact"` is the editor-panel row (Lewis, final 2026-10-17): `icon` before the name; the name on one line, never wrapped; and at the right end the value, then a 24px reset slot drawn on EVERY row, empty until `action` (the Reset button) fills it, so every control in a group ends on one line. When the name and the control do not fit, the control drops under the name and still ends on that line. Number boxes in a compact row are one 80px box with the compact steppers, by default; a `Select` in a compact row is the boxes' 32px height on every pointer (on touch it takes `size`, else `md`, in place of the 56px `touch` rung, unless `touchSize` is passed) and the phone's native picker wears the kit's chevron, so in a 320px panel it sits on its name's line; a `Slider` takes the room from the name to its box (track at least 96px) or drops under the name. The default size draws what it always drew. Handles a value that is a control (`controlId` labels it; `labelId` puts an id on the name; in a compact row a `Switch` in the value with no name of its own takes the row's name by `aria-labelledby`, so the host names it once), a read-only fact, a value nobody knows (an em dash in the faint ink, never an empty cell), and a `quiet` row nothing can write yet. A name over a field (children, no value) draws nothing on the right. `DescriptionList` is the record-detail neighbour and stays that. `showWhen` (with `values`, and `context` for where the row is) hides the row while the rule is false — see `ShowWhen` below. **The per-view state** (S7: V2 2026-10-09, D3 2026-10-12): `viewState="auto"` is a value never edited in the view on screen, worked out from the view above — an "auto" tag after the name, and every `InputNumber`, `Select` and `Slider` in the value wears the auto look (dashed edge, sunken ground, grey value) and is described as "auto" to a screen reader, from this one prop (a control's own `auto` wins; `useSettingAuto()` lets a host's own control follow it). `viewState="edited"` is a value set in this view: the kit's blue changed dot (`CountBadge dot tone="accent"`) after the name, heard as "Changed in this view". `readout` is the value's word ("1600px") with the control in `children`: it stays on the name line at the right in every row; where both do not fit, the name wraps between its words and a readout of several words gives way first; the hint goes under that line. |
+| `SettingReset` | The ↺ in a `SettingRow`'s reset slot (`action`), passed while the value is edited in this view. `view="desktop"` (default): "Reset Padding", back to the site default. `view="tablet"` / `"phone"`: "Inherit parent layout for Padding", back to auto. `detail` says what it goes back to ("auto, 40px"), in its tooltip and description. The kit's 24px ghost `IconButton` with a 44 x 44 hit area that reaches 4px left (never over the value) and 16px right; a press calls `onReset` and moves focus to the row's own control. A host's right-click item on Tablet and Phone uses the same words: `strings.settingView.inheritParentLayout`, with a `PopupMenuItem` `description` second line. The three views' names are `strings.settingView.viewDesktop`, `viewTablet` and `viewPhone` — Desktop, Tablet, Phone (never "Mobile") — for a host's view switch and notes. |
 | `Accordion` | Folds with a heading button each (`h3` by default, `level`). Two tiers: `tier="band"` (default) is a settings group, an edge-to-edge grey band one step darker than the panel (`--rosh-fold-band`, `--rosh-fold-band-hover`), title 16 / 600; `tier="row"` is a fold inside a group or a quiet fold in a portal form, no ground, title 14 / 500. Each item can carry an `icon` and, on a band, a `count` of changed settings (a pill, read as "2 changed"). The chevron points right when shut and down when open, in a 24px column that lines up with the settings rows' reset slot. |
 | `ShowWhen` / `isShown` / `ShowWhenRule` | The ONE rule for "show this settings row only when another setting has a value" (owner ruling 2026-10-17). The rule is data, never a function: `{ field: 'country_selector_enabled', is: true }`, `{ field, in: [...] }` (is one of), `{ field, set: true }` (holds anything: not `undefined`/`null`/`false`/blank/empty list; `0` counts), `default` for an unset field, a dotted `field` (`'source.slug'`), `{ context: 'parentType', in: ['Flex'] }` (where the row is, not what it stores), and `{ not }` / `{ all: [] }` / `{ any: [] }`. `isShown(rule, values, context)` is the only reader; `SettingRow`'s `showWhen` and the `<ShowWhen rule values>` wrapper both use it. A hidden row keeps its stored value — nothing here writes — and a rule it cannot read shows the row. |
 | `withShowWhen` / `withRowRules` / `truthy` / `showWhenFactsContext` | Put the rule on field definitions, as data, from `efficient-shell/format` (no React, no UI kit), for every editor. `withShowWhen(field, rule)` puts it on one row and `showWhenOf(field)` reads it back. `withRowsShownWhen(fields, keys, rule)` and `withRowRules(fields, [[keys, rule], …])` do it for rows of a panel: a row's own rule is kept (`all`), and the same input hands back the same object. `truthy(field)` reads a value as `if (value)` does. `shownForOption(field, known, fallback, shownFor)` reads an unknown option as its fallback. A block's facts (`showWhenFacts`: name → `(data, params) => answer`) are what its `{ context }` rules read: `showWhenFactsContext(facts, data, params)` reads each one only when a rule asks, and `withShowWhenFacts` / `addShowWhenFacts` attach them to a block. |
@@ -2273,6 +2281,43 @@ rows take their height from `--control-height-sm` / `-md` / `-lg` (24 / 32 /
 `efficient-shell/ui`: `SPACING_SCALE`, `SPACING_ROLES`, `CONTROL_HEIGHTS`, and
 `isSpacingStep('2.5')` for a Tailwind step.
 
+**Colour.** A component asks for the colour of what it IS — a role — never a
+hue. Every role is a custom property with a light and a dark value, and a
+utility class that reads it: `text-ink`, `text-ink-faint`, `bg-surface`,
+`bg-surface-sunken`, `border-line`, `bg-row-hover`, `bg-accent-fill`,
+`bg-accent-tint`, `border-accent-line`, `text-accent-text`, `text-on-accent`,
+`text-danger-text`, `bg-status-danger-soft`, `text-status-danger-soft-ink`,
+`border-status-danger-line`, `bg-scrim-mid`, `bg-identity-3`, and the same with
+`ring-`, `divide-`, `fill-`, `stroke-`, `outline-`. The classes are
+`@theme inline default`, so they write `var(--role)` (dark mode and a host's
+ramp follow at run time) and an app's own `@theme` still wins.
+
+| Group | Roles |
+|---|---|
+| Surfaces | `surface`, `surface-sunken`, `surface-raised`, `surface-inverse` |
+| Lines | `line-subtle`, `line`, `line-strong` |
+| Inks | `ink-faintest` … `ink-strongest`, `ink-placeholder`, `ink-disabled`, `ink-on-inverse` |
+| Rows | `row-hover` |
+| Accent | `accent-fill`, `accent-fill-hover`, `accent-tint`, `accent-tint-strong`, `accent-border`, `accent-text`, `on-accent` |
+| Status, flat | `danger`, `warning`, `success`, `danger-text`, `warning-text`, `success-text` |
+| Status, tiered | `status-<group>-soft`, `-soft-ink`, `-solid`, `-line`, and `status-on-solid` (groups: success, active, queued, info, pending, warning, danger, draft, neutral) |
+| Scrim | `scrim-soft`, `scrim-mid`, `scrim-strong` |
+| Identity | `identity-1` … `identity-8` (the chart series; never themed) |
+
+**Themes set the roles.** The neutral roles (`surface`, `surface-sunken`,
+`surface-raised`, `line-subtle`, `line`, `line-strong`, `row-hover`) read a base
+tier, `--base-surface` … `--base-line-strong`, the untinted ramp. The pink,
+green, grey and blue themes set the roles to their tint (the same values their
+class remaps paint), so a role and the palette class it replaces look the same
+in every theme. The fold band and the frosted glass read the base and never
+tint. A host that wants its own greys sets the base.
+
+The accent jobs read a scale, `--accent-50` … `--accent-700`. The pink, green
+and grey themes set it to their hue, and a custom accent (useTheme) writes it
+inline; where nothing sets it, each job falls back to Tailwind's blue through
+`--color-blue-*`. Code takes the
+names from `efficient-shell/ui` (`COLOUR_ROLES` and its groups).
+
 **Glass.** Menus, popups and listboxes are frosted glass
 (`glassStyle()`); a `Tooltip` bubble is always solid (`solidSurfaceStyle()`). `--menu-opacity` (0–1, default `0.95`) sets how much shows
 through. `rosh-reduce-transparency` on `<html>` makes every popup one solid
@@ -2287,10 +2332,14 @@ through. `rosh-reduce-transparency` on `<html>` makes every popup one solid
 :root { --rosh-glass-surface: var(--popover); --rosh-glass-solid-shadow: 0 4px 12px rgb(0 0 0 / 0.08); }
 ```
 
-**Elevation.** Five levels, one job each: `--elevation-none` (a plain card,
+**Elevation.** Nine levels, one job each: `--elevation-none` (a plain card,
 border only), `--elevation-raised` (a card or field that sits a little up),
 `--elevation-panel` (a floating editor panel, a sticky bar), `--elevation-popup`
-(menus, lists, toasts, tooltips) and `--elevation-dialog` (dialogs, drawers).
+(menus, lists, toasts, tooltips) and `--elevation-dialog` (dialogs, drawers). Four more
+are the shadows an editor drew for itself, each at its own value:
+`--elevation-bar` (an editor's top bar), `--elevation-handle` (the canvas drag
+handle), `--elevation-tag` (a picker's tag) and `--elevation-frame` (the preview
+frame).
 raised, popup and dialog equal Tailwind's sm, lg and xl, so markup keeps those
 utilities; md and 2xl are not levels. A component class or an inline style reads
 the property: `box-shadow: var(--elevation-panel)`. Code takes the names from
@@ -4679,7 +4728,7 @@ itself where the kit has an answer:
 | `portal` | a `createPortal(…)` call | `Popover`, `PopupMenu`, `DropdownMenu`, `Tooltip` |
 | `native` | `window.confirm` / `alert` / `prompt`, or a bare call nothing in the file binds | `confirm`, `confirmDestructive`, `prompt`, `toast` |
 | `dark` | a `dark:` variant in a class string | the light class alone; the kit remaps it |
-| `hex` | a hex colour in a `.tsx` string (not in `href`, `to`, `id`, `key`, `htmlFor`) | a token or a palette class |
+| `hex` | a hex colour in a `.tsx` string (not in `href`, `to`, `id`, `key`, `htmlFor`) | a colour role (`COLOUR_ROLES`); the `colour` kind also counts palette classes and the other literal forms |
 | `radius` | a literal corner radius: an arbitrary-value radius class (`rounded-[4px]`) or an inline `borderRadius` number or length (not `inherit`, `var(…)`, `50%` or `9999`) | a scale utility or a role token; the theme's Corners setting shapes them |
 | `spacing` | a padding, margin or gap step off the scale 2/4/8/12/16/20/24/32/40/48 (Tailwind steps 1.5, 2.5, 3.5, 7 …), an arbitrary spacing value that is a length, or an inline `padding*` / `margin*` / `gap` off the scale (owner ruling 2026-10-12) | a step on the scale, or a role token such as `var(--space-control-x)` |
 | `font-size` | a literal font size: an arbitrary-value text size, or an inline `fontSize` (not `var(…)` or `inherit`) | a type step 9/11/12/14/16/18/20/24/30 |
@@ -4692,6 +4741,7 @@ itself where the kit has an answer:
 | `chart` | an import of a second chart library: `recharts`, `chart.js`, `react-chartjs-2`, `d3` and every `d3-*` module (one imported only for its maths too), `@nivo/*`, `victory` and `victory-*`, `echarts`, `echarts-for-react`, `apexcharts`, `react-apexcharts`, `@visx/*`, `highcharts`, `highcharts-react-official`, `plotly.js`, `plotly.js-dist`, `react-plotly.js`, `lightweight-charts`, `@antv/g2`, `@antv/g2plot`, `chartist`, `billboard.js`, `c3`, `uplot`. A name counts with its subpaths (`chart.js/auto`); a name that only contains one (`react-d3-tree`) does not. Read after `kit` and `icon`, so `@mui/x-charts` stays a `kit` | a chart from `efficient-shell/ui`: `ChartFrame`, `TimeSeriesChart`, `ColumnChart`, `RankedBars`, `PieChart`, `FunnelChart`, `ScatterChart`, …; the one chart system (harness FT-3) |
 | `chart-dep` | one of those chart libraries declared in `package.json`, whether or not anything imports it (not `devDependencies`) | remove it |
 | `ellipsis-label` | a button, link or menu label that ends in `…` or `...`: the text of `button`, `a`, `option`, `Button`, `IconButton`, `SplitButton`, `Link`, `NavLink`, `PopupMenuItem`, `PopupMenuLabel`, `DropdownMenuItem`, `MenuItem`, `ContextMenuItem` (through any spans inside), a `label` or `aria-label`, and a `label:` in an object. Each branch of a `?:` is read, and so is the English phrase handed to `say()` or `t()` (a key such as `team:menu.remove` has no dots of its own); no other call's result is. A `…` with no word of its own in the same string is a truncation's and is not counted. Not counted yet, by name in `ELLIPSIS_EXEMPT` until the sweep that clears each: `busy` (a listed first word such as Saving, Loading, and the Chinese busy forms), `placeholder` (`placeholder`, `searchPlaceholder`, `emptyOptionLabel`, `blankLabel`) and `prompt` (an `<option value="">` or `{ value: '', label }`) | the label without the dots, saying what it does ("Extend trial"). `…` means only "the words are cut" (owner ruling 2026-10-14) |
+| `colour` | a literal colour, in a script string (`.ts` and `.tsx`) or a stylesheet declaration (`.css`, `.scss`, which this kind alone reads): a hex; an `rgb()` / `rgba()` / `hsl()` / `hsla()` / `hwb()` / `oklch()` / `oklab()` / `lab()` / `lch()` with a number in it; a Tailwind palette class (a colour utility with a hue and a step, or `white` / `black`, under any variant and alpha); a `--color-<hue>-<step>` variable; a named colour as the value of a colour property; and a palette class in `@apply`. A `var()` fallback counts (a fallback is a second palette). Not counted: a role or token, `transparent`, `currentColor`, `url(#…)`, a `#` in a link or id, a comment, a `mask` declaration (its black is alpha) | a colour role: its utility (`text-ink`, `bg-surface`, `border-line`, `bg-accent-fill` …) or `var(--role)`; `COLOUR_ROLES` lists them. A merchant site reads the site theme. A colour a frame needs because the shell's stylesheet cannot reach it is an `allow` entry with its reason (owner ruling 2026-10-23) |
 
 Known gaps: `rgb()` / `hsl()` colours, colours in `.ts` maps, and
 `createElement('button')` are not counted.

package/dist/Browser-ZPOVP4Z7.js

@@ -0,0 +1,43 @@
+import{peekBrowserStartUrl as e,claimBrowserStartUrl as t}from"./chunk-LWLCNQY7.js";import{AboutApp as o}from"./chunk-LAEXWXJA.js";import{WindowTitle as r}from"./chunk-DZTAGMNY.js";import"./chunk-CY5N5OA3.js";import"./chunk-AW7TOB6N.js";import"./chunk-KNUR2UEG.js";import"./chunk-JDCM2VHG.js";import"./chunk-AGUA3O5O.js";import"./chunk-ZDMZM7HD.js";import"./chunk-5A7MWTXX.js";import"./chunk-VG2R6PZV.js";import{confirm as n}from"./chunk-IK2WXW2E.js";import"./chunk-6453ISTQ.js";import"./chunk-KC3EX26K.js";import"./chunk-PDXPMHG3.js";import"./chunk-4AJRHTTB.js";import"./chunk-VWGWZY7A.js";import"./chunk-PKXQDCNR.js";import"./chunk-UGTRSRIW.js";import"./chunk-X7PM7JOD.js";import"./chunk-CDAJKLGL.js";import"./chunk-L4TN4EWK.js";import"./chunk-FPGRKHUW.js";import"./chunk-URHGHXDN.js";import"./chunk-5QFPTDQF.js";import"./chunk-LNARMEEZ.js";import"./chunk-NHH2MXFU.js";import"./chunk-UQYNPYF4.js";import"./chunk-HL6JSDN3.js";import{Icon as s}from"./chunk-FSPFV4MI.js";import"./chunk-J75ZT2JQ.js";import"./chunk-R2VKEMZH.js";import"./chunk-MRJKZWWV.js";import"./chunk-OZAAIE4E.js";import"./chunk-BCDG4N6L.js";import"./chunk-PGN5ME7B.js";import"./chunk-62LW225J.js";import"./chunk-GLUJS42B.js";import"./chunk-D65T4H6J.js";import"./chunk-DTJRIWFR.js";import"./chunk-TWVUQUUD.js";import"./chunk-QWHQJNKL.js";import"./chunk-C3QOHMR6.js";import{useRef as a,useEffect as i,useState as l}from"react";import{jsxs as c,jsx as m,Fragment as u}from"react/jsx-runtime";var d="react-os-shell:browser-bookmarks",h="react-os-shell:browser-homepage",p="https://en.wikipedia.org/wiki/Main_Page",b=[{label:"Wikipedia",url:"https://en.wikipedia.org/wiki/Main_Page"},{label:"DevDocs",url:"https://devdocs.io"},{label:"Example",url:"https://example.com"}],k=new Set(["ac ad ae af ag ai al am ao aq ar as at au aw ax az ba bb bd be bf bg bh bi","bj bm bn bo br bs bt bw by bz ca cc cd cf cg ch ci ck cl cm cn co cr cu cv","cw cx cy cz de dj dk dm do dz ec ee eg er es et eu fi fj fk fm fo fr ga gd","ge gf gg gh gi gl gm gn gp gq gr gs gt gu gw gy hk hm hn hr ht hu id ie il","im in io iq ir is it je jm jo jp ke kg kh ki km kn kp kr kw ky kz la lb lc","li lk lr ls lt lu lv ly ma mc md me mg mh mk ml mm mn mo mp mq mr ms mt mu","mv mw mx my mz na nc ne nf ng ni nl no np nr nu nz om pa pe pf pg ph pk pl","pm pn pr ps pt pw py qa re ro rs ru rw sa sb sc sd se sg sh si sk sl sm sn","so sr ss st su sv sx sy sz tc td tf tg th tj tk tl tm tn to tr tt tv tw tz","ua ug uk us uy uz va vc ve vg vi vn vu wf ws ye yt za zm zw","com net org edu gov mil int info biz name pro app dev xyz online site tech","store shop cloud design digital agency studio media news blog live life","world today email systems solutions services software page link space host","press wiki team group works careers finance capital energy academy"].join(" ").split(" "));function g(e){let t=e.trim();return t?/^[a-z][a-z0-9+.-]*:\/\//i.test(t)?t:function(e){const t=/^([\w-]+\.)+([a-z]{2,})(\/.*)?$/i.exec(e);return null!==t&&k.has(t[2].toLowerCase())}(t)?"https://"+t:"https://duckduckgo.com/?q="+encodeURIComponent(t):""}var f=["duckduckgo.com","developer.mozilla.org","google.com","gmail.com","youtube.com","facebook.com","instagram.com","whatsapp.com","twitter.com","x.com","github.com","gitlab.com","linkedin.com","reddit.com","pinterest.com","amazon.com","amazon.ca","amazon.co.uk","apple.com","icloud.com","microsoft.com","outlook.com","live.com","office.com","netflix.com","spotify.com","paypal.com","stripe.com","chat.openai.com","chatgpt.com","claude.ai"];function x(){if("undefined"==typeof window)return b;try{const e=localStorage.getItem(d);if(!e)return b;const t=JSON.parse(e);if(Array.isArray(t)&&t.every(e=>"string"==typeof e?.url))return t}catch{}return b}function w(){return"undefined"==typeof window?p:localStorage.getItem(h)||p}function y(){const u=a(void 0);void 0===u.current&&(u.current=e()),i(()=>{null!=u.current&&t(u.current)},[]);const p=u.current?g(u.current.url):"",[b,k]=l(w),[f,y]=l(p||b),[j,C]=l(f),[W,R]=l([f]),[z,D]=l(0),[L,E]=l(0),[H,S]=l(x),[T,M]=l(!1),[U,A]=l(null),G=a(null),J=a(null);i(()=>{try{localStorage.setItem(d,JSON.stringify(H))}catch{}},[H]);const P=e=>{const t=g(e);t&&(y(t),C(t),R(e=>{const o=e.slice(0,z+1);return o.push(t),o}),D(e=>e+1),M(!1))},K=()=>{"undefined"!=typeof window&&window.open(f,"_blank","noopener,noreferrer")},O=()=>{const e=U?.trim();e?(S(t=>[...t,{label:e,url:f}]),A(null)):A(null)};i(()=>{if(null===U)return;G.current?.focus(),G.current?.select();const e=e=>{const t=e.target;t?.closest("[data-bookmark-popover]")||A(null)},t=setTimeout(()=>document.addEventListener("mousedown",e),0);return()=>{clearTimeout(t),document.removeEventListener("mousedown",e)}},[null!==U]);const X=e=>{S(t=>t.filter((t,o)=>o!==e))},F=z>0,I=z<W.length-1,Q=H.some(e=>e.url===f),Z="p-2 rounded hover:bg-gray-200 transition-colors text-gray-600 disabled:opacity-30";/* @__PURE__ */
+return c("div",{className:"relative flex flex-col h-full bg-white",children:[
+/* @__PURE__ */m(r,{title:`Browser - ${v(f)}`}),
+/* @__PURE__ */m(o,{app:"browser"}),
+/* @__PURE__ */c("div",{className:"flex items-center gap-1 px-2 py-2 border-b border-line bg-surface-sunken shrink-0",children:[
+/* @__PURE__ */m("button",{onClick:()=>{if(z>0){const e=z-1;D(e),y(W[e]),C(W[e]),M(!1)}},disabled:!F,className:Z,title:"Back",children:/* @__PURE__ */m(s,{name:"chevron-left",className:"h-4 w-4",strokeWidth:2})}),
+/* @__PURE__ */m("button",{onClick:()=>{if(z<W.length-1){const e=z+1;D(e),y(W[e]),C(W[e]),M(!1)}},disabled:!I,className:Z,title:"Forward",children:/* @__PURE__ */m(s,{name:"chevron-right",className:"h-4 w-4",strokeWidth:2})}),
+/* @__PURE__ */m("button",{onClick:()=>E(e=>e+1),className:Z,title:"Refresh",children:/* @__PURE__ */m(s,{name:"refresh",className:"h-4 w-4",strokeWidth:1.8})}),
+/* @__PURE__ */m("button",{onClick:()=>P(b),className:Z,title:"Home",children:/* @__PURE__ */m(s,{name:"home",className:"h-4 w-4",strokeWidth:1.8})}),
+/* @__PURE__ */m("form",{onSubmit:e=>{e.preventDefault(),P(j)},className:"flex-1 flex items-center mx-1",children:/* @__PURE__ */c("div",{className:"flex items-center w-full bg-white border border-gray-300 rounded focus-within:border-blue-400 focus-within:ring-1 focus-within:ring-blue-200",children:[
+/* @__PURE__ */m("span",{className:"px-2 text-gray-400 text-xs",children:f.startsWith("https://")?"🔒":"⚠️"}),
+/* @__PURE__ */m("input",{type:"text",value:j,onChange:e=>C(e.target.value),onFocus:e=>e.target.select(),className:"flex-1 px-1 py-1 text-sm bg-transparent outline-none font-mono",spellCheck:!1,placeholder:"Enter URL or search…"}),f!==j&&/* @__PURE__ */m("button",{type:"button",onClick:()=>C(f),className:"px-2 text-2xs text-ink-faintest hover:text-ink",title:"Reset to current URL",children:"×"})]})}),
+/* @__PURE__ */m("button",{"data-bookmark-popover":!0,onClick:()=>Q?X(H.findIndex(e=>e.url===f)):void A(v(f)),className:Z+" "+(Q?"text-yellow-500":""),title:Q?"Remove bookmark":"Add bookmark",children:/* @__PURE__ */m(s,{name:"star",className:"h-4 w-4",fill:Q?"currentColor":"none",strokeWidth:1.5})}),
+/* @__PURE__ */m("button",{onClick:K,className:Z,title:"Open in new tab",children:/* @__PURE__ */m(s,{name:"external",className:"h-4 w-4",strokeWidth:1.5})}),
+/* @__PURE__ */m("button",{onClick:()=>M(e=>!e),className:Z,title:"Embedding help",children:/* @__PURE__ */m(s,{name:"help",className:"h-4 w-4",strokeWidth:1.5})})]}),null!==U&&/* @__PURE__ */c("div",{"data-bookmark-popover":!0,className:"absolute right-3 top-12 z-30 w-72 bg-white border border-gray-200 rounded-md shadow-lg p-3",children:[
+/* @__PURE__ */m("div",{className:"text-2xs font-semibold uppercase tracking-wide text-ink-faint mb-1",children:"Bookmark this page"}),
+/* @__PURE__ */m("div",{className:"text-2xs text-ink-faintest truncate mb-2 font-mono",title:f,children:f}),
+/* @__PURE__ */m("input",{ref:G,type:"text",value:U,onChange:e=>A(e.target.value),onKeyDown:e=>{"Enter"===e.key?O():"Escape"===e.key&&A(null)},placeholder:"Name",className:"w-full text-sm px-2 h-8 border border-line-strong rounded focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-200"}),
+/* @__PURE__ */c("div",{className:"flex justify-end gap-1 mt-2",children:[
+/* @__PURE__ */m("button",{onClick:()=>A(null),className:"px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded",children:"Cancel"}),
+/* @__PURE__ */m("button",{onClick:O,disabled:!U.trim(),className:"px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-40",children:"Save"})]})]}),
+/* @__PURE__ */c("div",{className:"flex items-center gap-0.5 px-2 py-1 border-b border-gray-200 bg-white shrink-0 overflow-x-auto",children:[0===H.length&&/* @__PURE__ */m("span",{className:"text-2xs text-ink-faintest italic px-2",children:"No bookmarks yet — star the address bar to add one."}),H.map((e,t)=>/* @__PURE__ */c("button",{onClick:()=>P(e.url),onContextMenu:async o=>{o.preventDefault();await n({title:"Remove bookmark",message:`"${e.label}" will be removed from your bookmarks.`,confirmLabel:"Remove",variant:"danger"})&&X(t)},className:"flex items-center gap-2 px-2 py-0.5 rounded text-xs text-ink hover:bg-gray-100 whitespace-nowrap",title:`${e.url}\n(right-click to remove)`,children:[
+/* @__PURE__ */m("img",{src:`https://icons.duckduckgo.com/ip3/${new URL(e.url).hostname}.ico`,alt:"",className:"h-3.5 w-3.5",onError:e=>{e.target.style.visibility="hidden"}}),e.label]},t)),
+/* @__PURE__ */m("div",{className:"flex-1"}),
+/* @__PURE__ */m("button",{onClick:()=>{k(f);try{localStorage.setItem(h,f)}catch{}},className:"px-2 py-0.5 text-2xs text-ink-faint hover:text-ink-strong",title:"Set current page as homepage",children:"Set as home"})]}),
+/* @__PURE__ */m("div",{className:"flex-1 relative min-h-0 bg-gray-50",children:/* @__PURE__ */m(N,{url:f,iframeKey:L,iframeRef:J,openExternal:K,showHelp:T,dismissHelp:()=>M(!1)})})]})}function v(e){try{return new URL(e).hostname.replace(/^www\./,"")}catch{return e}}function N({url:e,iframeKey:t,iframeRef:o,openExternal:r,showHelp:n,dismissHelp:a}){const[d,h]=l(!1);i(()=>{h(!1)},[e]);return function(e){try{const t=new URL(e).hostname.toLowerCase();return f.some(e=>t===e||t.endsWith("."+e))}catch{return!1}}(e)&&!d?/* @__PURE__ */m("div",{className:"absolute inset-0 flex items-center justify-center bg-white p-8",children:/* @__PURE__ */c("div",{className:"max-w-md text-center",children:[
+/* @__PURE__ */m(s,{name:"no-symbol",className:"h-14 w-14 mx-auto text-gray-300 mb-3",strokeWidth:1.2}),
+/* @__PURE__ */c("h3",{className:"text-base font-semibold text-gray-800 mb-1",children:[v(e)," can't be embedded"]}),
+/* @__PURE__ */c("p",{className:"text-sm text-gray-500 mb-4",children:["This site sends an ",
+/* @__PURE__ */m("span",{className:"font-mono text-xs",children:"X-Frame-Options"})," ","or ",
+/* @__PURE__ */m("span",{className:"font-mono text-xs",children:"Content-Security-Policy"})," header that refuses iframe embedding. The browser blocks the load before our app can do anything about it."]}),
+/* @__PURE__ */c("div",{className:"flex flex-col items-center gap-2",children:[
+/* @__PURE__ */c("button",{onClick:r,className:"px-4 py-2 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 inline-flex items-center gap-2",children:[
+/* @__PURE__ */m(s,{name:"external",className:"h-4 w-4",strokeWidth:1.5}),"Open in a new tab"]}),
+/* @__PURE__ */m("button",{onClick:()=>h(!0),className:"text-xs text-gray-500 hover:text-gray-800 underline",children:"Try loading it here anyway"})]})]})}):/* @__PURE__ */c(u,{children:[
+/* @__PURE__ */m("iframe",{ref:o,src:e,className:"absolute inset-0 w-full h-full bg-white",sandbox:"allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals",referrerPolicy:"no-referrer-when-downgrade"},t+e),n&&/* @__PURE__ */c("div",{className:"absolute top-2 right-2 max-w-sm bg-white border border-gray-200 rounded-md shadow-lg p-3 text-xs text-gray-700 z-10",children:[
+/* @__PURE__ */m("div",{className:"font-medium text-gray-900 mb-1",children:"Why is this page blank?"}),
+/* @__PURE__ */c("p",{className:"mb-2",children:["Most major sites (Google, GitHub, banks, news) refuse to be embedded in an iframe via ",
+/* @__PURE__ */m("span",{className:"font-mono",children:"X-Frame-Options"})," or Content Security Policy. There's no workaround — the browser blocks the load before our app can do anything."]}),
+/* @__PURE__ */c("p",{children:["Hit the ",
+/* @__PURE__ */m("span",{className:"font-medium",children:"↗"})," button to open the page in a real new tab. Sites that ",
+/* @__PURE__ */m("em",{children:"do"})," allow embedding (Wikipedia, DevDocs, your own apps) work fine in here."]}),
+/* @__PURE__ */m("button",{onClick:a,className:"mt-2 text-2xs text-blue-600 hover:underline",children:"Got it"})]})]})}export{y as default};

package/dist/Calculator-CSYRZAS5.js

@@ -0,0 +1,29 @@
+import{loadAppearance as e,WidgetSettingsModal as t}from"./chunk-ZYDZY6ED.js";import{useWidgetSettings as n}from"./chunk-DZTAGMNY.js";import"./chunk-CY5N5OA3.js";import"./chunk-AW7TOB6N.js";import"./chunk-KNUR2UEG.js";import"./chunk-JDCM2VHG.js";import"./chunk-AGUA3O5O.js";import"./chunk-ZDMZM7HD.js";import"./chunk-5A7MWTXX.js";import"./chunk-VG2R6PZV.js";import"./chunk-IK2WXW2E.js";import"./chunk-6453ISTQ.js";import"./chunk-KC3EX26K.js";import"./chunk-PDXPMHG3.js";import"./chunk-4AJRHTTB.js";import"./chunk-VWGWZY7A.js";import"./chunk-PKXQDCNR.js";import"./chunk-UGTRSRIW.js";import"./chunk-X7PM7JOD.js";import"./chunk-CDAJKLGL.js";import"./chunk-FPGRKHUW.js";import"./chunk-URHGHXDN.js";import"./chunk-5QFPTDQF.js";import"./chunk-LNARMEEZ.js";import"./chunk-NHH2MXFU.js";import"./chunk-UQYNPYF4.js";import"./chunk-HL6JSDN3.js";import{Icon as r}from"./chunk-FSPFV4MI.js";import"./chunk-J75ZT2JQ.js";import"./chunk-R2VKEMZH.js";import"./chunk-MRJKZWWV.js";import"./chunk-OZAAIE4E.js";import"./chunk-BCDG4N6L.js";import"./chunk-PGN5ME7B.js";import"./chunk-62LW225J.js";import"./chunk-GLUJS42B.js";import"./chunk-D65T4H6J.js";import"./chunk-DTJRIWFR.js";import"./chunk-TWVUQUUD.js";import"./chunk-QWHQJNKL.js";import"./chunk-C3QOHMR6.js";import{useState as c,useRef as i,useCallback as l,useEffect as o}from"react";import{jsxs as s,Fragment as a,jsx as u}from"react/jsx-runtime";var h="calc_appearance";function m(){const[m,k]=c("0"),[p,d]=c(null),[b,g]=c(null),[N,j]=c(!1),[y,x]=c(""),[f,v]=c([]),[C,$]=c(!1),[E,D]=c(()=>e(h)),[W,T]=c(!1),[A,M]=c(E),R=i(null);n(l(()=>{M({...E}),T(!0)},[E]));const w=l(e=>{x(""),k(t=>N||"0"===t?(j(!1),"."===e?"0.":e):"."===e&&t.includes(".")?t:t+e)},[N]),G=l(()=>{k("0"),d(null),g(null),j(!1)},[]),H=l((e,t,n)=>{switch(n){case"+":return e+t;case"-":return e-t;case"×":return e*t;case"÷":return 0===t?0:e/t;default:return t}},[]),J=l(e=>{const t=parseFloat(m);if(null!==p&&b&&!N){const e=H(p,t,b);k(String(e)),d(e),v(n=>[`${p} ${b} ${t} = ${e}`,...n].slice(0,20))}else d(t);g(e),j(!0)},[m,p,b,N,H]),F=l(()=>{if(null===p||!b)return;const e=parseFloat(m),t=H(p,e,b),n=`${p} ${b} ${e} =`;v(e=>[`${n} ${t}`,...e].slice(0,20)),x(n),k(String(t)),d(null),g(null),j(!0)},[m,p,b,H]),S=l(()=>{k(e=>String(parseFloat(e)/100))},[]),U=l(()=>{k(e=>e.startsWith("-")?e.slice(1):"0"===e?e:"-"+e)},[]);o(()=>{const e=e=>{const t=e.target.tagName;"INPUT"!==t&&"TEXTAREA"!==t&&"SELECT"!==t&&(e.key>="0"&&e.key<="9"?w(e.key):"."===e.key?w("."):"+"===e.key?J("+"):"-"===e.key?J("-"):"*"===e.key?J("×"):"/"===e.key?(e.preventDefault(),J("÷")):"Enter"===e.key||"="===e.key?("Enter"===e.key&&e.target instanceof Node&&R.current?.contains(e.target)&&e.preventDefault(),F()):"Escape"===e.key?G():"Backspace"===e.key?k(e=>e.length>1?e.slice(0,-1):"0"):"%"===e.key&&S())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[w,J,F,G,S]);const Z="flex items-center justify-center rounded-lg text-sm font-medium transition-colors",L=`${Z} bg-white border border-gray-200 text-gray-900 hover:bg-gray-50 active:bg-gray-100`,P=`${Z} bg-blue-50 border border-blue-200 text-blue-700 hover:bg-blue-100 active:bg-blue-200`,K=`${Z} bg-gray-100 border border-gray-200 text-gray-600 hover:bg-gray-200 active:bg-gray-300`,Q=`${Z} bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800`;/* @__PURE__ */
+return s(a,{children:[
+/* @__PURE__ */s("div",{ref:R,className:"flex flex-col h-full",style:{opacity:E.activeOpacity/100,backdropFilter:E.activeBlur>0?`blur(${E.activeBlur}px)`:void 0},children:[
+/* @__PURE__ */s("div",{className:"bg-slate-200 rounded-t-lg px-4 py-2 group/display relative flex flex-col justify-end min-h-[120px] border-b border-slate-300",children:[
+/* @__PURE__ */u("div",{className:"flex flex-col justify-end flex-1 overflow-hidden",children:f.slice(0,3).reverse().map((e,t)=>/* @__PURE__ */u("div",{className:"text-2xs text-slate-400 text-right font-mono truncate",children:e},t))}),(y||b&&null!==p)&&/* @__PURE__ */u("div",{className:"text-base text-slate-600 text-right font-mono",children:y||`${p} ${b} ${N?"":m}`}),
+/* @__PURE__ */s("div",{className:"flex items-center gap-2",children:[
+/* @__PURE__ */u("button",{onClick:()=>{navigator.clipboard.writeText(m),$(!0),setTimeout(()=>$(!1),1200)},title:"Copy result",className:"shrink-0 text-slate-300 hover:text-slate-500 transition-colors opacity-0 group-hover/display:opacity-100",children:/* @__PURE__ */u(r,C?{name:"check",className:"h-5 w-5 text-green-500",strokeWidth:2}:{name:"copy",className:"h-5 w-5",strokeWidth:2})}),
+/* @__PURE__ */u("div",{className:"text-right text-4xl font-mono font-bold text-slate-800 truncate flex-1",children:(e=>{const t=parseFloat(e);return isNaN(t)||e.endsWith(".")||e.endsWith(".0")||Math.abs(t)<1e15&&e.length<16?e:t.toExponential(6)})(m)})]})]}),
+/* @__PURE__ */s("div",{className:"grid grid-cols-4 grid-rows-5 gap-2 flex-1 min-h-0 p-2",children:[
+/* @__PURE__ */u("button",{onClick:G,className:K,children:"AC"}),
+/* @__PURE__ */u("button",{onClick:U,className:K,children:"+/−"}),
+/* @__PURE__ */u("button",{onClick:S,className:K,children:"%"}),
+/* @__PURE__ */u("button",{onClick:()=>J("÷"),className:`${P} ${"÷"===b?"ring-2 ring-blue-400":""}`,children:"÷"}),
+/* @__PURE__ */u("button",{onClick:()=>w("7"),className:L,children:"7"}),
+/* @__PURE__ */u("button",{onClick:()=>w("8"),className:L,children:"8"}),
+/* @__PURE__ */u("button",{onClick:()=>w("9"),className:L,children:"9"}),
+/* @__PURE__ */u("button",{onClick:()=>J("×"),className:`${P} ${"×"===b?"ring-2 ring-blue-400":""}`,children:"×"}),
+/* @__PURE__ */u("button",{onClick:()=>w("4"),className:L,children:"4"}),
+/* @__PURE__ */u("button",{onClick:()=>w("5"),className:L,children:"5"}),
+/* @__PURE__ */u("button",{onClick:()=>w("6"),className:L,children:"6"}),
+/* @__PURE__ */u("button",{onClick:()=>J("-"),className:`${P} ${"-"===b?"ring-2 ring-blue-400":""}`,children:"−"}),
+/* @__PURE__ */u("button",{onClick:()=>w("1"),className:L,children:"1"}),
+/* @__PURE__ */u("button",{onClick:()=>w("2"),className:L,children:"2"}),
+/* @__PURE__ */u("button",{onClick:()=>w("3"),className:L,children:"3"}),
+/* @__PURE__ */u("button",{onClick:()=>J("+"),className:`${P} ${"+"===b?"ring-2 ring-blue-400":""}`,children:"+"}),
+/* @__PURE__ */u("button",{onClick:()=>w("0"),className:`${L} col-span-2`,children:"0"}),
+/* @__PURE__ */u("button",{onClick:()=>w("."),className:L,children:"."}),
+/* @__PURE__ */u("button",{onClick:F,className:Q,children:"="})]})]}),
+/* @__PURE__ */u(t,{open:W,onClose:()=>T(!1),title:"Calculator Settings",appearance:A,onAppearanceChange:M,onSave:()=>{D(A),localStorage.setItem(h,JSON.stringify(A)),T(!1)}})]})}export{m as default};

package/dist/CurrencyConverter-SSR2XDIC.js

@@ -0,0 +1,21 @@
+import{loadAppearance as t,WidgetSettingsModal as e}from"./chunk-ZYDZY6ED.js";import{useWidgetSettings as r}from"./chunk-DZTAGMNY.js";import"./chunk-CY5N5OA3.js";import"./chunk-AW7TOB6N.js";import"./chunk-KNUR2UEG.js";import"./chunk-JDCM2VHG.js";import"./chunk-AGUA3O5O.js";import"./chunk-ZDMZM7HD.js";import"./chunk-5A7MWTXX.js";import"./chunk-VG2R6PZV.js";import"./chunk-IK2WXW2E.js";import"./chunk-6453ISTQ.js";import"./chunk-KC3EX26K.js";import"./chunk-PDXPMHG3.js";import"./chunk-4AJRHTTB.js";import"./chunk-VWGWZY7A.js";import"./chunk-PKXQDCNR.js";import"./chunk-UGTRSRIW.js";import"./chunk-X7PM7JOD.js";import"./chunk-CDAJKLGL.js";import"./chunk-FPGRKHUW.js";import"./chunk-URHGHXDN.js";import"./chunk-5QFPTDQF.js";import"./chunk-LNARMEEZ.js";import"./chunk-NHH2MXFU.js";import"./chunk-UQYNPYF4.js";import"./chunk-HL6JSDN3.js";import"./chunk-FSPFV4MI.js";import"./chunk-J75ZT2JQ.js";import{LoadingSpinner as n}from"./chunk-R2VKEMZH.js";import"./chunk-MRJKZWWV.js";import"./chunk-OZAAIE4E.js";import"./chunk-BCDG4N6L.js";import"./chunk-PGN5ME7B.js";import"./chunk-62LW225J.js";import"./chunk-GLUJS42B.js";import"./chunk-D65T4H6J.js";import"./chunk-DTJRIWFR.js";import"./chunk-TWVUQUUD.js";import"./chunk-QWHQJNKL.js";import"./chunk-C3QOHMR6.js";import{useState as s,useCallback as o,useEffect as a}from"react";import{jsxs as c,Fragment as i,jsx as l}from"react/jsx-runtime";var m=["USD","CNY","AUD","GBP","EUR","JPY","CAD","THB","NZD","SGD","HKD","CHF","KRW","INR","MXN","BRL"],u=[["USD","CNY"],["USD","AUD"],["GBP","USD"],["USD","JPY"]],p="currency_pairs",h="currency_appearance",d="currency_rates_cache";function g(t){try{const e=JSON.parse(localStorage.getItem(d)||"{}")[t];if(e&&Date.now()-e.timestamp<36e5)return e.rates}catch{}return null}function k(t,e){try{const r=JSON.parse(localStorage.getItem(d)||"{}");r[t]={rates:e,timestamp:Date.now()},localStorage.setItem(d,JSON.stringify(r))}catch{}}function N(){try{const t=JSON.parse(localStorage.getItem(p)||"");if(Array.isArray(t)&&t.length)return t.slice(0,4)}catch{}return u}var f={USD:"🇺🇸",CNY:"🇨🇳",AUD:"🇦🇺",GBP:"🇬🇧",JPY:"🇯🇵",CAD:"🇨🇦",EUR:"🇪🇺",THB:"🇹🇭",NZD:"🇳🇿",SGD:"🇸🇬",HKD:"🇭🇰",CHF:"🇨🇭",KRW:"🇰🇷",INR:"🇮🇳",MXN:"🇲🇽",BRL:"🇧🇷"};function j(){const[u,d]=s(N),[j,x]=s(()=>t(h)),[y,b]=s({}),[D,S]=s(!1),[v,C]=s(!1),[U,J]=s([]),[R,A]=s(j),[H,G]=s("USD"),[M,P]=s("CNY");r(o(()=>{J([...u]),A({...j}),C(!0)},[u,j])),a(()=>{const t=[...new Set(u.map(([t])=>t))];let e=!0;return async function(){S(!0);const r={};for(const e of t){const t=g(e);if(t)r[e]=t;else try{const t=await fetch(`https://open.er-api.com/v6/latest/${e}`),n=await t.json();n.rates&&(r[e]=n.rates,k(e,n.rates))}catch{}}e&&(b(r),S(!1))}(),()=>{e=!1}},[u]);/* @__PURE__ */
+return c(i,{children:[
+/* @__PURE__ */l("div",{style:{backgroundColor:`rgb(var(--taskbar-bg-rgb, 243 244 246) / ${j.activeOpacity/100})`,backdropFilter:j.activeBlur>0?`blur(${j.activeBlur}px)`:void 0},children:/* @__PURE__ */c("div",{className:"px-4 py-3 space-y-1",children:[D&&/* @__PURE__ */l(n,{size:"sm",padding:"py-4",label:"Loading rates"}),u.map(([t,e],r)=>{const n=y[t]?.[e];/* @__PURE__ */
+return c("button",{onClick:()=>{const t=u.map((t,e)=>e===r?[t[1],t[0]]:t);d(t),localStorage.setItem(p,JSON.stringify(t))},className:"flex items-center justify-between px-2 py-2 border-b border-gray-200 last:border-0 w-full hover:bg-gray-100 rounded transition-colors cursor-pointer",children:[
+/* @__PURE__ */c("div",{className:"flex items-center gap-2",children:[
+/* @__PURE__ */l("span",{className:"text-base",children:f[t]||""}),
+/* @__PURE__ */l("span",{className:"text-sm font-semibold text-gray-700",children:t}),
+/* @__PURE__ */l("svg",{className:"h-3 w-3 text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:/* @__PURE__ */l("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"})}),
+/* @__PURE__ */l("span",{className:"text-base",children:f[e]||""}),
+/* @__PURE__ */l("span",{className:"text-sm font-semibold text-gray-700",children:e})]}),
+/* @__PURE__ */l("div",{className:"text-base font-mono font-semibold text-gray-900 tabular-nums",children:null!=n?n.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:4}):"—"})]},`${t}-${e}-${r}`)})]})}),
+/* @__PURE__ */l(e,{open:v,onClose:()=>C(!1),title:"Currency Settings",appearance:R,onAppearanceChange:A,onSave:()=>{if(0===U.length)return;const t=U.slice(0,4);d(t),x(R),localStorage.setItem(p,JSON.stringify(t)),localStorage.setItem(h,JSON.stringify(R)),C(!1)},children:/* @__PURE__ */c("div",{children:[
+/* @__PURE__ */c("h3",{className:"text-sm font-semibold text-ink mb-2",children:["Currency Pairs ",
+/* @__PURE__ */c("span",{className:"text-2xs font-normal text-ink-faintest",children:["(",U.length,"/",4,")"]})]}),
+/* @__PURE__ */l("div",{className:"space-y-1 mb-2",children:U.map(([t,e],r)=>/* @__PURE__ */c("div",{className:"flex items-center justify-between py-1 px-2 bg-gray-50 rounded",children:[
+/* @__PURE__ */c("span",{className:"text-sm",children:[f[t]||""," ",t," → ",f[e]||""," ",e]}),
+/* @__PURE__ */l("button",{onClick:()=>J(t=>t.filter((t,e)=>e!==r)),className:"text-red-400 hover:text-red-600",children:"×"})]},r))}),U.length<4?/* @__PURE__ */c("div",{className:"flex items-center gap-2",children:[
+/* @__PURE__ */l("select",{value:H,onChange:t=>G(t.target.value),className:"bg-gray-50 border border-gray-200 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500",children:m.map(t=>/* @__PURE__ */l("option",{children:t},t))}),
+/* @__PURE__ */l("span",{className:"text-gray-400",children:"→"}),
+/* @__PURE__ */l("select",{value:M,onChange:t=>P(t.target.value),className:"bg-gray-50 border border-gray-200 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500",children:m.map(t=>/* @__PURE__ */l("option",{children:t},t))}),
+/* @__PURE__ */l("button",{onClick:()=>{H!==M&&U.length<4&&J(t=>[...t,[H,M]])},className:"text-sm font-medium text-blue-600 hover:text-blue-800 px-2",children:"+ Add"})]}):/* @__PURE__ */c("p",{className:"text-2xs text-ink-faintest italic",children:["Max ",4," pairs — remove one to add another."]})]})})]})}export{j as default};

package/dist/{Documents-VVKKYYJS.js → Documents-T7JYO223.js}

@@ -1,25 +1,25 @@
-import{escapeHtml as e}from"./chunk-G6DKCCWH.js";import{AboutApp as t}from"./chunk-VFCWCGO3.js";import{WindowTitle as n}from"./chunk-6NSCK3YX.js";import"./chunk-CY5N5OA3.js";import"./chunk-AW7TOB6N.js";import"./chunk-KNUR2UEG.js";import"./chunk-JDCM2VHG.js";import"./chunk-BMPBVI7P.js";import"./chunk-5A7MWTXX.js";import"./chunk-Y53KNQKL.js";import"./chunk-6WWAQC5V.js";import"./chunk-EGDJEY4K.js";import"./chunk-GNPTNAZH.js";import"./chunk-4AJRHTTB.js";import"./chunk-VWGWZY7A.js";import"./chunk-PKXQDCNR.js";import{toast_default as r}from"./chunk-4NXMMWL6.js";import"./chunk-ET2EF5CI.js";import"./chunk-UGTRSRIW.js";import"./chunk-CDAJKLGL.js";import"./chunk-KC3EX26K.js";import"./chunk-NMKADD77.js";import{PopupMenu as o,PopupMenuLabel as i,PopupMenuItem as l,PopupMenuDivider as a}from"./chunk-L5ND7FNA.js";import"./chunk-5QFPTDQF.js";import"./chunk-QR4RM7PO.js";import"./chunk-D323R2FT.js";import"./chunk-4IU5BSVE.js";import"./chunk-K7U4RWXJ.js";import{Icon as s}from"./chunk-FSPFV4MI.js";import"./chunk-J75ZT2JQ.js";import"./chunk-VH6GB73Q.js";import{LoadingSpinner as c}from"./chunk-Q5MD3VY6.js";import"./chunk-MRJKZWWV.js";import"./chunk-6KO5VTL7.js";import"./chunk-22S6LG6D.js";import"./chunk-PGN5ME7B.js";import"./chunk-62LW225J.js";import"./chunk-GLUJS42B.js";import"./chunk-D65T4H6J.js";import"./chunk-DTJRIWFR.js";import"./chunk-TWVUQUUD.js";import"./chunk-E6UCGCOC.js";import"./chunk-C3QOHMR6.js";import{useState as m,useRef as h}from"react";import{jsxs as d,jsx as u}from"react/jsx-runtime";var p=/* @__PURE__ */new Set(["txt","md","markdown","csv","tsv","log","json","xml","html","htm","css","js","jsx","ts","tsx","py","rb","go","rs","java","c","h","cpp","hpp","sh","bash","yml","yaml","toml","ini","conf","env","sql"]),g=/* @__PURE__ */new Set(["docx"]),x={filename:"Untitled",kind:"docx",content:"",ext:"docx"};function f(){const[f,y]=m(x),[k,v]=m(!1),[b,w]=m(!1),[j,N]=m(!1),[C,D]=m(null),M=h(null),L=h(null),R=h(null),U=(e,t)=>{R.current?.focus(),document.execCommand(e,!1,t),N(!0)},W=e=>{for(const t of e){if(!t.type.startsWith("image/"))continue;const e=new FileReader;e.onload=()=>{R.current?.focus(),document.execCommand("insertImage",!1,String(e.result)),N(!0)},e.readAsDataURL(t)}},T=e=>{C&&(C.el.removeAttribute("width"),C.el.removeAttribute("height"),C.el.style.width=e??"",C.el.style.height=e?"auto":"",N(!0),D(null))},A=async t=>{const n=(t.name.split(".").pop()||"").toLowerCase();v(!0);try{if(p.has(n)||!g.has(n)&&t.type.startsWith("text/")){const r=await t.text(),o=e(r).replace(/\n/g,"<br>");y({filename:t.name,kind:"text",content:o,ext:n}),N(!1)}else if(g.has(n))try{const e=await(import(
+import{escapeHtml as e}from"./chunk-G6DKCCWH.js";import{AboutApp as t}from"./chunk-LAEXWXJA.js";import{WindowTitle as n}from"./chunk-DZTAGMNY.js";import"./chunk-CY5N5OA3.js";import"./chunk-AW7TOB6N.js";import"./chunk-KNUR2UEG.js";import"./chunk-JDCM2VHG.js";import"./chunk-AGUA3O5O.js";import"./chunk-ZDMZM7HD.js";import"./chunk-5A7MWTXX.js";import"./chunk-VG2R6PZV.js";import"./chunk-IK2WXW2E.js";import"./chunk-6453ISTQ.js";import"./chunk-KC3EX26K.js";import"./chunk-PDXPMHG3.js";import"./chunk-4AJRHTTB.js";import"./chunk-VWGWZY7A.js";import"./chunk-PKXQDCNR.js";import{toast_default as r}from"./chunk-XD34TCRG.js";import"./chunk-UGTRSRIW.js";import"./chunk-X7PM7JOD.js";import"./chunk-CDAJKLGL.js";import"./chunk-L4TN4EWK.js";import{PopupMenu as o,PopupMenuLabel as i,PopupMenuItem as l,PopupMenuDivider as a}from"./chunk-FPGRKHUW.js";import"./chunk-URHGHXDN.js";import"./chunk-5QFPTDQF.js";import"./chunk-LNARMEEZ.js";import"./chunk-NHH2MXFU.js";import"./chunk-UQYNPYF4.js";import"./chunk-HL6JSDN3.js";import{Icon as s}from"./chunk-FSPFV4MI.js";import"./chunk-J75ZT2JQ.js";import{LoadingSpinner as c}from"./chunk-R2VKEMZH.js";import"./chunk-MRJKZWWV.js";import"./chunk-OZAAIE4E.js";import"./chunk-BCDG4N6L.js";import"./chunk-PGN5ME7B.js";import"./chunk-62LW225J.js";import"./chunk-GLUJS42B.js";import"./chunk-D65T4H6J.js";import"./chunk-DTJRIWFR.js";import"./chunk-TWVUQUUD.js";import"./chunk-QWHQJNKL.js";import"./chunk-C3QOHMR6.js";import{useState as m,useRef as d}from"react";import{jsxs as h,jsx as u}from"react/jsx-runtime";var p=/* @__PURE__ */new Set(["txt","md","markdown","csv","tsv","log","json","xml","html","htm","css","js","jsx","ts","tsx","py","rb","go","rs","java","c","h","cpp","hpp","sh","bash","yml","yaml","toml","ini","conf","env","sql"]),g=/* @__PURE__ */new Set(["docx"]),x={filename:"Untitled",kind:"docx",content:"",ext:"docx"};function f(){const[f,y]=m(x),[k,v]=m(!1),[b,j]=m(!1),[w,N]=m(!1),[D,C]=m(null),M=d(null),L=d(null),R=d(null),U=(e,t)=>{R.current?.focus(),document.execCommand(e,!1,t),N(!0)},W=e=>{for(const t of e){if(!t.type.startsWith("image/"))continue;const e=new FileReader;e.onload=()=>{R.current?.focus(),document.execCommand("insertImage",!1,String(e.result)),N(!0)},e.readAsDataURL(t)}},T=e=>{D&&(D.el.removeAttribute("width"),D.el.removeAttribute("height"),D.el.style.width=e??"",D.el.style.height=e?"auto":"",N(!0),C(null))},A=async t=>{const n=(t.name.split(".").pop()||"").toLowerCase();v(!0);try{if(p.has(n)||!g.has(n)&&t.type.startsWith("text/")){const r=await t.text(),o=e(r).replace(/\n/g,"<br>");y({filename:t.name,kind:"text",content:o,ext:n}),N(!1)}else if(g.has(n))try{const e=await(import(
 /* @vite-ignore */
-"mammoth")),r=await t.arrayBuffer(),o=await e.convertToHtml({arrayBuffer:r});y({filename:t.name,kind:"docx",content:o.value||"<p><em>(empty document)</em></p>",ext:n}),N(!1)}catch(e){r.error('Install the optional "mammoth" peer dep to read .docx files.')}else"doc"===n?r.error(".doc is the legacy Word binary format — convert to .docx first."):r.error(`Unsupported file type: .${n||"unknown"}`)}finally{v(!1)}},B=f?.filename?(O=f.filename).length>24?`${O.slice(0,23)}…`:O:"Untitled";var O;/* @__PURE__ */
-return d("div",{className:"relative flex flex-col h-full",onDragOver:e=>{e.preventDefault(),b||w(!0)},onDragLeave:e=>{e.currentTarget===e.target&&w(!1)},onDrop:e=>{e.preventDefault(),w(!1);const t=Array.from(e.dataTransfer.files??[]);0!==t.length&&(t.every(e=>e.type.startsWith("image/"))?W(t):A(t[0]))},children:[
-/* @__PURE__ */u(n,{title:`${B}${j?" •":""} - Documents`}),
+"mammoth")),r=await t.arrayBuffer(),o=await e.convertToHtml({arrayBuffer:r});y({filename:t.name,kind:"docx",content:o.value||"<p><em>(empty document)</em></p>",ext:n}),N(!1)}catch(e){r.error('Install the optional "mammoth" peer dep to read .docx files.')}else"doc"===n?r.error(".doc is the legacy Word binary format — convert to .docx first."):r.error(`Unsupported file type: .${n||"unknown"}`)}finally{v(!1)}},H=f?.filename?(O=f.filename).length>24?`${O.slice(0,23)}…`:O:"Untitled";var O;/* @__PURE__ */
+return h("div",{className:"relative flex flex-col h-full",onDragOver:e=>{e.preventDefault(),b||j(!0)},onDragLeave:e=>{e.currentTarget===e.target&&j(!1)},onDrop:e=>{e.preventDefault(),j(!1);const t=Array.from(e.dataTransfer.files??[]);0!==t.length&&(t.every(e=>e.type.startsWith("image/"))?W(t):A(t[0]))},children:[
+/* @__PURE__ */u(n,{title:`${H}${w?" •":""} - Documents`}),
 /* @__PURE__ */u(t,{app:"documents"}),
-/* @__PURE__ */d("div",{className:"flex items-center flex-wrap gap-x-2 gap-y-1 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0",children:[
+/* @__PURE__ */h("div",{className:"flex items-center flex-wrap gap-x-2 gap-y-1 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0",children:[
 /* @__PURE__ */u("input",{ref:M,type:"file",accept:".txt,.md,.csv,.tsv,.log,.json,.xml,.html,.htm,.css,.js,.jsx,.ts,.tsx,.py,.rb,.go,.rs,.java,.c,.h,.cpp,.hpp,.sh,.bash,.yml,.yaml,.toml,.ini,.conf,.env,.sql,.docx,text/*",onChange:e=>{const t=e.target.files?.[0];t&&A(t),M.current&&(M.current.value="")},className:"hidden"}),
-/* @__PURE__ */d("button",{onClick:()=>M.current?.click(),className:"text-xs text-gray-700 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors flex items-center gap-1",children:[
+/* @__PURE__ */h("button",{onClick:()=>M.current?.click(),className:"text-xs text-gray-700 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors flex items-center gap-1",children:[
 /* @__PURE__ */u(s,{name:"folder-open",className:"h-3.5 w-3.5",strokeWidth:1.5}),"Open"]}),
 /* @__PURE__ */u("button",{onClick:()=>{if(!f)return;const t=R.current?.innerHTML??"";if("text"===f.kind){if(/<(b|strong|i|em|u|font|span style|ul|ol|img)|style="[^"]*text-align/i.test(t)){const n=new Blob([`<!doctype html><meta charset="utf-8"><title>${e(f.filename)}</title><body style="font-family:ui-monospace,monospace;white-space:pre-wrap">${t}`],{type:"text/html"}),r=URL.createObjectURL(n),o=document.createElement("a");o.href=r,o.download=`${f.filename.replace(/\.[^.]+$/,"")}.html`,o.click(),URL.revokeObjectURL(r)}else{const e=R.current?.innerText??"",t=new Blob([e],{type:"text/plain"}),n=URL.createObjectURL(t),r=document.createElement("a");r.href=n,r.download=f.filename,r.click(),URL.revokeObjectURL(n)}}else{const n=new Blob([`<!doctype html><meta charset="utf-8"><title>${e(f.filename)}</title>${t}`],{type:"text/html"}),r=URL.createObjectURL(n),o=document.createElement("a");o.href=r,o.download=`${f.filename.replace(/\.docx$/i,"")}.html`,o.click(),URL.revokeObjectURL(r)}},className:"text-xs text-gray-700 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",children:"Save"}),
-/* @__PURE__ */u("span",{className:"text-2xs text-gray-400 ml-1",children:"TXT · DOCX · Code"}),
+/* @__PURE__ */u("span",{className:"text-2xs text-ink-faintest ml-1",children:"TXT · DOCX · Code"}),
 /* @__PURE__ */u("div",{className:"h-4 w-px bg-gray-300 mx-1"}),
-/* @__PURE__ */d("span",{className:"text-xs font-medium text-gray-700 truncate max-w-[200px]",title:f.filename,children:[f.filename,j?" •":""]}),
+/* @__PURE__ */h("span",{className:"text-xs font-medium text-gray-700 truncate max-w-[200px]",title:f.filename,children:[f.filename,w?" •":""]}),
 /* @__PURE__ */u("div",{className:"h-4 w-px bg-gray-300 mx-1"}),
-/* @__PURE__ */d("div",{className:"flex items-center gap-0.5",children:[
+/* @__PURE__ */h("div",{className:"flex items-center gap-0.5",children:[
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("bold"),className:"px-2 py-1 text-xs rounded font-bold text-gray-700 hover:bg-gray-200 transition-colors",title:"Bold",children:"B"}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("italic"),className:"px-2 py-1 text-xs rounded italic text-gray-700 hover:bg-gray-200 transition-colors",title:"Italic",children:"I"}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("underline"),className:"px-2 py-1 text-xs rounded underline text-gray-700 hover:bg-gray-200 transition-colors",title:"Underline",children:"U"}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("strikeThrough"),className:"px-2 py-1 text-xs rounded line-through text-gray-700 hover:bg-gray-200 transition-colors",title:"Strikethrough",children:"S"})]}),
 /* @__PURE__ */u("div",{className:"h-4 w-px bg-gray-300 mx-1"}),
-/* @__PURE__ */d("select",{onMouseDown:e=>e.preventDefault(),onChange:e=>{U("fontSize",e.target.value),e.currentTarget.value=""},defaultValue:"",className:"text-xs border border-gray-300 rounded px-1 py-0.5 bg-white",children:[
+/* @__PURE__ */h("select",{onMouseDown:e=>e.preventDefault(),onChange:e=>{U("fontSize",e.target.value),e.currentTarget.value=""},defaultValue:"",className:"text-xs border border-gray-300 rounded px-1 py-0.5 bg-white",children:[
 /* @__PURE__ */u("option",{value:"",disabled:!0,children:"Size"}),
 /* @__PURE__ */u("option",{value:"1",children:"XS"}),
 /* @__PURE__ */u("option",{value:"2",children:"S"}),
@@ -32,16 +32,16 @@ return d("div",{className:"relative flex flex-col h-full",onDragOver:e=>{e.preve
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("insertUnorderedList"),className:"px-2 py-1 text-xs rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Bulleted list",children:"• List"}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("insertOrderedList"),className:"px-2 py-1 text-xs rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Numbered list",children:"1."}),
 /* @__PURE__ */u("div",{className:"h-4 w-px bg-gray-300 mx-1"}),
-/* @__PURE__ */d("div",{className:"flex items-center gap-0.5",children:[
+/* @__PURE__ */h("div",{className:"flex items-center gap-0.5",children:[
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("justifyLeft"),className:"px-2 py-1 rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Align left",children:/* @__PURE__ */u("svg",{className:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.8,children:/* @__PURE__ */u("path",{strokeLinecap:"round",d:"M3.75 6h16.5M3.75 12h9.75M3.75 18h14.25"})})}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("justifyCenter"),className:"px-2 py-1 rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Align center",children:/* @__PURE__ */u("svg",{className:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.8,children:/* @__PURE__ */u("path",{strokeLinecap:"round",d:"M3.75 6h16.5M7.125 12h9.75M4.875 18h14.25"})})}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("justifyRight"),className:"px-2 py-1 rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Align right",children:/* @__PURE__ */u("svg",{className:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.8,children:/* @__PURE__ */u("path",{strokeLinecap:"round",d:"M3.75 6h16.5M10.5 12h9.75M6 18h14.25"})})}),
 /* @__PURE__ */u("button",{onMouseDown:e=>e.preventDefault(),onClick:()=>U("justifyFull"),className:"px-2 py-1 rounded text-gray-700 hover:bg-gray-200 transition-colors",title:"Justify",children:/* @__PURE__ */u("svg",{className:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.8,children:/* @__PURE__ */u("path",{strokeLinecap:"round",d:"M3.75 6h16.5M3.75 12h16.5M3.75 18h16.5"})})})]}),
 /* @__PURE__ */u("div",{className:"h-4 w-px bg-gray-300 mx-1"}),
 /* @__PURE__ */u("input",{ref:L,type:"file",accept:"image/*",multiple:!0,className:"hidden",onChange:e=>{e.target.files?.length&&W(Array.from(e.target.files)),L.current&&(L.current.value="")}}),
-/* @__PURE__ */d("button",{onClick:()=>L.current?.click(),className:"px-2 py-1 text-xs rounded text-gray-700 hover:bg-gray-200 transition-colors flex items-center gap-1",title:"Insert image (or paste / drop one)",children:[
+/* @__PURE__ */h("button",{onClick:()=>L.current?.click(),className:"px-2 py-1 text-xs rounded text-gray-700 hover:bg-gray-200 transition-colors flex items-center gap-1",title:"Insert image (or paste / drop one)",children:[
 /* @__PURE__ */u(s,{name:"image",className:"h-3.5 w-3.5",strokeWidth:1.5}),"Image"]})]}),
-/* @__PURE__ */u("div",{className:"flex-1 min-h-0 overflow-hidden",children:k?/* @__PURE__ */u(c,{size:"sm",padding:"",className:"h-full",label:"Loading"}):/* @__PURE__ */u("div",{className:"h-full overflow-auto "+("docx"===f.kind?"bg-gray-100 px-6 py-8":"bg-white"),children:/* @__PURE__ */u("div",{ref:R,contentEditable:!0,suppressContentEditableWarning:!0,spellCheck:!1,onInput:()=>N(!0),onPaste:e=>{const t=Array.from(e.clipboardData?.items??[]).filter(e=>"file"===e.kind&&e.type.startsWith("image/")).map(e=>e.getAsFile()).filter(e=>!!e);t.length&&(e.preventDefault(),W(t))},onClick:e=>{const t=e.target;"IMG"===t.tagName&&(e.preventDefault(),D({x:e.clientX,y:e.clientY,el:t}))},dangerouslySetInnerHTML:{__html:f.content},className:"docx"===f.kind?"docs-editor mx-auto w-[8.5in] min-h-[11in] bg-white p-[1in] shadow text-sm leading-relaxed text-gray-800 outline-none focus:ring-2 focus:ring-blue-400/40":"docs-editor block w-full min-h-full p-4 font-mono text-sm leading-relaxed text-gray-800 bg-white outline-none whitespace-pre-wrap"})})}),b&&/* @__PURE__ */u("div",{className:"absolute inset-0 bg-blue-500/15 border-4 border-dashed border-blue-500 pointer-events-none flex items-center justify-center z-20",children:/* @__PURE__ */u("div",{className:"px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium shadow-lg",children:"Drop a document to open · images insert into the page"})}),C&&/* @__PURE__ */d(o,{minWidth:150,style:{left:C.x,top:C.y},onClose:()=>D(null),children:[
+/* @__PURE__ */u("div",{className:"flex-1 min-h-0 overflow-hidden",children:k?/* @__PURE__ */u(c,{size:"sm",padding:"",className:"h-full",label:"Loading"}):/* @__PURE__ */u("div",{className:"h-full overflow-auto "+("docx"===f.kind?"bg-gray-100 px-6 py-8":"bg-white"),children:/* @__PURE__ */u("div",{ref:R,contentEditable:!0,suppressContentEditableWarning:!0,spellCheck:!1,onInput:()=>N(!0),onPaste:e=>{const t=Array.from(e.clipboardData?.items??[]).filter(e=>"file"===e.kind&&e.type.startsWith("image/")).map(e=>e.getAsFile()).filter(e=>!!e);t.length&&(e.preventDefault(),W(t))},onClick:e=>{const t=e.target;"IMG"===t.tagName&&(e.preventDefault(),C({x:e.clientX,y:e.clientY,el:t}))},dangerouslySetInnerHTML:{__html:f.content},className:"docx"===f.kind?"docs-editor mx-auto w-[8.5in] min-h-[11in] bg-surface p-[1in] shadow text-sm leading-relaxed text-ink-strong outline-none focus:ring-2 focus:ring-blue-400/40":"docs-editor block w-full min-h-full p-4 font-mono text-sm leading-relaxed text-ink-strong bg-surface outline-none whitespace-pre-wrap"})})}),b&&/* @__PURE__ */u("div",{className:"absolute inset-0 bg-blue-500/15 border-4 border-dashed border-blue-500 pointer-events-none flex items-center justify-center z-20",children:/* @__PURE__ */u("div",{className:"px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium shadow-lg",children:"Drop a document to open · images insert into the page"})}),D&&/* @__PURE__ */h(o,{minWidth:150,style:{left:D.x,top:D.y},onClose:()=>C(null),children:[
 /* @__PURE__ */u(i,{children:"Image width"}),
 /* @__PURE__ */u(l,{onClick:()=>T("25%"),children:"25%"}),
 /* @__PURE__ */u(l,{onClick:()=>T("50%"),children:"50%"}),
@@ -49,4 +49,4 @@ return d("div",{className:"relative flex flex-col h-full",onDragOver:e=>{e.preve
 /* @__PURE__ */u(l,{onClick:()=>T("100%"),children:"100%"}),
 /* @__PURE__ */u(l,{onClick:()=>T(null),children:"Original size"}),
 /* @__PURE__ */u(a,{}),
-/* @__PURE__ */u(l,{danger:!0,onClick:()=>{C?.el.remove(),N(!0),D(null)},children:"Remove image"})]})]})}export{f as default};
+/* @__PURE__ */u(l,{danger:!0,onClick:()=>{D?.el.remove(),N(!0),C(null)},children:"Remove image"})]})]})}export{f as default};