waybetter 0.1.1 → 0.6.0

package/dist/shell/panel/builder.css

@@ -0,0 +1,232 @@
+/* Theme Builder, font roles and the font browser. Panel tokens (--c-*, --f-*) from panel.css, so all
+   of it follows the active theme like the rest of the panel. */
+
+/* ---------------------------------------------------------------------------------------------
+ * Builder layout: controls left, a sticky preview right (stacked under 980px). */
+.wb-builder { --wb-gap: 14px; display: flex; flex-direction: column; gap: 16px; margin: -4px 0 0; }
+.wb-builder.is-loading { min-height: 320px; }
+.btp-page:has(.wb-builder) { max-width: 1320px; }
+.wb-builder-bar {
+  position: sticky; top: -18px; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
+  margin: 0 -4px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 14px;
+  background: color-mix(in srgb, var(--c-card) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2);
+  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
+}
+.wb-builder-name { flex: 1 1 200px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--c-text); font: 650 17px/1 var(--f-ui); letter-spacing: -.02em; }
+.wb-builder-name:hover { border-color: var(--c-line); }
+.wb-builder-name:focus { outline: none; border-color: var(--c-accent); background: var(--c-field); }
+.wb-builder-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.wb-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--c-line); }
+.wb-icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-text); cursor: pointer; transition: background-color .15s, border-color .15s; }
+.wb-icon-button:hover:not(:disabled) { border-color: var(--c-line-strong); background: var(--c-raise); }
+.wb-icon-button:disabled { opacity: .38; cursor: default; }
+.wb-live { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 4px; color: var(--c-muted); font-size: 12px; font-weight: 520; }
+
+.wb-builder-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
+.wb-builder-controls { display: flex; flex-direction: column; gap: var(--wb-gap); min-width: 0; }
+.wb-builder-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; order: -1; }
+@container panel (min-width: 980px) {
+  .wb-builder-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); }
+  .wb-builder-preview { order: 0; position: sticky; top: 52px; }
+}
+
+.wb-card { padding: 16px 16px 14px; border: 1px solid var(--c-line-soft); border-radius: 14px; background: var(--c-card); }
+.wb-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.wb-card h3 { margin: 0; font-size: 14px; font-weight: 640; letter-spacing: -.01em; }
+.wb-card header p { margin: 3px 0 0; max-width: 62ch; color: var(--c-muted); font-size: 12px; line-height: 1.45; }
+.wb-ok { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); font-size: 12px; font-weight: 600; white-space: nowrap; }
+
+.wb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px 18px; margin-top: 14px; }
+.wb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
+.wb-field > span { color: var(--c-muted); font-size: 11.5px; font-weight: 560; letter-spacing: .01em; }
+.wb-field .bt-slider { width: 100%; }
+
+/* Base colors */
+.wb-base { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
+.wb-base-item { display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-ground); }
+.wb-base-swatch { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 62px; padding: 10px 11px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .22); }
+.wb-base-swatch span { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
+.wb-base-swatch code { padding: 2px 6px; border: 0; border-radius: 6px; background: rgb(0 0 0 / .32); color: #fff; font: 500 11px/1.4 var(--f-mono); }
+.wb-base-item .bt-color { flex-wrap: wrap; gap: 6px; }
+.wb-base-item .bt-swatch { width: 22px; height: 22px; }
+
+/* Derived palette */
+.wb-palette { margin-top: 12px; }
+.wb-palette-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
+.wb-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 9px; border: 1px solid var(--c-line-soft); border-radius: 10px; background: var(--c-ground); color: var(--c-text); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s; }
+.wb-chip:hover { border-color: var(--c-line-strong); }
+.wb-chip.is-on { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
+.wb-chip-swatch { flex: none; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .3); }
+.wb-chip-copy { display: flex; flex-direction: column; min-width: 0; }
+.wb-chip-copy b { font-size: 12px; font-weight: 600; }
+.wb-chip-copy small { overflow: hidden; color: var(--c-muted); font: 10.5px/1.4 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
+.wb-palette-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--c-field); }
+.wb-palette-edit > span { font-size: 12px; font-weight: 600; }
+
+/* Contrast */
+.wb-contrast { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.wb-contrast li { display: grid; grid-template-columns: 40px 1fr auto auto 76px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 9px; }
+.wb-contrast li:hover { background: var(--c-field); }
+.wb-contrast li.is-fail { background: color-mix(in srgb, var(--c-danger) 7%, transparent); }
+.wb-contrast-sample { display: grid; place-items: center; width: 40px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .25); font-size: 14px; font-weight: 700; }
+.wb-contrast-label { font-size: 12.5px; }
+.wb-contrast-ratio { font: 12px/1 var(--f-mono); color: var(--c-muted); }
+.wb-contrast-ratio b { color: var(--c-text); font-weight: 600; }
+.wb-contrast-need { color: var(--c-faint); font-size: 11.5px; }
+.wb-contrast-badge { justify-self: end; padding: 3px 7px; border-radius: 6px; font: 600 10.5px/1.2 var(--f-mono); text-align: center; }
+.wb-contrast-badge.is-pass { background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); }
+.wb-contrast-badge.is-fail { background: color-mix(in srgb, var(--c-danger) 16%, transparent); color: var(--c-danger); }
+@container panel (max-width: 560px) {
+  .wb-contrast li { grid-template-columns: 40px 1fr auto; }
+  .wb-contrast-need, .wb-contrast-badge { display: none; }
+}
+
+/* Background */
+.wb-bg .bt-seg { margin-bottom: 2px; }
+
+/* Preview column */
+.wb-preview-frame { overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-ground); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); }
+.wb-preview-frame .tp { border-radius: 0; }
+.wb-preview-note { display: flex; align-items: center; gap: 8px; margin: 0 2px; color: var(--c-muted); font-size: 12px; line-height: 1.4; }
+.wb-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ok) 22%, transparent); animation: wb-pulse 2.4s ease-in-out infinite; }
+@keyframes wb-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-ok) 0%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .wb-live-dot { animation: none; } }
+.wb-meta { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-card); }
+.wb-meta label { display: flex; flex-direction: column; gap: 5px; }
+.wb-meta span { color: var(--c-muted); font-size: 11.5px; font-weight: 560; }
+.wb-meta input, .wb-meta textarea { padding: 7px 9px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-field); color: var(--c-text); font: 13px/1.4 var(--f-ui); resize: vertical; }
+.wb-meta input:focus, .wb-meta textarea:focus { outline: none; border-color: var(--c-accent); }
+
+/* The chrome in the draft (tokens straight from chromeVars, Night Ink fallbacks). */
+.wb-chrome-preview { padding: 7px 8px 0; background: var(--wb-c-ground, #07080c); font-family: var(--wb-f-chrome, 'Geist Variable', system-ui, sans-serif); }
+.wb-cp-tabs { display: flex; gap: 4px; }
+.wb-cp-tab { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 8px 8px 0 0; color: var(--wb-c-muted, #8a90a6); font-size: 11.5px; font-weight: 520; }
+.wb-cp-tab i { width: 10px; height: 10px; border-radius: 3px; background: var(--wb-c-line-strong, #2a3044); }
+.wb-cp-tab.is-on { background: var(--wb-c-chrome, #0d1017); color: var(--wb-c-text, #eef0f7); }
+.wb-cp-tab.is-on i { background: var(--wb-c-accent, #1d9bf0); }
+.wb-cp-bar { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 7px 10px; background: var(--wb-c-chrome, #0d1017); border-bottom: 1px solid var(--wb-c-line-soft, #161a26); }
+.wb-cp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--wb-c-raised, #141823); }
+.wb-cp-omni { flex: 1; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--wb-c-field, #11141c); color: var(--wb-c-text, #eef0f7); font-size: 11.5px; }
+.wb-cp-omni b { padding: 2px 7px; border-radius: 5px; background: rgb(var(--wb-c-accent-rgb, 29 155 240) / .16); color: var(--wb-c-accent-ink, #cfe6ff); font-weight: 600; }
+.wb-cp-omni em { color: var(--wb-c-faint, #5d6379); font-style: normal; }
+.wb-cp-brand { width: 26px; height: 16px; border-radius: 5px; background: linear-gradient(90deg, #4f6bff, #22d3ee 55%, #a855f7); opacity: .85; }
+
+/* ---------------------------------------------------------------------------------------------
+ * Font roles */
+.wb-roles { display: flex; flex-direction: column; border: 1px solid var(--c-line-soft); border-radius: 12px; overflow: hidden; }
+.wb-role + .wb-role { border-top: 1px solid var(--c-line-soft); }
+.wb-role-main { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px; padding-block: 9px; padding-inline: 14px 10px; }
+.wb-role-copy { display: flex; flex-direction: column; min-width: 0; }
+.wb-role-copy strong { font-size: 13px; font-weight: 600; }
+.wb-role-copy small { color: var(--c-muted); font-size: 11.5px; line-height: 1.35; }
+.wb-role-font { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 7px 11px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-field); color: var(--c-text); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s; }
+.wb-role-font:hover { border-color: var(--c-line-strong); background: var(--c-raise); }
+.wb-role-font.is-inherited { border-style: dashed; background: transparent; }
+.wb-role-sample { max-width: 100%; overflow: hidden; font-size: 17px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
+.wb-role-name { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: 11px; }
+.wb-role-name em { padding: 1px 5px; border-radius: 4px; background: var(--c-accent-soft); color: var(--c-accent); font: 600 9.5px/1.3 var(--f-mono); font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
+.wb-role-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 96px; }
+.wb-role-tune { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--c-muted); cursor: pointer; }
+.wb-role-tune:hover, .wb-role-tune[aria-expanded=true] { border-color: var(--c-line); background: var(--c-field); color: var(--c-text); }
+.wb-role-tune.is-tuned { color: var(--c-accent); }
+.wb-role-tuning { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 18px; padding: 4px 14px 14px; }
+.wb-role-tuning label { display: flex; flex-direction: column; gap: 6px; }
+.wb-role-tuning label.is-inline { flex-direction: row; align-items: center; justify-content: space-between; }
+.wb-role-tuning label > span { color: var(--c-muted); font-size: 11.5px; font-weight: 560; }
+.wb-roles.is-compact .wb-role-main { grid-template-columns: minmax(110px, .6fr) minmax(0, 1.4fr) auto; }
+@container panel (max-width: 560px) {
+  .wb-role-main { grid-template-columns: 1fr auto; }
+  .wb-role-font { grid-column: 1 / -1; grid-row: 2; }
+}
+
+/* ---------------------------------------------------------------------------------------------
+ * Sheets (font browser): cover the panel, not the window (X panes are native webviews). */
+.wb-sheet-backdrop { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); animation: bt-pop .16s var(--ease); }
+.wb-sheet { display: flex; flex-direction: column; width: min(1040px, 100%); height: min(720px, 100%); overflow: hidden; border: 1px solid var(--c-line-strong); border-radius: 16px; background: var(--c-card); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgb(0 0 0 / .3); }
+.wb-sheet-head { display: flex; align-items: center; gap: 14px; padding-block: 16px 12px; padding-inline: 20px 16px; border-bottom: 1px solid var(--c-line-soft); }
+.wb-sheet-head > div:first-child { flex: 1; min-width: 0; }
+.wb-sheet-head .bt-seg { flex: none; }
+.wb-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
+.wb-sheet-head h2 span { color: var(--c-muted); font-weight: 450; }
+.wb-sheet-head p { margin: 3px 0 0; color: var(--c-muted); font-size: 12px; }
+.wb-sheet-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-muted); cursor: pointer; }
+.wb-sheet-close:hover { color: var(--c-text); border-color: var(--c-line-strong); }
+.wb-sheet-foot { padding: 10px 20px 12px; border-top: 1px solid var(--c-line-soft); color: var(--c-faint); font-size: 11px; line-height: 1.5; }
+
+.wb-fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; }
+.wb-fb-search { flex: 1 1 260px; }
+.wb-fb-cats { display: flex; flex-wrap: wrap; gap: 4px; }
+.wb-fb-cats button { height: 28px; padding: 0 11px; border: 1px solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-muted); font-size: 12px; font-weight: 540; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
+.wb-fb-cats button:hover { color: var(--c-text); border-color: var(--c-line-strong); }
+.wb-fb-cats button.is-on { background: var(--c-text); border-color: var(--c-text); color: var(--c-ground); }
+.wb-fb-cats .wb-fb-installed { margin-inline-start: 6px; }
+.wb-fb-cats .wb-fb-installed.is-on { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); }
+
+.wb-fb-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.05fr); min-height: 0; border-top: 1px solid var(--c-line-soft); }
+@container panel (max-width: 760px) { .wb-fb-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .wb-fb-detail { max-height: 50%; border-inline-start: 0 !important; border-top: 1px solid var(--c-line-soft); } }
+.wb-fb-list { margin: 0; padding: 6px; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; outline: none; }
+.wb-fb-list:focus-visible { box-shadow: inset 0 0 0 2px var(--c-accent); }
+.wb-fb-list li[role=option] { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name tags' 'meta tags'; align-items: center; column-gap: 10px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
+.wb-fb-list li.is-active { background: var(--c-field); }
+.wb-fb-list li.is-on { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgb(var(--c-accent-rgb) / .45); }
+.wb-fb-name { grid-area: name; overflow: hidden; font-size: 21px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; transition: opacity .2s; }
+.wb-fb-name.is-loading { opacity: .45; }
+.wb-fb-meta { grid-area: meta; color: var(--c-muted); font-size: 11px; }
+.wb-fb-tag { grid-area: tags; justify-self: end; padding: 2px 7px; border-radius: 6px; background: var(--c-field); color: var(--c-muted); font: 600 10px/1.4 var(--f-mono); letter-spacing: .02em; }
+.wb-fb-tag.is-accent { background: var(--c-accent-soft); color: var(--c-accent); }
+.wb-fb-tag + .wb-fb-tag { grid-row: 2; }
+.wb-fb-empty { padding: 30px 14px; color: var(--c-muted); text-align: center; }
+.wb-fb-more { display: flex; justify-content: center; padding: 8px; }
+
+.wb-fb-detail { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; overflow-y: auto; border-inline-start: 1px solid var(--c-line-soft); background: var(--c-ground); scrollbar-width: thin; }
+.wb-fb-detail.is-empty { justify-content: center; color: var(--c-muted); text-align: center; }
+.wb-fb-hero { display: flex; flex-direction: column; gap: 4px; }
+.wb-fb-hero-name { font-size: 40px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
+.wb-fb-hero-meta { color: var(--c-muted); font-size: 12px; }
+.wb-fb-sample { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-card); }
+.wb-fb-sample-text { min-height: 2.6em; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
+.wb-fb-sample textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-field); color: var(--c-text); font: 12.5px/1.45 var(--f-ui); resize: none; }
+.wb-fb-sample textarea:focus { outline: none; border-color: var(--c-accent); }
+.wb-fb-samples { display: flex; flex-wrap: wrap; gap: 4px; }
+.wb-fb-samples button { height: 24px; padding: 0 9px; border: 1px solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-muted); font-size: 11px; cursor: pointer; }
+.wb-fb-samples button.is-on, .wb-fb-samples button:hover { color: var(--c-text); border-color: var(--c-line-strong); }
+.wb-fb-field { display: flex; flex-direction: column; gap: 8px; }
+.wb-fb-field > span { color: var(--c-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
+.wb-fb-field > small { color: var(--c-faint); font-size: 11.5px; line-height: 1.45; }
+.wb-fb-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.wb-fb-weights { display: flex; flex-wrap: wrap; gap: 4px; }
+.wb-fb-weights button { min-width: 44px; height: 28px; padding: 0 9px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-field); color: var(--c-muted); font: 500 11.5px/1 var(--f-mono); cursor: pointer; }
+.wb-fb-weights button.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-text); }
+.wb-fb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
+.wb-fb-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); font-size: 12px; }
+
+.wb-fb-system { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.wb-fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
+.wb-fb-grid button { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-ground); color: var(--c-text); text-align: start; cursor: pointer; }
+.wb-fb-grid button:hover { border-color: var(--c-line-strong); }
+.wb-fb-grid button.is-on { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
+.wb-fb-grid span { font-size: 18px; }
+.wb-fb-grid small { color: var(--c-muted); font-size: 12px; }
+.wb-fb-custom { display: flex; align-items: flex-end; gap: 10px; padding: 14px; border: 1px dashed var(--c-line-strong); border-radius: 12px; }
+.wb-fb-custom label { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+.wb-fb-custom label span { color: var(--c-muted); font-size: 12px; }
+.wb-fb-custom input { height: 34px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-text); font-size: 15px; }
+.wb-fb-custom input:focus { outline: none; border-color: var(--c-accent); }
+
+/* ---------------------------------------------------------------------------------------------
+ * Appearance: account and pane themes, downloaded fonts */
+.wb-scope-list { display: flex; flex-direction: column; gap: 2px; width: 100%; }
+.wb-scope { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 2px; }
+.wb-scope-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.wb-scope-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
+.wb-scope-who b { overflow: hidden; font-size: 13px; font-weight: 560; white-space: nowrap; text-overflow: ellipsis; }
+.wb-scope-who small { overflow: hidden; color: var(--c-muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
+.wb-scope-avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; color: #fff; font-size: 12px; font-weight: 650; }
+.wb-scope-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.wb-scope .wb-dots { margin-inline-end: 2px; }
+.wb-fontlist { display: flex; flex-direction: column; width: 100%; }
+.wb-fontlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 7px 2px; }
+.wb-fontlist li + li { border-top: 1px solid var(--c-line-soft); }
+.wb-fontlist b { font-size: 17px; font-weight: 450; }
+.wb-fontlist small { color: var(--c-muted); font: 11px/1.4 var(--f-mono); }
+.wb-fontlist ul { margin: 0; padding: 0; list-style: none; }

package/dist/shell/panel/builderModel.d.ts

@@ -0,0 +1,55 @@
+import { type Palette, type ThemeColors, type ThemeSpec } from '../../runtime/themeSpec.ts';
+export type History = {
+    past: ThemeSpec[];
+    present: ThemeSpec;
+    future: ThemeSpec[];
+};
+export declare const MAX_HISTORY = 100;
+export declare const startHistory: (theme: ThemeSpec) => History;
+/** A change. `commit: false` updates the present in place (a slider being dragged); the drag's
+ * final commit records one undo step from where the drag started (`from`). */
+export declare function record(history: History, next: ThemeSpec, options?: {
+    commit?: boolean;
+    from?: ThemeSpec;
+}): History;
+export declare function undo(history: History): History;
+export declare function redo(history: History): History;
+/** Where a draft starts when its theme keeps the site's own colors, and which theme that is. */
+export type DraftSite = {
+    colors: Base;
+    siteTheme: string;
+};
+/** A draft to edit from any theme: the site's own look (no colors) starts from `site.colors`. */
+export declare function draftFrom(theme: ThemeSpec, site: DraftSite, name?: string): ThemeSpec;
+export type Base = {
+    bg: string;
+    text: string;
+    accent: string;
+};
+export declare const DERIVED_ROLES: readonly ["surface", "elevated", "border", "muted", "inverse", "onInverse", "page"];
+export type DerivedRole = typeof DERIVED_ROLES[number];
+/** The full palette from three base colors; `pinned` roles keep the value the owner set by hand. */
+export declare function paletteFrom(base: Base, pinned?: Partial<Record<DerivedRole, string>>): ThemeColors;
+/** Which derived roles differ from what the three base colors would give (they are "pinned"). */
+export declare function pinnedRoles(colors: ThemeColors): Partial<Record<DerivedRole, string>>;
+/** Light or dark, from the palette itself. */
+export declare const modeOf: (colors: Pick<Palette, "bg" | "text">) => "light" | "dark";
+export type ContrastCheck = {
+    id: string;
+    label: string;
+    fg: string;
+    bg: string;
+    ratio: number;
+    need: number;
+    pass: boolean;
+};
+/** The pairs a site's page draws, with the level wayBetter enforces for each (7:1 text, 4.5:1 secondary text, links and labels, 3:1 the button on the page). */
+export declare function contrastReport(colors: ThemeColors): ContrastCheck[];
+/** WCAG level of a ratio for normal text. */
+export declare const wcagLevel: (ratio: number) => "AAA" | "AA" | "AA large" | "Fail";
+/** What the runtime would draw anyway: the palette moved just enough to pass every check. */
+export declare const autoFix: (colors: ThemeColors) => ThemeColors;
+/** A unique id for a new theme named `name` among `taken` ids (pass the built-in ones too). */
+export declare function uniqueId(name: string, taken: Iterable<string>): string;
+/** The theme file: sanitized, `$schema` first, pretty-printed. */
+export declare function themeJson(theme: ThemeSpec): string;

package/dist/shell/panel/builderModel.js

@@ -0,0 +1,95 @@
+// The Theme Builder's model: a draft theme document with undo/redo, a palette derived from three
+// base colors, the contrast report the builder shows (and its auto-fix), and export/share JSON.
+// Pure, so the tests exercise exactly what the builder does.
+import { THEME_SCHEMA_URL, contrastRatio, relativeLuminance } from "../../runtime/themeApi.js";
+import { ensureContrast, sanitizeSpec, slug } from "../../runtime/themeSpec.js";
+import { deriveColors } from "../../runtime/themeTokens.js";
+export const MAX_HISTORY = 100;
+export const startHistory = (theme) => ({ past: [], present: theme, future: [] });
+/** A change. `commit: false` updates the present in place (a slider being dragged); the drag's
+ * final commit records one undo step from where the drag started (`from`). */
+export function record(history, next, options = {}) {
+    if (options.commit === false)
+        return { ...history, present: next };
+    const base = options.from ?? history.present;
+    if (JSON.stringify(base) === JSON.stringify(next))
+        return { ...history, present: next };
+    return { past: [...history.past, base].slice(-MAX_HISTORY), present: next, future: [] };
+}
+export function undo(history) {
+    const previous = history.past[history.past.length - 1];
+    if (!previous)
+        return history;
+    return { past: history.past.slice(0, -1), present: previous, future: [history.present, ...history.future] };
+}
+export function redo(history) {
+    const next = history.future[0];
+    if (!next)
+        return history;
+    return { past: [...history.past, history.present], present: next, future: history.future.slice(1) };
+}
+/** A draft to edit from any theme: the site's own look (no colors) starts from `site.colors`. */
+export function draftFrom(theme, site, name = `${theme.name} remix`) {
+    const colors = theme.colors ?? deriveColors({ ...site.colors });
+    return sanitizeSpec({ ...JSON.parse(JSON.stringify(theme)), id: slug(name), name, author: 'You', description: theme.id === site.siteTheme ? '' : `Based on ${theme.name}.`, colors, mode: theme.mode === 'auto' ? 'dark' : theme.mode });
+}
+export const DERIVED_ROLES = ['surface', 'elevated', 'border', 'muted', 'inverse', 'onInverse', 'page'];
+/** The full palette from three base colors; `pinned` roles keep the value the owner set by hand. */
+export function paletteFrom(base, pinned = {}) {
+    const derived = deriveColors(base);
+    return { ...derived, inverse: base.text, onInverse: base.bg, page: base.bg, ...pinned };
+}
+/** Which derived roles differ from what the three base colors would give (they are "pinned"). */
+export function pinnedRoles(colors) {
+    const auto = paletteFrom({ bg: colors.bg, text: colors.text, accent: colors.accent });
+    const out = {};
+    for (const role of DERIVED_ROLES) {
+        const value = colors[role];
+        if (value && value !== auto[role])
+            out[role] = value;
+    }
+    return out;
+}
+/** Light or dark, from the palette itself. */
+export const modeOf = (colors) => relativeLuminance(colors.bg) < relativeLuminance(colors.text) ? 'dark' : 'light';
+/** The pairs a site's page draws, with the level wayBetter enforces for each (7:1 text, 4.5:1 secondary text, links and labels, 3:1 the button on the page). */
+export function contrastReport(colors) {
+    const page = colors.page ?? colors.bg;
+    const inverse = colors.inverse ?? colors.text;
+    const onInverse = colors.onInverse ?? colors.bg;
+    const pairs = [
+        ['text-bg', 'Text on background', colors.text, colors.bg, 7],
+        ['text-surface', 'Text on cards and menus', colors.text, colors.surface, 7],
+        ['text-page', 'Text on the page canvas', colors.text, page, 7],
+        ['muted-bg', 'Secondary text', colors.muted, colors.bg, 4.5],
+        ['muted-surface', 'Secondary text on cards', colors.muted, colors.surface, 4.5],
+        ['accent-bg', 'Links and accent', colors.accent, colors.bg, 4.5],
+        ['accent-elevated', 'Links on hover', colors.accent, colors.elevated, 4.5],
+        ['button-label', 'Post button label', onInverse, inverse, 4.5],
+        ['button-page', 'Post button on the page', inverse, colors.bg, 3],
+    ];
+    return pairs.map(([id, label, fg, bg, need]) => {
+        const ratio = contrastRatio(fg, bg);
+        return { id, label, fg, bg, ratio: Math.round(ratio * 100) / 100, need, pass: ratio >= need - 0.005 };
+    });
+}
+/** WCAG level of a ratio for normal text. */
+export const wcagLevel = (ratio) => ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : ratio >= 3 ? 'AA large' : 'Fail';
+/** What the runtime would draw anyway: the palette moved just enough to pass every check. */
+export const autoFix = (colors) => ensureContrast(colors);
+// ---------------------------------------------------------------------------------------------
+// Saving and sharing
+/** A unique id for a new theme named `name` among `taken` ids (pass the built-in ones too). */
+export function uniqueId(name, taken) {
+    const used = new Set(taken);
+    const base = slug(name);
+    let id = base;
+    for (let n = 2; used.has(id); n++)
+        id = `${base.slice(0, 36)}-${n}`;
+    return id;
+}
+/** The theme file: sanitized, `$schema` first, pretty-printed. */
+export function themeJson(theme) {
+    return JSON.stringify({ $schema: THEME_SCHEMA_URL, ...sanitizeSpec(theme) }, null, 2);
+}
+//# sourceMappingURL=builderModel.js.map

package/dist/shell/panel/builderModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builderModel.js","sourceRoot":"","sources":["../../../../../../shell/src/panel/builderModel.ts"],"names":[],"mappings":"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","sourcesContent":["// The Theme Builder's model: a draft theme document with undo/redo, a palette derived from three\n// base colors, the contrast report the builder shows (and its auto-fix), and export/share JSON.\n// Pure, so the tests exercise exactly what the builder does.\nimport { THEME_SCHEMA_URL, contrastRatio, relativeLuminance } from '../../../runtime/src/themeApi.ts';\nimport { ensureContrast, sanitizeSpec, slug, type Palette, type ThemeColors, type ThemeSpec } from '../../../runtime/src/themeSpec.ts';\nimport { deriveColors } from '../../../runtime/src/themeTokens.ts';\n\n// ---------------------------------------------------------------------------------------------\n// History\n\nexport type History = { past: ThemeSpec[]; present: ThemeSpec; future: ThemeSpec[] };\nexport const MAX_HISTORY = 100;\n\nexport const startHistory = (theme: ThemeSpec): History => ({ past: [], present: theme, future: [] });\n\n/** A change. `commit: false` updates the present in place (a slider being dragged); the drag's\n * final commit records one undo step from where the drag started (`from`). */\nexport function record(history: History, next: ThemeSpec, options: { commit?: boolean; from?: ThemeSpec } = {}): History {\n  if (options.commit === false) return { ...history, present: next };\n  const base = options.from ?? history.present;\n  if (JSON.stringify(base) === JSON.stringify(next)) return { ...history, present: next };\n  return { past: [...history.past, base].slice(-MAX_HISTORY), present: next, future: [] };\n}\nexport function undo(history: History): History {\n  const previous = history.past[history.past.length - 1];\n  if (!previous) return history;\n  return { past: history.past.slice(0, -1), present: previous, future: [history.present, ...history.future] };\n}\nexport function redo(history: History): History {\n  const next = history.future[0];\n  if (!next) return history;\n  return { past: [...history.past, history.present], present: next, future: history.future.slice(1) };\n}\n\n// ---------------------------------------------------------------------------------------------\n// Drafts and colors\n\n/** Where a draft starts when its theme keeps the site's own colors, and which theme that is. */\nexport type DraftSite = { colors: Base; siteTheme: string };\n\n/** A draft to edit from any theme: the site's own look (no colors) starts from `site.colors`. */\nexport function draftFrom(theme: ThemeSpec, site: DraftSite, name = `${theme.name} remix`): ThemeSpec {\n  const colors = theme.colors ?? deriveColors({ ...site.colors }) as ThemeColors;\n  return sanitizeSpec({ ...JSON.parse(JSON.stringify(theme)), id: slug(name), name, author: 'You', description: theme.id === site.siteTheme ? '' : `Based on ${theme.name}.`, colors, mode: theme.mode === 'auto' ? 'dark' : theme.mode });\n}\n\nexport type Base = { bg: string; text: string; accent: string };\nexport const DERIVED_ROLES = ['surface', 'elevated', 'border', 'muted', 'inverse', 'onInverse', 'page'] as const;\nexport type DerivedRole = typeof DERIVED_ROLES[number];\n\n/** The full palette from three base colors; `pinned` roles keep the value the owner set by hand. */\nexport function paletteFrom(base: Base, pinned: Partial<Record<DerivedRole, string>> = {}): ThemeColors {\n  const derived = deriveColors(base) as ThemeColors;\n  return { ...derived, inverse: base.text, onInverse: base.bg, page: base.bg, ...pinned };\n}\n\n/** Which derived roles differ from what the three base colors would give (they are \"pinned\"). */\nexport function pinnedRoles(colors: ThemeColors): Partial<Record<DerivedRole, string>> {\n  const auto = paletteFrom({ bg: colors.bg, text: colors.text, accent: colors.accent });\n  const out: Partial<Record<DerivedRole, string>> = {};\n  for (const role of DERIVED_ROLES) { const value = colors[role]; if (value && value !== auto[role]) out[role] = value; }\n  return out;\n}\n\n/** Light or dark, from the palette itself. */\nexport const modeOf = (colors: Pick<Palette, 'bg' | 'text'>): 'light' | 'dark' => relativeLuminance(colors.bg) < relativeLuminance(colors.text) ? 'dark' : 'light';\n\n// ---------------------------------------------------------------------------------------------\n// Contrast\n\nexport type ContrastCheck = { id: string; label: string; fg: string; bg: string; ratio: number; need: number; pass: boolean };\n\n/** The pairs a site's page draws, with the level wayBetter enforces for each (7:1 text, 4.5:1 secondary text, links and labels, 3:1 the button on the page). */\nexport function contrastReport(colors: ThemeColors): ContrastCheck[] {\n  const page = colors.page ?? colors.bg;\n  const inverse = colors.inverse ?? colors.text;\n  const onInverse = colors.onInverse ?? colors.bg;\n  const pairs: Array<[string, string, string, string, number]> = [\n    ['text-bg', 'Text on background', colors.text, colors.bg, 7],\n    ['text-surface', 'Text on cards and menus', colors.text, colors.surface, 7],\n    ['text-page', 'Text on the page canvas', colors.text, page, 7],\n    ['muted-bg', 'Secondary text', colors.muted, colors.bg, 4.5],\n    ['muted-surface', 'Secondary text on cards', colors.muted, colors.surface, 4.5],\n    ['accent-bg', 'Links and accent', colors.accent, colors.bg, 4.5],\n    ['accent-elevated', 'Links on hover', colors.accent, colors.elevated, 4.5],\n    ['button-label', 'Post button label', onInverse, inverse, 4.5],\n    ['button-page', 'Post button on the page', inverse, colors.bg, 3],\n  ];\n  return pairs.map(([id, label, fg, bg, need]) => {\n    const ratio = contrastRatio(fg, bg);\n    return { id, label, fg, bg, ratio: Math.round(ratio * 100) / 100, need, pass: ratio >= need - 0.005 };\n  });\n}\n\n/** WCAG level of a ratio for normal text. */\nexport const wcagLevel = (ratio: number) => ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : ratio >= 3 ? 'AA large' : 'Fail';\n\n/** What the runtime would draw anyway: the palette moved just enough to pass every check. */\nexport const autoFix = (colors: ThemeColors): ThemeColors => ensureContrast(colors);\n\n// ---------------------------------------------------------------------------------------------\n// Saving and sharing\n\n/** A unique id for a new theme named `name` among `taken` ids (pass the built-in ones too). */\nexport function uniqueId(name: string, taken: Iterable<string>): string {\n  const used = new Set(taken);\n  const base = slug(name);\n  let id = base;\n  for (let n = 2; used.has(id); n++) id = `${base.slice(0, 36)}-${n}`;\n  return id;\n}\n\n/** The theme file: sanitized, `$schema` first, pretty-printed. */\nexport function themeJson(theme: ThemeSpec): string {\n  return JSON.stringify({ $schema: THEME_SCHEMA_URL, ...sanitizeSpec(theme) }, null, 2);\n}\n"]}

package/dist/shell/panel/compare.d.ts

@@ -0,0 +1,10 @@
+export type ComparedLine = {
+    text: string;
+    changed: boolean;
+};
+/** A bounded line comparison: large documents use prefix/suffix matching. */
+export declare function compareLines(previous: string, current: string): {
+    previous: ComparedLine[];
+    current: ComparedLine[];
+    simplified: boolean;
+};

package/dist/shell/panel/compare.js

@@ -0,0 +1,51 @@
+/** A bounded line comparison: large documents use prefix/suffix matching. */
+export function compareLines(previous, current) {
+    const oldLines = previous.split('\n');
+    const newLines = current.split('\n');
+    const oldSame = new Set();
+    const newSame = new Set();
+    const simplified = oldLines.length * newLines.length > 160_000;
+    if (simplified) {
+        let start = 0;
+        while (start < oldLines.length && start < newLines.length && oldLines[start] === newLines[start]) {
+            oldSame.add(start);
+            newSame.add(start);
+            start++;
+        }
+        let oldEnd = oldLines.length - 1;
+        let newEnd = newLines.length - 1;
+        while (oldEnd >= start && newEnd >= start && oldLines[oldEnd] === newLines[newEnd]) {
+            oldSame.add(oldEnd--);
+            newSame.add(newEnd--);
+        }
+    }
+    else {
+        const columns = newLines.length + 1;
+        const lengths = new Uint32Array((oldLines.length + 1) * columns);
+        for (let i = oldLines.length - 1; i >= 0; i--) {
+            for (let j = newLines.length - 1; j >= 0; j--) {
+                lengths[i * columns + j] = oldLines[i] === newLines[j]
+                    ? lengths[(i + 1) * columns + j + 1] + 1
+                    : Math.max(lengths[(i + 1) * columns + j], lengths[i * columns + j + 1]);
+            }
+        }
+        let i = 0;
+        let j = 0;
+        while (i < oldLines.length && j < newLines.length) {
+            if (oldLines[i] === newLines[j]) {
+                oldSame.add(i++);
+                newSame.add(j++);
+            }
+            else if (lengths[(i + 1) * columns + j] >= lengths[i * columns + j + 1])
+                i++;
+            else
+                j++;
+        }
+    }
+    return {
+        previous: oldLines.map((text, index) => ({ text, changed: !oldSame.has(index) })),
+        current: newLines.map((text, index) => ({ text, changed: !newSame.has(index) })),
+        simplified,
+    };
+}
+//# sourceMappingURL=compare.js.map

package/dist/shell/panel/compare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.js","sourceRoot":"","sources":["../../../../../../shell/src/panel/compare.ts"],"names":[],"mappings":"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","sourcesContent":["export type ComparedLine = { text: string; changed: boolean };\n\n/** A bounded line comparison: large documents use prefix/suffix matching. */\nexport function compareLines(previous: string, current: string): { previous: ComparedLine[]; current: ComparedLine[]; simplified: boolean } {\n  const oldLines = previous.split('\\n');\n  const newLines = current.split('\\n');\n  const oldSame = new Set<number>();\n  const newSame = new Set<number>();\n  const simplified = oldLines.length * newLines.length > 160_000;\n  if (simplified) {\n    let start = 0;\n    while (start < oldLines.length && start < newLines.length && oldLines[start] === newLines[start]) {\n      oldSame.add(start); newSame.add(start); start++;\n    }\n    let oldEnd = oldLines.length - 1;\n    let newEnd = newLines.length - 1;\n    while (oldEnd >= start && newEnd >= start && oldLines[oldEnd] === newLines[newEnd]) {\n      oldSame.add(oldEnd--); newSame.add(newEnd--);\n    }\n  } else {\n    const columns = newLines.length + 1;\n    const lengths = new Uint32Array((oldLines.length + 1) * columns);\n    for (let i = oldLines.length - 1; i >= 0; i--) {\n      for (let j = newLines.length - 1; j >= 0; j--) {\n        lengths[i * columns + j] = oldLines[i] === newLines[j]\n          ? lengths[(i + 1) * columns + j + 1] + 1\n          : Math.max(lengths[(i + 1) * columns + j], lengths[i * columns + j + 1]);\n      }\n    }\n    let i = 0; let j = 0;\n    while (i < oldLines.length && j < newLines.length) {\n      if (oldLines[i] === newLines[j]) { oldSame.add(i++); newSame.add(j++); }\n      else if (lengths[(i + 1) * columns + j] >= lengths[i * columns + j + 1]) i++;\n      else j++;\n    }\n  }\n  return {\n    previous: oldLines.map((text, index) => ({ text, changed: !oldSame.has(index) })),\n    current: newLines.map((text, index) => ({ text, changed: !newSame.has(index) })),\n    simplified,\n  };\n}\n"]}

package/dist/shell/panel/controls.d.ts

@@ -0,0 +1,135 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export declare const SearchProvider: import("react").Provider<string>;
+export declare const useSettingsQuery: () => string;
+/** Whether every word of the settings search is in one of `texts`. */
+export declare const matchesQuery: (query: string, ...texts: Array<string | undefined>) => boolean;
+export declare function Section({ title, hint, action, children, id }: {
+    title: string;
+    hint?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    id?: string;
+}): import("react").JSX.Element;
+/** A setting: label and hint on the left, one control on the right. `wide` puts the control on its own line. */
+export declare function Row({ label, hint, children, keywords, wide, badge }: {
+    label: string;
+    hint?: ReactNode;
+    children?: ReactNode;
+    keywords?: string;
+    wide?: boolean;
+    badge?: ReactNode;
+}): import("react").JSX.Element | null;
+export declare function Badge({ children, tone }: {
+    children: ReactNode;
+    tone?: 'plain' | 'accent' | 'warn' | 'ok';
+}): import("react").JSX.Element;
+export declare function EmptyState({ icon, title, children, action }: {
+    icon?: ReactNode;
+    title: string;
+    children?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+type ButtonProps = {
+    children: ReactNode;
+    onClick?: () => void;
+    tone?: 'plain' | 'primary' | 'danger' | 'ghost';
+    disabled?: boolean;
+    title?: string;
+    icon?: ReactNode;
+    size?: 'sm' | 'md';
+    type?: 'button' | 'submit';
+    label?: string;
+};
+export declare function Button({ children, onClick, tone, disabled, title, icon, size, type, label }: ButtonProps): import("react").JSX.Element;
+export declare function Toggle({ checked, onChange, label, disabled }: {
+    checked: boolean;
+    onChange(next: boolean): void;
+    label: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/** `group`: a Select shows a heading above the first option of each group (options of a group are consecutive). */
+export type Option<T extends string | number> = {
+    value: T;
+    label: string;
+    hint?: string;
+    icon?: ReactNode;
+    style?: CSSProperties;
+    group?: string;
+};
+export declare function Segmented<T extends string | number>({ value, options, onChange, label, size }: {
+    value: T | null;
+    options: Array<Option<T>>;
+    onChange(next: T): void;
+    label: string;
+    size?: 'sm' | 'md';
+}): import("react").JSX.Element;
+export declare function Select<T extends string>({ value, options, onChange, label, placeholder: givenPlaceholder, width }: {
+    value: T | null;
+    options: Array<Option<T>>;
+    onChange(next: T): void;
+    label: string;
+    placeholder?: string;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function Slider({ value, min, max, step, onChange, onCommit, label, format }: {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    onChange(next: number): void;
+    onCommit?(next: number): void;
+    label: string;
+    format(value: number): string;
+}): import("react").JSX.Element;
+export declare function ColorField({ value, swatches, onChange, autoLabel, label }: {
+    value: string | null;
+    swatches: string[];
+    onChange(next: string | null): void;
+    autoLabel?: string;
+    label: string;
+}): import("react").JSX.Element;
+export declare function TextInput({ value, onChange, placeholder, label, type, width, onEnter, mono }: {
+    value: string;
+    onChange(next: string): void;
+    placeholder?: string;
+    label: string;
+    type?: string;
+    width?: number | string;
+    onEnter?(): void;
+    mono?: boolean;
+}): import("react").JSX.Element;
+/** An input with its action button attached (Save, Add…). */
+export declare function InputRow({ value, onChange, onSubmit, placeholder, label, button, disabled, mono }: {
+    value: string;
+    onChange(next: string): void;
+    onSubmit(): void;
+    placeholder?: string;
+    label: string;
+    button: string;
+    disabled?: boolean;
+    mono?: boolean;
+}): import("react").JSX.Element;
+export declare function SearchField({ value, onChange, placeholder, label }: {
+    value: string;
+    onChange(next: string): void;
+    placeholder: string;
+    label: string;
+}): import("react").JSX.Element;
+export declare function ChipList({ items, onRemove, render, title, empty, icon }: {
+    items: string[];
+    onRemove(item: string): void;
+    render?(item: string): string;
+    title?(item: string): string;
+    empty?: string;
+    icon?: ReactNode;
+}): import("react").JSX.Element | null;
+/** Number with − / + buttons. */
+export declare function Stepper({ value, min, max, onChange, label, suffix }: {
+    value: number;
+    min: number;
+    max: number;
+    onChange(next: number): void;
+    label: string;
+    suffix?: string;
+}): import("react").JSX.Element;
+export {};