@trebired/frontend 1.19.5 → 4.0.0

package/CHANGELOG.md

@@ -1,208 +1,23 @@
 # Changelog
 
-All notable changes to `@trebired/frontend` will be documented here.
+All notable package changes are documented here.
 
-This project follows semantic versioning once published.
+## 4.0.0
 
-## Unreleased
+- Replaced styled component defaults with neutral structural defaults so app frontend config owns palette and tone values.
+- Added flash component token generation and removed package hardcoded palette-family fallbacks from generic UI styling.
 
-## 1.19.5
+## 3.0.0
 
-- Restored legacy popover item layout so package popovers stack and style links/actions vertically.
-- Made the top progress bar use a grayscale progress token fallback instead of the focus color.
-- Stopped emitting the obsolete `solid` class from primitive action buttons.
+- Removed the flash close button from runtime and React flash markup.
+- Restored flash countdown bars so the default color follows the flash level, with explicit progress-tone overrides still supported.
+- Restored compact flash spacing, title coloring, and header support-link rendering closer to the legacy platform styling.
+- Renamed the public config helpers to brand-neutral names: `defineFrontendConfig()`, `normalizeFrontendConfig()`, `loadFrontendConfig()`, `findFrontendConfig()`, and `generateFrontendScss()`.
+- Added a discipline rule banning hardcoded brand wording outside package metadata.
 
-## 1.19.4
+## 2.0.0
 
-- Restored legacy primitive card page backgrounds while keeping tabs and inputs on surface backgrounds.
-- Made advanced tabs explicitly inherit the configured sans font so Chromium renders them with the app font instead of native button fallback.
-
-## 1.19.3
-
-- Restored Inter inheritance for native controls so advanced tabs, buttons, inputs, selects, and textareas keep the app font instead of browser defaults.
-
-## 1.19.2
-
-- Restored legacy-compatible primitive card padding by having the package `card()` helper emit the shared `card` class alongside the package `tbf-card` marker.
-
-## 1.19.1
-
-- Fixed package-owned product chrome surfaces so they inherit config `background-page`, keep header support links horizontal on desktop, hide the mobile menu toggle outside mobile breakpoints, and preserve dark platform spacing/colors without app-side legacy chrome CSS.
-
-## 1.19.0
-
-- Added package-owned locale switching and source-language visualizer components/runtime so ecosystem apps can remove local language switcher, language card/modal, bucket filtering, and file-tree mounting code.
-
-## 1.18.1
-
-- Fixed the product shell sidebar controls prop type so the `about` JSX slot does not collide with React's built-in HTML `about` attribute.
-
-## 1.18.0
-
-- Added package-owned product shell composition helpers for primary headers, mobile navigation, mobile bottom bars, desktop sidebar shells, sidebar footer controls, theme/about/minimize actions, and shared shell state reading so ecosystem apps can remove local chrome scaffolding while keeping app-specific slots and data builders.
-
-## 1.17.0
-
-- Added package-owned logs viewer, stats/detail UI, live socket bootstrap, frontend-log ingestion bridge, and logs styles so ecosystem apps can remove local logs components/runtime.
-
-## 1.16.0
-
-- Added a package-owned runtime dropdown selector for Node.js, Bun, and Deno so ecosystem apps can remove local runtime dropdown wrappers.
-
-## 1.15.0
-
-- Added package-owned health usage graph presets for CPU, memory, GPU, download, and upload graphs so ecosystem apps can remove local metric graph wrapper components.
-
-## 1.14.1
-
-- Loosened the package-owned server graph root render type and exported `createServerGraphRoot` as a direct alias for graph boot controllers.
-
-## 1.14.0
-
-- Added package-owned advanced graph runtime with Chart.js rendering, boot-template mounting, unit switching, numeric point helpers, and server graph state helpers so ecosystem apps can remove local graph controllers.
-
-## 1.13.3
-
-- Added package-owned entity icon helpers so ecosystem apps can remove local entity icon factories while keeping app-specific icon specs.
-
-## 1.13.2
-
-- Added package-owned `.text-link` primitive styling so ecosystem apps can remove local text-link SCSS while keeping the shared class.
-
-## 1.13.1
-
-- Fixed the shell mobile navigation section prop type so JSX content slots are accepted by package consumers.
-
-## 1.13.0
-
-- Added package-owned shell header/mobile navigation composition helpers, support-link rendering, and shell chrome state helpers so ecosystem apps can share header/mobile structure while supplying app-specific slots.
-
-## 1.12.0
-
-- Added package-owned dynamic sidebar link-list rendering and live count/state/loader runtime so ecosystem apps can remove local sidebar DOM/update logic while keeping app-specific item builders and data adapters.
-
-## 1.11.0
-
-- Added package-owned standard action button helpers, copy button runtime, and copy-code cards so ecosystem apps can remove local action wrapper components.
-- Added package-owned markdown article, live island mount, searchable entity-list shell, runtime activity/progress helpers, and reusable progress bar controller exports.
-
-## 1.10.0
-
-- Added package-owned generic search panel/item/filter components and the full family-keyed search runtime so ecosystem apps can remove local search primitives.
-- Added package-owned shared steps panel, grouped step DOM rendering helpers, and steps controller exports for reusable action progress surfaces.
-- Added package-owned wizard markup helpers, runtime binding, and primitive CSS for reusable multi-step flows.
-
-## 1.9.0
-
-- Added package-owned generic explorer file-tree components, normalization helpers, and mount helpers for reusable tree browsing/selecting surfaces.
-- Added package-owned readonly editor viewer, content, diff, image-preview, and Monaco panes so ecosystem apps can remove local file viewer primitives.
-
-## 1.8.1
-
-- Accepted the app-supplied `lang` prop on generic editor surface/body props so migrated callers can keep passing locale context.
-
-## 1.8.0
-
-- Added package-owned generic code and Monaco editor primitives with runtime binding, theme-aware syntax highlighting, editable content fields, editor surfaces, and config-selected styles.
-- Added reusable content display primitives for app-shaped canvas panels, summary/title-description cards, and data tables through the React entrypoint.
-
-## 1.7.1
-
-- Loosened primitive prop types for app-specific attributes and restored the translated key-value row helper call signature.
-- Accepted snake-case `flash_error_only` action UI config alongside the camel-case API.
-
-## 1.7.0
-
-- Added package-owned generic primitive helpers for legacy-shaped button, card body/item/segments/select, form, avatar, pill, separator, list, key/value rows, masonry, loader, status dot, and time counter APIs through the existing root and React entrypoints.
-- Added config-selected primitive SCSS and package runtime binding for `data-tbf-time-counter` markup so ecosystem apps can remove local primitive copies without Sass/component subpath imports.
-
-## 1.6.0
-
-- Exposed `createKeyValueInputElement()` through the React entrypoint for package-owned key/value input DOM creation.
-
-## 1.5.0
-
-- Exposed advanced dropdown, checkbox, disclosure, and tabs helper functions through the root entrypoint so ecosystem apps can remove local primitive helper copies without importing package internals.
-
-## 1.4.0
-
-- Added explicit package-owned advanced graph/input exports and runtime binding for the former platform graph, dropdown, disclosure, tabs, checkbox, radio, status, search, toggle, upload, input, and roadmap helpers.
-
-## 1.3.0
-
-- Added package-owned generic header/mobile chrome, breadcrumb, disclosure, tabs, dropdown, search, choice/toggle/status inputs, graph/canvas/roadmap/heatmap surfaces, card/button surfaces, and sidebar link-list/live-slot APIs under the existing root and React entrypoints.
-
-## 1.2.1
-
-- Fixed package layout grid placement so main content stays in the center track when either sidebar is omitted.
-
-## 1.2.0
-
-- Fixed package-owned layout roots so `.tbf-layout` and `[data-tbf-layout-root]` always fill their parent width without app-side utility workarounds.
-- Added verification that config-bundled Fontsource assets do not emit duplicated `/assets/assets/` or `/../assets/` URL references.
-
-## 1.1.0
-
-- Moved the remaining generic app CSS surface into package-owned config CSS: base document reset, config-driven Fontsource font-face generation, global tokens, canvas background, spacing/margin helpers, wrapping row helpers, vertical alignment helpers, and generated spacing utilities.
-- Expanded the package flash system with confirmation variant helpers, text confirmation models, progress tones, live/sticky convenience methods, `showFlashMessage()`, and `window.flash` installation so ecosystem apps can consume flash directly from `@trebired/frontend`.
-
-## 1.0.0
-
-- Consolidated the public package API to structured entrypoints only: `@trebired/frontend`, `@trebired/frontend/config`, `@trebired/frontend/react`, and `@trebired/frontend/server`. Public Sass/component subpath exports are no longer part of the app contract.
-- Added config-driven palette and scale CSS generation so ecosystem apps declare theme values in `.trebired/frontend/config.ts` and `@trebired/bundler` compiles package CSS in memory.
-- Added package-owned generic utility CSS coverage for layout, spacing, sizing, text, border, alignment, and scroll helpers through the config-selected package CSS path.
-- Added the package-owned sidebar system with runtime binding, persisted minimize state, mobile open/close state, React markup components, boot script, and internal CSS.
-- Added the package-owned layout system with stable document/layout/main/content/header/bottom-bar/portal markup components, body-state boot script, runtime body-state syncing, and internal CSS so Trebired ecosystem apps share the same HTML structure.
-- Expanded fullscreen into a package-owned panel fullscreen system with registered targets, open/close/toggle controls, overlay/placeholder restoration, persisted target ids, React components, and internal CSS while keeping native browser fullscreen helpers.
-- Added the `@trebired/frontend/server` entrypoint for server-side icon helpers and middleware, and moved React component consumption behind `@trebired/frontend/react`.
-- Updated verification to enforce structured exports, absence of public Sass/component subpaths, config-bundled package CSS, and package-owned layout/sidebar/fullscreen behavior.
-
-## 0.5.0
-
-- Generalized the `./theme` runtime to an open, caller-supplied registry of named modes: `configureThemeModes()`, `getThemeModes()`, `themeModeKeys()`, `findThemeMode()`, `isThemeMode()`, mode-aware `setTheme()`/`normalizeTheme()`/`systemThemeKey()`, and `nextTheme()` as a cycler over the registry. `ThemeValue` is now `string`; `data-tbf-theme` accepts any registered key and `color-scheme` follows each mode's declared scheme.
-- Added `[data-tbf-theme-select]` control binding (`bindThemeControls()`, `bindThemeSelect()`, `bindThemeSelects()`, `syncThemeControls()`, `syncThemeSelect()`, `syncThemeSelects()`) for `<select>` pickers and `[data-tbf-theme-value]` option groups.
-- Added the `<ThemeSelect>` multi-choice component with `select` and `buttons` variants, a `labels` prop on `<ThemeToggle>`, and mode registry props on `<ThemeBootScript>`, whose boot script now publishes the registry for the client runtime.
-- Added `theme.modes`, `theme.defaultMode`, `theme.dark`, and `theme.light` to `.trebired/frontend/config.ts`. `generateTrebiredFrontendScss()` emits one `[data-tbf-theme="<mode>"] {}` block per declared mode plus `prefers-color-scheme` fallbacks, alongside the existing shared `:root {}` block.
-- Added `dependencies` to the `loadTrebiredFrontendConfig()` result and keyed the config compile cache on the whole relative import graph, so a design-tokens module imported by the config file drives generated CSS without stale output.
-- Added `collectConfigDependencies()` and `THEME_MODE_ATTRIBUTE` to `@trebired/frontend/config`.
-
-## 0.4.2
-
-- Removed the project-local `.trebired/frontend/generated/styles.scss` writer contract; frontend config now exposes deterministic SCSS for bundlers to consume in memory.
-
-## 0.4.1
-
-- Refreshed package dependency ranges and lockfile state with `bun update` after adopting the `.trebired/code-discipline` structure.
-
-## 0.4.0
-
-- Added `.trebired/frontend/config.ts` support with `defineTrebiredFrontendConfig()`, validation, defaults, deterministic generated SCSS, and `.trebired/frontend/generated/styles.scss` output.
-- Added first-class `remixicon` and `simple-icons` support with spec parsing, server HTML rendering, SVG response helpers, Express-compatible middleware, browser fetch/cache rendering, React `Icon`, simple-icons brand colors, explicit colors, source-color preservation, and shared icon SCSS.
-- Added the fullscreen runtime and upgraded root runtime binding to include icons and fullscreen controls.
-- Improved generic modal/layer behavior with focus restoration, scroll-lock gap handling, lifecycle events, fullscreen-aware layers, and safer dialog timer cleanup for flash prompts/confirms.
-- Added config/icon/runtime verification and updated package exports, README examples, and pack coverage.
-
-## 0.3.0
-
-- Added TSX markup component subpaths for actions, flash, progress, layers, tooltips, popovers, modals, inputs, theme, and live refresh.
-- Added full generic upload markup and runtime support for directory picking, mixed picking, multiple files, drag/drop, accepted-format validation, previews, empty toggles, current-preview clearing, crop config, crop hidden fields, and manager helpers.
-- Added upload crop sessions with cropper loading isolated to the crop path.
-- Changed default SCSS to square, neutral fallbacks with per-system styling only.
-- Added verification for component imports, rendered upload slots, root import isolation, product-name leaks, custom element tags, radius fallbacks, and absence of `wrap` classes in upload output.
-- Added the package publish workflow for tag-based and manual npm publishing.
-
-## 0.2.0
-
-- Replaced the aggregate CSS export with per-system SCSS package exports for tokens, utilities, actions, flash, progress, layers, tooltips, popovers, modals, and inputs.
-- Added logger-adapter-backed frontend runtime logging with `frontend_quiet` support.
-- Added verification for SCSS package import resolution, quiet runtime logging, and absence of the old `styles.css` export.
-
-## 0.1.1
-
-- Completed the reusable frontend runtime package surface with Code Discipline `imports` enforcement and dead import removal enabled.
-- Kept the package generic browser-owned runtime only, with normal HTML data-attribute bindings and no custom elements.
-
-## 0.1.0
-
-- Added generic browser runtime exports for DOM helpers, CSRF fetch, actions, flash, progress, overlays, theme state, live refresh, inputs, upload, React rendering, and styles.
-- Added package verification for packed exports and executable browser behavior.
+- Added config-driven component tokens for buttons, cards, tabs, action buttons, and surface components so package defaults can match the legacy platform UI without app-side CSS overrides.
+- Added flag icons to the package language selector, with locale-region and language-code country resolution plus per-locale overrides.
+- Routed package button, card, and advanced tab styles through component tokens while preserving legacy defaults for backgrounds, spacing, borders, radii, and font inheritance.
+- Added typed primitive layout/class APIs for buttons, cards, card rows, stacks, inline rows, grids, and text.

package/README.md

@@ -1,23 +1,15 @@
-# @trebired/frontend
+# Frontend Package
 
-Generic browser runtime systems for DOM binding, actions, overlays, theme state, live refresh, inputs, upload, and React rendering in the Trebired ecosystem.
+Generic browser runtime systems for DOM binding, actions, overlays, theme state, live refresh, inputs, upload, layout, and React rendering.
 
-`@trebired/frontend` owns reusable browser behavior, generic icon rendering, and package-owned overlay/runtime primitives. Callers own product routes, product copy, storage keys, persistence, navigation, logging, domain icon maps, and backend response contracts beyond the documented generic JSON shape.
+The package owns reusable browser behavior, icon rendering, overlay/runtime primitives, layout chrome, and generic UI components. Callers own product routes, copy, storage keys, persistence, navigation, logging adapters, domain icon maps, and backend response contracts beyond the documented generic JSON shape.
 
-## Install
-
-Runtime support: Bun 1+.
-
-```sh
-bun i @trebired/frontend
-```
-
-## Quick Start
+## Runtime
 
-Bind the canonical runtime after your document shell is available:
+Bind the root runtime after the document shell exists:
 
 ```ts
-import { bindFrontendRuntime } from "@trebired/frontend";
+import { bindFrontendRuntime } from "<package-name>";
 
 bindFrontendRuntime(document, {
   adapters: {
@@ -30,75 +22,16 @@ bindFrontendRuntime(document, {
 });
 ```
 
-Configure the generic systems in `.trebired/frontend/config.ts`. `@trebired/bundler` reads that structured config and includes package-owned CSS through an internal virtual entry; products do not import package Sass paths directly.
-
-Markup stays normal HTML:
-
-```html
-<form method="post" action="/api/save" data-tbf-action>
-  <input name="title" />
-  <button type="submit" data-tbf-confetti="true">Save</button>
-</form>
-
-<button type="button" aria-controls="settings" data-tbf-modal-open>
-  Settings
-</button>
-<div id="settings" class="tbf-modal" data-tbf-modal aria-hidden="true">
-  <div class="tbf-modal__content" data-tbf-modal-content>
-    <button type="button" data-tbf-modal-close>Close</button>
-  </div>
-</div>
-```
-
-TSX components are available from the React entrypoint when a product wants package-owned default markup:
-
-```tsx
-import { UploadField } from "@trebired/frontend/react";
-
-export function AvatarUpload() {
-  return (
-    <UploadField
-      name="avatar"
-      accept="image/png,image/jpeg"
-      crop={true}
-      preview={true}
-      drop={true}
-      emptyToggle={{ name: "avatar_empty", value: "1" }}
-    />
-  );
-}
-```
-
-## Concepts
-
-### Runtime Ownership
-
-The package exposes feature binders such as `bindActionForms(root)`, `bindTooltips(root)`, `bindModals(root)`, `bindUploads(root)`, and the root `bindFrontendRuntime(root, options)` binder. Binders are idempotent and accept `Document`, `HTMLElement`, or `DocumentFragment` roots.
-
-### Adapter Boundary
-
-Options accept adapters for logger, i18n, navigation, reload, progress, flash, theme persistence, and live skip checks. Defaults stay browser-generic. Runtime logging uses `@trebired/logger-adapter` and emits under `trebired.frontend.*`.
-
-### Data Attributes
-
-The package-owned selectors use `data-tbf-*` attributes. They never require custom elements.
-
-### Markup Components
-
-React components render real HTML with `data-tbf-*` attributes and `tbf-*` classes. They are exported from `@trebired/frontend/react`, so the root runtime stays browser-behavior only.
-
-Upload markup includes hidden file and directory inputs, mixed file/folder buttons, multiple-file support, drag/drop slots, accepted-format metadata, preview slots, list output, clear-current-preview state, crop config, a crop hidden field, and an empty-toggle hidden field.
+Feature binders such as `bindActionForms()`, `bindTooltips()`, `bindModals()`, and `bindUploads()` are idempotent and accept a `Document`, `HTMLElement`, or `DocumentFragment`.
 
 ## Configuration
 
-### Project Config
-
-Projects can define `.trebired/frontend/config.ts`:
+Projects configure package-owned systems through the frontend config file consumed by the bundler.
 
 ```ts
-import { defineTrebiredFrontendConfig } from "@trebired/frontend/config";
+import { defineFrontendConfig } from "<package-name>/config";
 
-export default defineTrebiredFrontendConfig({
+export default defineFrontendConfig({
   prefix: "tbf",
   icons: {
     endpoint: "/__icons/svg",
@@ -107,228 +40,39 @@ export default defineTrebiredFrontendConfig({
   systems: {
     actions: true,
     flash: true,
-    fullscreen: true,
-    graph: true,
-    icons: true,
-    inputs: true,
-    layer: true,
     layout: true,
     modal: true,
     popover: true,
-    progress: true,
     sidebar: true,
-    surface: true,
     theme: true,
-    tooltip: true,
-  },
-  theme: {
-    cssVariables: true,
-    tokens: {},
   },
 });
 ```
 
-`@trebired/frontend/config` exports `defineTrebiredFrontendConfig()`, `normalizeTrebiredFrontendConfig()`, `loadTrebiredFrontendConfig()`, `findTrebiredFrontendConfig()`, `generateTrebiredFrontendScss()`, `collectConfigDependencies()`, and `THEME_MODE_ATTRIBUTE`. Missing config files use package defaults. Bundlers should consume the generated SCSS string in memory and emit normal bundled CSS; projects do not need a `.trebired/frontend/generated/styles.scss` file.
-
-`loadTrebiredFrontendConfig()` resolves the config file's relative import graph, returns it as `dependencies`, and keys its compile cache on the contents of every file in that graph. A project can therefore keep design tokens in a sibling module and edit them without stale output:
-
-```ts
-// .trebired/frontend/tokens.ts
-export const surface = { dark: "#101014", light: "#ffffff", sepia: "#f4ecd8" };
-```
-
-### Theme Modes
-
-`theme.modes` declares an open set of named modes. Each mode owns a token block and, optionally, a `label` and a `scheme` (`"dark"` or `"light"`). Anything other than `label`, `scheme`, and `tokens` inside a mode is rejected, so custom properties always live under `tokens`.
-
-```ts
-import { defineTrebiredFrontendConfig } from "@trebired/frontend/config";
-import { surface } from "./tokens.js";
-
-export default defineTrebiredFrontendConfig({
-  prefix: "app",
-  theme: {
-    cssVariables: true,
-    defaultMode: "sepia",
-    tokens: { radius: { md: "6px" } },
-    modes: {
-      dark: { tokens: { color: { surface: surface.dark } } },
-      light: { tokens: { color: { surface: surface.light } } },
-      sepia: { label: "Paper", scheme: "light", tokens: { color: { surface: surface.sepia } } },
-    },
-  },
-});
-```
-
-`generateTrebiredFrontendScss()` emits shared tokens in `:root {}` and one `[data-tbf-theme="<mode>"] {}` block per declared mode, each carrying its own `color-scheme`. It also emits `--<prefix>-theme-modes`, `--<prefix>-theme-default`, and `prefers-color-scheme` fallbacks scoped to `:root:not([data-tbf-theme])` so unbooted documents still resolve.
-
-`theme.dark` and `theme.light` name which registered modes answer `prefers-color-scheme`. When omitted, the first mode of each scheme wins. Declaring no `theme.modes` keeps the previous single `:root {}` output.
-
-### Runtime Options
-
-`bindFrontendRuntime(root, options)` accepts:
+The config entrypoint exports `defineFrontendConfig()`, `normalizeFrontendConfig()`, `loadFrontendConfig()`, `findFrontendConfig()`, `generateFrontendScss()`, `collectConfigDependencies()`, and `THEME_MODE_ATTRIBUTE`.
 
-- `adapters.logger`
-- `adapters.loggerAdapter`
-- `adapters.defaultLogger`
-- `adapters.i18n`
-- `adapters.navigation`
-- `adapters.reload`
-- `adapters.progress`
-- `adapters.flash`
-- `adapters.sidebarPersistence`
-- `adapters.themePersistence`
-- `adapters.live`
-- `sidebar`
-- `theme`
-- `live`
-- `observe`
-- `frontend_quiet`
-- `quiet`
+## Components
 
-Set `frontend_quiet: true`, `quiet: true`, `globalThis.frontend_quiet = true`, or `<html data-tbf-frontend-quiet="true">` to disable package runtime logging.
-
-## Runtime
-
-### Binding Order
-
-The canonical runtime binds theme, layout, layer roots, icons, progress, flash, inputs, uploads, tooltips, popovers, modals, sidebars, actions, fullscreen controls, and live refresh in that order.
-
-### Layout
-
-Ecosystem apps should use the package layout and chrome components for the document shell shape instead of owning separate layout HTML. The app still supplies product-specific brand, account actions, sidebar link models, page body, and persistence endpoints.
+React components render normal HTML with `data-tbf-*` attributes and `tbf-*` classes. Use the React entrypoint for package-owned default markup:
 
 ```tsx
-import {
-  Layout,
-  LayoutBootScript,
-  LayoutContent,
-  LayoutDocument,
-  AppHeader,
-  MobileNav,
-  Sidebar,
-  SidebarLink,
-  SidebarList,
-  SidebarShell,
-} from "@trebired/frontend/react";
+import { UploadField } from "<package-name>/react";
 
-export function Document({ body, header }: { body: React.ReactNode; header: React.ReactNode }) {
+export function AvatarUpload() {
   return (
-    <LayoutDocument title="App" scripts={<LayoutBootScript hasLeftSidebar />}>
-      <Layout
-        header={header}
-        leftSidebar={
-          <SidebarShell id="main_sidebar" side="left">
-            <Sidebar aria-label="Navigation">
-              <SidebarList>
-                <SidebarLink href="/dashboard">Dashboard</SidebarLink>
-              </SidebarList>
-            </Sidebar>
-          </SidebarShell>
-        }
-      >
-        <LayoutContent>{body}</LayoutContent>
-      </Layout>
-    </LayoutDocument>
+    <UploadField
+      name="avatar"
+      accept="image/png,image/jpeg"
+      crop={true}
+      preview={true}
+      drop={true}
+    />
   );
 }
 ```
 
-Generic app UI such as headers, mobile nav, breadcrumb, disclosure, tabs, dropdown/search controls, graph shells, cards, canvas panels, and sidebar link lists is available from `@trebired/frontend/react`. Runtime binders for those systems are included by `bindFrontendRuntime()`.
-
-### Theme
-
-Theme runtime works against a caller-supplied mode registry rather than a fixed light/dark pair. The registry defaults to `["dark", "light"]`, so existing callers keep their behavior.
-
-```ts
-import { bindThemeRuntime } from "@trebired/frontend";
-
-await bindThemeRuntime(document, {
-  modes: ["dark", "light", { key: "sepia", label: "Paper", scheme: "light" }],
-  dark: "dark",
-  light: "light",
-  defaultTheme: "sepia",
-  persistence,
-});
-```
-
-Passing `modes`, `dark`, or `light` to `bindThemeRuntime()` registers them process-wide, so `setTheme()`, `nextTheme()`, and control syncing can be called later without repeating the list. `configureThemeModes(registry)` registers them directly; `configureThemeModes(null)` restores the default pair. `<ThemeBootScript>` publishes the registry it renders with, so a server-rendered page hands its modes to the client before first paint.
-
-- `setTheme(key, options)` validates `key` against the registry and falls back to system preference when it is not registered.
-- `nextTheme(options)` cycles through the registry in declaration order.
-- `data-tbf-theme` accepts any registered key; `color-scheme` is set from the mode's `scheme`, not from its name.
-- `systemThemeKey(options)` maps `prefers-color-scheme` onto the registry's `dark` / `light` members.
-- `bindThemeControls(root, options)` binds both `[data-tbf-theme-button]` cyclers and `[data-tbf-theme-select]` pickers; `bindThemeToggles()` and `bindThemeSelects()` bind one kind each.
-
-A `[data-tbf-theme-select]` element is either a `<select>` whose option values are mode keys, or a container of `[data-tbf-theme-value]` options. Both stay in sync with the active mode. `<ThemeToggle>` remains the two-mode control and now accepts a `labels` record for registries larger than two; `<ThemeSelect>` renders the multi-choice picker in either `select` or `buttons` form.
-
-### CSS
-
-There is no aggregate CSS file and no public Sass subpath API. Package-owned CSS is selected by `.trebired/frontend/config.ts`, then emitted by `@trebired/frontend/config` as SCSS for `@trebired/bundler` to compile in memory.
-
-Default CSS is intentionally plain: `tbf-*` classes, generic utility classes, CSS variables, black/white fallback colors, and square radius fallbacks. Products own visual polish by declaring config tokens or writing component-specific CSS.
-
-### Upload Crop
-
-Upload crop uses `cropperjs` only through the upload crop path. The root runtime import does not load cropper or TSX component modules until a crop session opens.
-
-### Icons
-
-Canonical icon specs use `pack:name`:
-
-- `remixicon:add-line`
-- `remixicon:settings-3-line`
-- `simple-icons:github`
-- `simple-icons:cloudflare`
-
-Browser runtime:
-
-```ts
-import { bindIcons, renderIconElement } from "@trebired/frontend";
-
-bindIcons(document);
-await renderIconElement(document.querySelector("[data-tbf-icon]")!, "remixicon:add-line");
-```
-
-React:
-
-```tsx
-import { Icon } from "@trebired/frontend/react";
-
-export function SaveIcon() {
-  return <Icon spec="remixicon:save-3-line" label="Save" />;
-}
-```
-
-Server:
-
-```ts
-import { createIconMiddleware, renderIconHtml } from "@trebired/frontend/server";
-
-const html = renderIconHtml("simple-icons:github", { label: "GitHub" });
-const middleware = createIconMiddleware();
-```
-
-The icon system supports explicit colors, simple-icons brand colors, source-color preservation, browser fetch/cache rendering, server HTML rendering, and an Express-compatible `/__icons/svg` middleware.
-
-## Public API
-
-Entrypoints:
-
-- `@trebired/frontend`
-- `@trebired/frontend/config`
-- `@trebired/frontend/react`
-- `@trebired/frontend/server`
-
-## What It Does Not Do
+## Styling
 
-This package does not:
+There is no public Sass subpath API. Package-owned CSS is selected by the frontend config, then emitted by the config entrypoint as SCSS for the bundler to compile in memory.
 
-- define custom elements
-- render Markdown or MDX
-- export markup components from the root entrypoint
-- ship an aggregate `styles.css`
-- own product routes, domains, copy, or storage keys
-- own product-specific icon maps
-- migrate an existing application to consume the package
-- replace framework-specific component libraries
+Generic app UI such as headers, mobile nav, breadcrumb, disclosure, tabs, dropdown/search controls, graph shells, cards, canvas panels, flash messages, and sidebar link lists is available from the React entrypoint.

package/dist/actions/standard-buttons.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type ActionLabelKey } from "./labels.js";
+import { type PrimitiveButtonSize, type PrimitiveButtonTone } from "../primitives/components/classes.d.ts";
 type StandardActionButtonProps = {
     button_attrs?: Record<string, unknown>;
     className?: string;
@@ -8,6 +9,7 @@ type StandardActionButtonProps = {
     id?: string;
     lang?: string;
     label?: string;
+    tone?: PrimitiveButtonTone;
     type?: "button" | "submit";
 };
 type CopyButtonProps = {
@@ -15,7 +17,7 @@ type CopyButtonProps = {
     children?: ReactNode;
     className?: string;
     lang?: string;
-    size?: string;
+    size?: PrimitiveButtonSize;
     target: string;
     title?: string;
     tooltip?: string;
@@ -44,6 +46,7 @@ declare const ACTION_META: Record<string, {
     className?: string;
     icon: string;
     key: ActionLabelKey;
+    tone?: PrimitiveButtonTone;
     type: "button" | "submit";
 }>;
 declare function standardActionButton(kind: keyof typeof ACTION_META, props?: StandardActionButtonProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>> | import("react").JSX.Element;

package/dist/actions/standard-buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard-buttons.d.ts","sourceRoot":"","sources":["../../../src/actions/standard-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAG/D,KAAK,yBAAyB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC5B,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,mBAAmB,GAAG,yBAAyB,GAAG;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC3B,CAcA,CAAC;AAEF,iBAAS,oBAAoB,CAC3B,IAAI,EAAE,MAAM,OAAO,WAAW,EAC9B,KAAK,GAAE,yBAA8B,yRAkBtC;AAED,iBAAS,UAAU,CAAC,KAAK,GAAE,yBAA8B,yRAExD;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,yBAA8B,yRAE3D;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,yBAA8B,yRAE3D;AAED,iBAAS,aAAa,CACpB,KAAK,GAAE,yBAAyB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAO,yRAMrE;AAED,iBAAS,WAAW,CAAC,KAAK,GAAE,yBAA8B,yRAEzD;AAED,iBAAS,iBAAiB,CAAC,KAAK,GAAE,yBAA8B,yRAE/D;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,yBAA8B,yRAE3D;AAED,iBAAS,cAAc,CAAC,KAAK,GAAE,yBAA8B,yRAE5D;AAED,iBAAS,aAAa,CAAC,KAAK,GAAE,yBAA8B,yRAE3D;AAED,iBAAS,cAAc,CAAC,KAAK,GAAE,yBAA8B,yRAE5D;AAED,iBAAS,WAAW,CAAC,KAAK,GAAE,yBAA8B,yRAEzD;AAED,iBAAS,YAAY,CACnB,KAAK,GAAE,yBAAyB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,yRAS/D;AAED,iBAAS,WAAW,CAAC,KAAK,GAAE,yBAA8B,yRAEzD;AAED,iBAAS,SAAS,CAAC,KAAK,GAAE,mBAAwB,yRAejD;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,eAAe;;;;;wDA0B1C;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,iBAAiB,+BAqB/C;AAED,iBAAS,uBAAuB,CAAC,KAAK,GAAE,uBAA4B;;;;;EAWnE;AAED,OAAO,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,cAAc,EACd,aAAa,EACb,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,EACb,uBAAuB,EACvB,cAAc,EACd,SAAS,EACT,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,WAAW,GACZ,CAAC;AACF,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,GAC1B,CAAC"}
+{"version":3,"file":"standard-buttons.d.ts","sourceRoot":"","sources":["../../../src/actions/standard-buttons.tsx"],"names":[],"mappings":"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"}