tweakit 0.6.0 → 0.7.0

package/src/tweaks/types.ts

@@ -2,8 +2,10 @@
  * panel you get back. These are what ship as .d.ts, so consumers get autocomplete on
  * the schema shorthands + the verbose control forms + the panel methods. */
 
-/** An option for a select / radio grid: a bare string or number, or `{ value, label }`; the param is the value as written. */
-export type Option = string | number | { value: string | number; label?: string; color?: string }; // color: any CSS color, shown as a swatch beside a dropdown option (and the chosen one on the row)
+/** An option for a select / radio grid: a bare string or number, or `{ value, label }`; the param is the value as
+ * written. */
+// color: any CSS color, shown as a swatch beside a dropdown option (and the chosen one on the row)
+export type Option = string | number | { value: string | number; label?: string; color?: string };
 
 /** A color stop in a gradient. */
 export type GradientStop = { color: string; pos: number };
@@ -11,7 +13,8 @@ export type GradientStop = { color: string; pos: number };
 /** The CSS `<color-interpolation-method>` a gradient blends through — the space of the
  *  mode the stops were authored in. Template it as `linear-gradient(in <interpolation> …)`
  *  so your CSS ramp matches the editor's preview exactly. */
-export type GradientInterpolation = "srgb" | "hsl" | "hwb" | "oklch" | "oklab" | "lch" | "lab" | "display-p3" | "rec2020";
+export type GradientInterpolation =
+  "srgb" | "hsl" | "hwb" | "oklch" | "oklab" | "lch" | "lab" | "display-p3" | "rec2020";
 
 /** What a sides control accepts: one number for all four; `[vertical, horizontal]`,
  *  `[top, horizontal, bottom]` or `[top, right, bottom, left]` (CSS order); a CSS shorthand
@@ -19,29 +22,69 @@ export type GradientInterpolation = "srgb" | "hsl" | "hwb" | "oklch" | "oklab" |
  *  units warn and read as px); or any subset of
  *  the four as an object. With `corners: true` the four are the corners from top-left round,
  *  the same CSS order, under the same keys, and they floor at 0 unless `min` says otherwise. */
-export type SidesInput = number | readonly number[] | string | { top?: number; right?: number; bottom?: number; left?: number };
+export type SidesInput =
+  number | readonly number[] | string | { top?: number; right?: number; bottom?: number; left?: number };
 /** A sides control's value: the four numbers in CSS order plus the shorthand they collapse
  *  to (`css`, in the control's unit, `0` bare), so `el.style.padding = css`. */
-export interface SidesValue { top: number; right: number; bottom: number; left: number; css: string }
+export interface SidesValue {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  css: string;
+}
 
 /** What a shadow control accepts — any subset of its fields (px, `color` any color the kit
  *  parses); or, as `value`, a `box-shadow` string: optional `inset`, two to four px lengths,
  *  one color, one layer. */
-export interface ShadowInput { inset?: boolean; x?: number; y?: number; blur?: number; spread?: number; color?: string }
+export interface ShadowInput {
+  inset?: boolean;
+  x?: number;
+  y?: number;
+  blur?: number;
+  spread?: number;
+  color?: string;
+}
 /** A shadow control's value — the fields, plus the `box-shadow` CSS they resolve to (`css`),
  *  built from the numbers and the picker's own color notation, so `el.style.boxShadow = css`. */
-export interface ShadowValue { inset: boolean; x: number; y: number; blur: number; spread: number; color: string; css: string }
+export interface ShadowValue {
+  inset: boolean;
+  x: number;
+  y: number;
+  blur: number;
+  spread: number;
+  color: string;
+  css: string;
+}
 /** What a motion control accepts — any subset of either mode's fields. A `curve` may be
  *  the four cubic-bezier numbers or a CSS keyword (`ease`, `ease-out`, …); `duration` is
  *  the easing's, in ms. Spring keys select the spring mode unless `mode` says otherwise. */
-export interface MotionInput { mode?: "easing" | "spring"; curve?: readonly [number, number, number, number] | string; duration?: number; stiffness?: number; damping?: number; mass?: number; visualDuration?: number; bounce?: number }
+export interface MotionInput {
+  mode?: "easing" | "spring";
+  curve?: readonly [number, number, number, number] | string;
+  duration?: number;
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  visualDuration?: number;
+  bounce?: number;
+}
 /** A motion control's value: an easing curve with its duration, or a spring — each also
  *  carrying the CSS it resolves to, `duration` in ms and an `easing` string (`cubic-bezier(…)`,
  *  or a sampled `linear(…)` for the spring), so a host can write
  *  `transition: transform ${duration}ms ${easing}` in either mode. */
 export type MotionValue =
   | { mode: "easing"; curve: [number, number, number, number]; duration: number; easing: string }
-  | { mode: "spring"; stiffness: number; damping: number; mass: number; visualDuration?: number; bounce?: number; duration: number; easing: string };
+  | {
+      mode: "spring";
+      stiffness: number;
+      damping: number;
+      mass: number;
+      visualDuration?: number;
+      bounce?: number;
+      duration: number;
+      easing: string;
+    };
 
 /** How a gradient blends between neighboring stops: `"linear"` (CSS's own straight blend,
  *  the default) or a CSS easing — `ease`, `ease-in`, `ease-out`, `ease-in-out`, or any
@@ -52,7 +95,11 @@ export type GradientEasing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-
 /** A gradient control's value — the stops, the blend space, and the easing between stops.
  *  Hand it to `gradientCss(value, angle?)` for the CSS, or `gradientStops(value)` for just
  *  the stop list (a conic / radial gradient). */
-export interface GradientValue { stops: GradientStop[]; interpolation?: GradientInterpolation; easing?: GradientEasing }
+export interface GradientValue {
+  stops: GradientStop[];
+  interpolation?: GradientInterpolation;
+  easing?: GradientEasing;
+}
 
 /** Reader passed to a conditional `render` / `disabled` predicate — `get("siblingKey")`. */
 export type Get = (key: string) => unknown;
@@ -76,14 +123,22 @@ export interface ControlOptions {
 
 /** The verbose object forms a schema value can take: `{ type: "…", … }`. */
 export type SchemaObject =
-  | { type: "slider"; value?: number; min?: number; max?: number; step?: number; soft?: boolean; unit?: string;
+  | {
+      type: "slider";
+      value?: number;
+      min?: number;
+      max?: number;
+      step?: number;
+      soft?: boolean;
+      unit?: string;
       /** Draws the readout from the value ("7:30 AM" for minutes of the day), in place of its
        *  digits; `unit` still follows it. Display only, like `unit`: the param stays the number. */
       format?: (value: number) => string;
       /** Reads a typed readout back into a value, so the inline editor shows and takes the
        *  formatted text (without one, it edits the digits). Text it can't read (it throws, or
        *  returns anything but a finite number) leaves the value where it was. */
-      parse?: (text: string) => number }
+      parse?: (text: string) => number;
+    }
   | { type: "number"; value?: number; min?: number; max?: number; step?: number; soft?: boolean; unit?: string }
   | { type: "checkbox"; value?: boolean }
   | { type: "list"; options: readonly Option[]; value?: string | number }
@@ -91,37 +146,121 @@ export type SchemaObject =
   | { type: "color"; value?: string }
   | { type: "text"; value?: string; rows?: number; placeholder?: string }
   | { type: "interval"; value?: readonly [number, number]; min?: number; max?: number; step?: number }
-  | { type: "spring"; mode?: "time" | "physics"; visualDuration?: number; bounce?: number; stiffness?: number; damping?: number; mass?: number; value?: { mode?: "time" | "physics"; visualDuration?: number; bounce?: number; stiffness?: number; damping?: number; mass?: number } }
+  | {
+      type: "spring";
+      mode?: "time" | "physics";
+      visualDuration?: number;
+      bounce?: number;
+      stiffness?: number;
+      damping?: number;
+      mass?: number;
+      value?: {
+        mode?: "time" | "physics";
+        visualDuration?: number;
+        bounce?: number;
+        stiffness?: number;
+        damping?: number;
+        mass?: number;
+      };
+    }
   | { type: "cubicbezier"; value?: readonly [number, number, number, number] }
   | ({ type: "shadow"; value?: ShadowInput | string } & ShadowInput)
-  | { type: "sides"; value?: SidesInput; corners?: boolean; unit?: string; step?: number; min?: number; max?: number; top?: number; right?: number; bottom?: number; left?: number }
+  | {
+      type: "sides";
+      value?: SidesInput;
+      corners?: boolean;
+      unit?: string;
+      step?: number;
+      min?: number;
+      max?: number;
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    }
   | ({ type: "motion"; value?: MotionInput } & MotionInput)
-  | { type: "point"; components: ReadonlyArray<{ key: string; label?: string; value?: number; min?: number; max?: number; step?: number }>; value?: { readonly [key: string]: number }; pad?: boolean; invertY?: boolean }
-  | { type: "point"; value: { readonly [key: string]: number }; components?: undefined; pad?: boolean; invertY?: boolean } // the value names its components
-  | { type: "gradient"; value?: GradientValue | ReadonlyArray<GradientStop | readonly [string, number]>; stops?: ReadonlyArray<GradientStop | readonly [string, number]>; interpolation?: GradientInterpolation; easing?: GradientEasing }
-  | { type: "plot"; expr?: string; fn?: (x: number) => number; xMin?: number; xMax?: number; yMin?: number; yMax?: number; samples?: number; editable?: boolean; min?: number; max?: number }
+  | {
+      type: "point";
+      components: ReadonlyArray<{
+        key: string;
+        label?: string;
+        value?: number;
+        min?: number;
+        max?: number;
+        step?: number;
+      }>;
+      value?: { readonly [key: string]: number };
+      pad?: boolean;
+      invertY?: boolean;
+    }
+  // the value names its components
+  | {
+      type: "point";
+      value: { readonly [key: string]: number };
+      components?: undefined;
+      pad?: boolean;
+      invertY?: boolean;
+    }
+  | {
+      type: "gradient";
+      value?: GradientValue | ReadonlyArray<GradientStop | readonly [string, number]>;
+      stops?: ReadonlyArray<GradientStop | readonly [string, number]>;
+      interpolation?: GradientInterpolation;
+      easing?: GradientEasing;
+    }
+  | {
+      type: "plot";
+      expr?: string;
+      fn?: (x: number) => number;
+      xMin?: number;
+      xMax?: number;
+      yMin?: number;
+      yMax?: number;
+      samples?: number;
+      editable?: boolean;
+      min?: number;
+      max?: number;
+    }
   | { type: "fpsgraph" }
-  | { type: "monitor"; get?: () => number | string; value?: number | string; graph?: boolean; view?: "graph" | "text"; min?: number; max?: number; interval?: number; rows?: number; decimals?: number }
-  | { type: "image"; value?: string;
+  | {
+      type: "monitor";
+      get?: () => number | string;
+      value?: number | string;
+      graph?: boolean;
+      view?: "graph" | "text";
+      min?: number;
+      max?: number;
+      interval?: number;
+      rows?: number;
+      decimals?: number;
+    }
+  | {
+      type: "image";
+      value?: string;
       /** Supplied images to pick from, as URLs or `{ value, label }`. The control becomes a row naming the chosen
-       *  image that opens a pane of tiles with the upload below them, and the param is the chosen URL or the upload's data URL. */
+       *  image that opens a pane of tiles with the upload below them, and the param is the chosen URL or the upload's
+       *  data URL. */
       options?: ReadonlyArray<string | { value: string; label?: string }>;
-      /** Tiles per row in the gallery, 1 to 6 (by default one per option for two or three, 2 for one or four, then 3). */
+      /** Tiles per row in the gallery, 1 to 6 (by default one per option for two or three, 2 for one or four, then
+       * 3). */
       cols?: number;
       /** The largest upload taken, in bytes (10 MB unless set); a bigger file is refused with a note. */
       maxSize?: number;
       /** An upload longer than this on its long side, in px, is drawn down to it before it becomes the param, and one
-       *  heavier than 1.5 MB is redrawn at its size, so a phone photo can't fill storage (2560 unless set; `false` takes
-       *  uploads as they are). A JPEG comes out as a JPEG at
-       *  `quality`; anything else as a PNG when that is 1.5 MB or less (a screenshot, not a photo), else as a JPEG, or a WebP
-       *  when it has transparency. A GIF, an SVG, an animated WebP or APNG, a light picture within `fit`, or one the redraw wouldn't make smaller is kept as it is. */
+       *  heavier than 1.5 MB is redrawn at its size, so a phone photo can't fill storage (2560 unless set; `false`
+       *  takes uploads as they are). A JPEG comes out as a JPEG at
+       *  `quality`; anything else as a PNG when that is 1.5 MB or less (a screenshot, not a photo), else as a JPEG, or
+       *  a WebP when it has transparency. A GIF, an SVG, an animated WebP or APNG, a light picture within `fit`, or one
+       *  the redraw wouldn't make smaller is kept as it is. */
       fit?: number | false;
       /** The JPEG or WebP quality of a shrunk upload, 0 to 1 (0.85 unless set). */
       quality?: number;
       /** `false` leaves the upload button out of a gallery: the options are the whole choice. */
       upload?: boolean;
-      /** `false` leaves Clear out of a gallery, and Delete no longer empties it: for a choice that must keep a value. */
-      clear?: boolean }
+      /** `false` leaves Clear out of a gallery, and Delete no longer empties it: for a choice that must keep a
+       * value. */
+      clear?: boolean;
+    }
   | { type: "button"; action: () => void; label?: string }
   | { type: "buttongroup"; buttons: Record<string, () => void> | ReadonlyArray<{ label: string; action: () => void }> }
   | { type: "separator" }
@@ -129,30 +268,44 @@ export type SchemaObject =
 
 /** A schema value — a shorthand, a verbose `{ type }` object, or a nested folder. */
 export type SchemaValue = SchemaValueOf<SchemaNest>;
-// `F` is the nested-folder branch: strict for a schema annotated `Schema`, loose for what tweaks() infers from (HeldSchema).
+// `F` is the nested-folder branch: strict for a schema annotated `Schema`, loose for what tweaks() infers from
+// (HeldSchema).
 type SchemaValueOf<F> =
-  | number                                          // bare number → slider (0–1 for a value ≤ 1, else 0–3×value; a negative spans that either side of zero)
-  | boolean                                         // → checkbox
-  | string                                          // → text input; a hex or color-function string → color picker
-  | readonly [number] | readonly [number, number] | readonly [number, number, number] | readonly [number, number, number, number] // [value, min?, max?, step?] → slider
-  | readonly [readonly [number, number], number, number] | readonly [readonly [number, number], number, number, number]           // [[lo,hi], min, max, step?] → interval
-  | readonly number[] | readonly (number | readonly number[])[] // either of the above, widened by a schema held in a variable
-  | readonly Option[]                               // a list of options → list (dropdown)
-  | { options: readonly Option[]; value?: string | number }  // a list with a chosen default
-  | { action: () => void; label?: string }          // → button
-  | (SchemaObject & ControlOptions)                 // verbose form (+ render/disabled/hint)
-  | F                                               // nested object → folder
-  | SchemaFolder;                                   // a nested folder with its own render / disabled predicate
+  // bare number → slider (0–1 for a value ≤ 1, else 0–3×value; a negative spans that either side of zero)
+  | number
+  | boolean // → checkbox
+  | string // → text input; a hex or color-function string → color picker
+  // [value, min?, max?, step?] → slider
+  | readonly [number]
+  | readonly [number, number]
+  | readonly [number, number, number]
+  | readonly [number, number, number, number]
+  // [[lo,hi], min, max, step?] → interval
+  | readonly [readonly [number, number], number, number]
+  | readonly [readonly [number, number], number, number, number]
+  // either of the above, widened by a schema held in a variable
+  | readonly number[]
+  | readonly (number | readonly number[])[]
+  | readonly Option[] // a list of options → list (dropdown)
+  | { options: readonly Option[]; value?: string | number } // a list with a chosen default
+  | { action: () => void; label?: string } // → button
+  | (SchemaObject & ControlOptions) // verbose form (+ render/disabled/hint)
+  | F // nested object → folder
+  | SchemaFolder; // a nested folder with its own render / disabled predicate
 
 /** The object you hand to `tweaks(name, schema, opts?)`. No value is a function, so a verbose
  *  form's callbacks (`format`, `fn`) take their parameter types from that form alone. */
-export interface Schema { readonly [key: string]: SchemaValue; }
-// A folder's string `type` names a control (a known name with none of its fields is still a folder), so a name no control
-// has can't pass as a folder: `const s: Schema = { a: { type: "slidr", value: 1 } }` compiled that way.
+export interface Schema {
+  readonly [key: string]: SchemaValue;
+}
+// A folder's string `type` names a control (a known name with none of its fields is still a folder), so a name no
+// control has can't pass as a folder: `const s: Schema = { a: { type: "slidr", value: 1 } }` compiled that way.
 type SchemaNest = Schema & { readonly type?: SchemaObject["type"] | Exclude<SchemaValue, string> };
 /** What tweaks() and mountControl() infer from: `Schema` with a folder's `type` left open, since a schema held in a
  *  variable widens a verbose form's `type` to `string`; their own check then rules on the names it can still see. */
-export interface HeldSchema { readonly [key: string]: HeldValue; }
+export interface HeldSchema {
+  readonly [key: string]: HeldValue;
+}
 /** A single value as mountControl() infers it; see `HeldSchema`. */
 export type HeldValue = SchemaValueOf<HeldSchema>;
 /** A nested folder that carries its own `render` / `disabled` predicate or `hint`: chrome, not
@@ -171,94 +324,254 @@ export interface SchemaFolder {
 // these types read the control it builds the way schema.ts does, in the same order.
 
 /** A spring control's value: the physics, plus the time pair and mode when tuned by feel. */
-export interface SpringValue { stiffness: number; damping: number; mass: number; visualDuration?: number; bounce?: number; mode?: "time" | "physics" }
+export interface SpringValue {
+  stiffness: number;
+  damping: number;
+  mass: number;
+  visualDuration?: number;
+  bounce?: number;
+  mode?: "time" | "physics";
+}
 
-type OptionValue<O> = O extends string | number ? O : O extends { readonly value: infer V extends string | number } ? V : never;
+type OptionValue<O> = O extends string | number
+  ? O
+  : O extends { readonly value: infer V extends string | number }
+    ? V
+    : never;
 // A list's param: one of its options, or a `value` off the list, which the control keeps as given until a pick.
-type ChoiceValue<V> = (V extends { readonly options: readonly (infer O)[] } ? OptionValue<O> : never) | (V extends { readonly value: infer D extends string | number } ? D : never);
-type Alnum = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
-type Dashed<S extends string, Acc extends string = "", Run = false> =
-  S extends `${infer C}${infer R}` ? C extends Alnum ? Dashed<R, `${Acc}${C}`, false> : Run extends true ? Dashed<R, Acc, true> : Dashed<R, `${Acc}-`, true> : Acc;
+type ChoiceValue<V> =
+  | (V extends { readonly options: readonly (infer O)[] } ? OptionValue<O> : never)
+  | (V extends { readonly value: infer D extends string | number } ? D : never);
+type Alnum =
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f"
+  | "g"
+  | "h"
+  | "i"
+  | "j"
+  | "k"
+  | "l"
+  | "m"
+  | "n"
+  | "o"
+  | "p"
+  | "q"
+  | "r"
+  | "s"
+  | "t"
+  | "u"
+  | "v"
+  | "w"
+  | "x"
+  | "y"
+  | "z"
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9";
+type Dashed<S extends string, Acc extends string = "", Run = false> = S extends `${infer C}${infer R}`
+  ? C extends Alnum
+    ? Dashed<R, `${Acc}${C}`, false>
+    : Run extends true
+      ? Dashed<R, Acc, true>
+      : Dashed<R, `${Acc}-`, true>
+  : Acc;
 type TrimDash<S extends string> = S extends `-${infer R}` ? TrimDash<R> : S extends `${infer R}-` ? TrimDash<R> : S;
 /** A tab title's key under `params`: lower-case, each run of other characters a `-`, trimmed
  *  (`"Layout & Grid"` → `"layout-grid"`). Two titles that slug alike are told apart at runtime only. */
-export type TabKey<T extends string> = string extends T ? string : TrimDash<Dashed<Lowercase<T>>> extends infer K extends string ? (K extends "" ? "tab" : K) : never;
+export type TabKey<T extends string> = string extends T
+  ? string
+  : TrimDash<Dashed<Lowercase<T>>> extends infer K extends string
+    ? K extends ""
+      ? "tab"
+      : K
+    : never;
 // True when two page titles slug to one key: the runtime suffixes the later one (`a`, `a-2`) in an
 // order a type can't follow, so those pages read as the loose Params rather than merge into one.
-type TabClash<P> = true extends { [T in keyof P & string]: TabKey<T> extends { [U in Exclude<keyof P & string, T>]: TabKey<U> }[Exclude<keyof P & string, T>] ? true : false }[keyof P & string] ? true : false;
+type TabClash<P> = true extends {
+  [T in keyof P & string]: TabKey<T> extends { [U in Exclude<keyof P & string, T>]: TabKey<U> }[Exclude<
+    keyof P & string,
+    T
+  >]
+    ? true
+    : false;
+}[keyof P & string]
+  ? true
+  : false;
 
 type Valueless = "button" | "buttongroup" | "separator" | "fpsgraph" | "monitor";
-// The field each falsy-capable form hinges on (schema.ts REQUIRED): without it the object isn't
+// The field each falsy-capable form hinges on (schema.ts REQUIRED), or a `value`: without either the object isn't
 // that control but a shorthand or a folder holding a child named `type`.
-type Hinge = { list: "options"; radiogrid: "options"; segmented: "options"; point: "components" | "value"; tabs: "pages" };
+type Hinge = {
+  list: "options" | "value";
+  radiogrid: "options" | "value";
+  segmented: "options" | "value";
+  point: "components" | "value";
+  tabs: "pages" | "value";
+};
 // A hinge field there but unusable skips the control at runtime, so it puts nothing on params.
-type TypedValue<V> =
-  V extends { readonly type: "slider" | "number" } ? number
-  : V extends { readonly type: "checkbox" } ? boolean
-  : V extends { readonly type: "list" | "radiogrid" | "segmented" } ? (V extends { readonly options: readonly unknown[] } ? ChoiceValue<V> : never)
-  : V extends { readonly type: "color" | "text" | "image" | "plot" } ? string
-  : V extends { readonly type: "interval" } ? [number, number]
-  : V extends { readonly type: "cubicbezier" } ? [number, number, number, number]
-  : V extends { readonly type: "spring" } ? SpringValue
-  : V extends { readonly type: "motion" } ? MotionValue
-  : V extends { readonly type: "shadow" } ? ShadowValue
-  : V extends { readonly type: "sides" } ? SidesValue
-  : V extends { readonly type: "gradient" } ? GradientValue
-  : V extends { readonly type: "point" } ? (V extends { readonly components: readonly [] } ? never : V extends { readonly components: readonly (infer C)[] } ? { [K in C extends { readonly key: infer Key extends string } ? Key : never]: number }
-    : V extends { readonly value: infer P extends object } ? (keyof P extends never ? never : { -readonly [K in keyof P & string]: number }) : never)
-  : V extends { readonly type: "tabs" } ? (V extends { readonly pages: infer P extends object } ? (keyof P extends never ? never : TabClash<P> extends true ? Record<string, Params> : { [T in keyof P & string as TabKey<T>]: ParamsOf<P[T]> }) : never)
-  : unknown;
+type TypedValue<V> = V extends { readonly type: "slider" | "number" }
+  ? number
+  : V extends { readonly type: "checkbox" }
+    ? boolean
+    : V extends { readonly type: "list" | "radiogrid" | "segmented" }
+      ? V extends { readonly options: readonly unknown[] }
+        ? ChoiceValue<V>
+        : never
+      : V extends { readonly type: "color" | "text" | "image" | "plot" }
+        ? string
+        : V extends { readonly type: "interval" }
+          ? [number, number]
+          : V extends { readonly type: "cubicbezier" }
+            ? [number, number, number, number]
+            : V extends { readonly type: "spring" }
+              ? SpringValue
+              : V extends { readonly type: "motion" }
+                ? MotionValue
+                : V extends { readonly type: "shadow" }
+                  ? ShadowValue
+                  : V extends { readonly type: "sides" }
+                    ? SidesValue
+                    : V extends { readonly type: "gradient" }
+                      ? GradientValue
+                      : V extends { readonly type: "point" }
+                        ? V extends { readonly components: readonly [] }
+                          ? never
+                          : V extends { readonly components: readonly (infer C)[] }
+                            ? { [K in C extends { readonly key: infer Key extends string } ? Key : never]: number }
+                            : V extends { readonly value: infer P extends object }
+                              ? keyof P extends never
+                                ? never
+                                : { -readonly [K in keyof P & string]: number }
+                              : never
+                        : V extends { readonly type: "tabs" }
+                          ? V extends { readonly pages: infer P extends object }
+                            ? keyof P extends never
+                              ? never
+                              : TabClash<P> extends true
+                                ? Record<string, Params>
+                                : { [T in keyof P & string as TabKey<T>]: ParamsOf<P[T]> }
+                            : never
+                          : unknown;
 /** The value a schema entry puts on `params`. */
-export type ValueOf<V> =
-  V extends { readonly type: infer T } ? (
-    string extends T ? any                                   // a `type` widened by a schema held in a variable: the control can't be known
-    : T extends SchemaObject["type"] ? (T extends keyof Hinge ? ([Extract<Hinge[T], keyof V>] extends [never] ? ShorthandValue<V> : VerboseValue<V, T>) : VerboseValue<V, T>)
-    : ShorthandValue<V>)
+export type ValueOf<V> = V extends { readonly type: infer T }
+  ? // a `type` widened by a schema held in a variable: the control can't be known
+    string extends T
+    ? any
+    : T extends SchemaObject["type"]
+      ? T extends keyof Hinge
+        ? [Extract<Hinge[T], keyof V>] extends [never]
+          ? ShorthandValue<V>
+          : VerboseValue<V, T>
+        : VerboseValue<V, T>
+      : // A name no control has: with a field only a control reads, the runtime skips it; without one, it's a folder.
+        T extends string
+        ? [Extract<"value" | "options" | "action", keyof V>] extends [never]
+          ? ShorthandValue<V>
+          : never
+        : ShorthandValue<V>
   : ShorthandValue<V>;
 type VerboseValue<V, T> = T extends Valueless ? never : TypedValue<V>;
-type ShorthandValue<V> =
-  V extends readonly [readonly [number, number], ...unknown[]] ? [number, number]
-  : V extends readonly [number] | readonly [number, number] | readonly [number, number, number] | readonly [number, number, number, number] ? number
-  : V extends readonly [number, ...number[]] ? V[number]     // five numbers or more are a list of them
-  : V extends readonly [] ? undefined                        // an empty list, with no choice to hold
-  : V extends readonly number[] ? number                     // a tuple widened by a schema held in a variable: a slider, or a list of numbers
-  : V extends readonly (number | readonly number[])[] ? [number, number]
-  : V extends number ? number
-  : V extends boolean ? boolean
-  : V extends string ? string
-  : V extends readonly (infer O)[] ? OptionValue<O>
-  : V extends { readonly action: (...a: any[]) => any } ? never
-  : V extends { readonly options: readonly unknown[] } ? ChoiceValue<V>
-  : V extends object ? Entries<V, true>
-  : unknown;
+type ShorthandValue<V> = V extends readonly [readonly [number, number], ...unknown[]]
+  ? [number, number]
+  : V extends
+        | readonly [number]
+        | readonly [number, number]
+        | readonly [number, number, number]
+        | readonly [number, number, number, number]
+    ? number
+    : V extends readonly [number, ...number[]]
+      ? V[number] // five numbers or more are a list of them
+      : V extends readonly []
+        ? undefined // an empty list, with no choice to hold
+        : // a tuple widened by a schema held in a variable: a slider, or a list of numbers
+          V extends readonly number[]
+          ? number
+          : V extends readonly (number | readonly number[])[]
+            ? [number, number]
+            : V extends number
+              ? number
+              : V extends boolean
+                ? boolean
+                : V extends string
+                  ? string
+                  : V extends readonly (infer O)[]
+                    ? OptionValue<O>
+                    : V extends { readonly action: (...a: any[]) => any }
+                      ? never
+                      : V extends { readonly options: readonly unknown[] }
+                        ? ChoiceValue<V>
+                        : V extends object
+                          ? Entries<V, true>
+                          : unknown;
 // Keys the runtime skips at every level, since they would write through to Object.prototype.
 type Reserved = "__proto__" | "constructor" | "prototype";
 // A nested folder's render / disabled / hint are its chrome, not children; at the root and on a
 // tab page they are controls like any other key.
-type FolderChrome<V, K> = K extends "disabled" | "hint" ? true : K extends "render" ? (V extends (...a: any[]) => any ? true : false) : false;
-type Entries<S, Nested extends boolean> = string extends keyof S ? Params
-  : { -readonly [K in keyof S & string as K extends Reserved ? never : ValueOf<S[K]> extends never ? never : Nested extends true ? (FolderChrome<S[K], K> extends true ? never : K) : K]: ValueOf<S[K]> };
+type FolderChrome<V, K> = K extends "disabled" | "hint"
+  ? true
+  : K extends "render"
+    ? V extends (...a: any[]) => any
+      ? true
+      : false
+    : false;
+type Entries<S, Nested extends boolean> = string extends keyof S
+  ? Params
+  : {
+      -readonly [
+        K in keyof S & string as K extends Reserved
+          ? never
+          : ValueOf<S[K]> extends never
+            ? never
+            : Nested extends true
+              ? FolderChrome<S[K], K> extends true
+                ? never
+                : K
+              : K
+      ]: ValueOf<S[K]>;
+    };
 /** The live values a schema builds, nested like the schema; a plain `Schema` gives the loose `Params`. */
 export type ParamsOf<S> = Entries<S, false>;
 
 // ── Type names checked at the call ──
-// Schema's folder branch takes any object, so `{ type: "slidr", value: 1 }` fit it and compiled. tweaks() and mountControl()
-// intersect their argument with these, which keep a known name, a widened `string` (a schema held in a variable: the
-// runtime decides), and every shorthand as they are, and turn an unknown name into the list of known ones, so it fails
-// right where it's written. A known name without its hinge field is a folder at runtime and isn't checked further; with it,
-// or for a name with no hinge, the runtime builds that control, so its fields must fit the form: `{ type: "image",
-// options: [1] }` read as a folder of a text and a slider otherwise, and compiled.
-type CheckValue<V> =
-  V extends { readonly type: infer T } ? (string extends T ? V : T extends SchemaObject["type"] ? (V extends { readonly type: "tabs"; readonly pages: infer P } ? { readonly pages: { [K in keyof P]: KnownTypes<P[K]> } }
-    : T extends keyof Hinge ? ([Extract<Hinge[T], keyof V>] extends [never] ? unknown : FitsForm<V, T>) : FitsForm<V, T>) : { readonly type: NotAControlType })
-  : V extends readonly unknown[] | ((...a: any[]) => any) ? unknown
-  : V extends object ? KnownTypes<V>
-  : unknown;
+// Schema's folder branch takes any object, so `{ type: "slidr", value: 1 }` fit it and compiled. tweaks() and
+// mountControl() intersect their argument with these, which keep a known name, a widened `string` (a schema held in a
+// variable: the runtime decides), and every shorthand as they are, and turn an unknown name into the list of known
+// ones, so it fails right where it's written. A known name without its hinge field is a folder at runtime and isn't
+// checked further; with it, or for a name with no hinge, the runtime builds that control, so its fields must fit the
+// form: `{ type: "image", options: [1] }` read as a folder of a text and a slider otherwise, and compiled.
+type CheckValue<V> = V extends { readonly type: infer T }
+  ? string extends T
+    ? V
+    : T extends SchemaObject["type"]
+      ? V extends { readonly type: "tabs"; readonly pages: infer P }
+        ? { readonly pages: { [K in keyof P]: KnownTypes<P[K]> } }
+        : T extends keyof Hinge
+          ? [Extract<Hinge[T], keyof V>] extends [never]
+            ? unknown
+            : FitsForm<V, T>
+          : FitsForm<V, T>
+      : { readonly type: NotAControlType }
+  : V extends readonly unknown[] | ((...a: any[]) => any)
+    ? unknown
+    : V extends object
+      ? KnownTypes<V>
+      : unknown;
 // The verbose form a known name builds (an alias finds the member that lists it), and V held to it when it doesn't fit.
 type FormOf<O, T> = O extends { readonly type: infer N } ? (T extends N ? O & ControlOptions : never) : never;
 type FitsForm<V, T> = V extends FormOf<SchemaObject, T> ? unknown : FormOf<SchemaObject, T>;
-// A brand, not the list of names: a literal intersected with the list collapses the whole entry to `never`, and the error
-// read "not assignable to type 'never'" on every key. The brand keeps the entry and puts its text in the error.
+// A brand, not the list of names: a literal intersected with the list collapses the whole entry to `never`, and the
+// error read "not assignable to type 'never'" on every key. The brand keeps the entry and puts its text in the error.
 type NotAControlType = { readonly "names no control: see the type list in AGENTS.md": true };
 /** A schema whose every `type` names a control (`tweaks()` checks it; `{ type: "slidr" }` is an error). */
 export type KnownTypes<S> = { [K in keyof S]: CheckValue<S[K]> };
@@ -267,37 +580,53 @@ export type KnownType<V> = CheckValue<V>;
 
 /** A theme — token overrides applied over the default monochrome look. Every key is
  *  optional, so a partial theme only moves what it names; unset tokens keep their default.
- *  Keys are the `--tw-*` custom properties themselves. Apply at build via
+ *  Keys are the `--twk-*` custom properties themselves. Apply at build via
  *  `tweaks(name, schema, { theme })`, or live via `panel.setTheme(theme)`. The kit's whole
  *  appearance runs on these custom properties — this is the public theming surface. */
 export interface Theme {
   /** Brand accent — slider fills, focus rings, active highlights (default: neutral, no accent). */
-  "--tw-accent"?: string;
-  /** Text drawn on the accent (active segment / radio label); the primary text tone unless set, so set it with a light accent. */
-  "--tw-on-accent"?: string;
+  "--twk-accent"?: string;
+  /** Text drawn on the accent (active segment / radio label); the primary text tone unless set, so set it with a light
+   * accent. */
+  "--twk-on-accent"?: string;
   /** Panel background, reused for recessed wells. */
-  "--tw-base"?: string;
+  "--twk-base"?: string;
   /** Popover / dropdown background. */
-  "--tw-dropdown-bg"?: string;
+  "--twk-dropdown-bg"?: string;
   /** Control surface and its hover / active steps. */
-  "--tw-surface"?: string; "--tw-surface-hover"?: string; "--tw-surface-active"?: string;
+  "--twk-surface"?: string;
+  "--twk-surface-hover"?: string;
+  "--twk-surface-active"?: string;
   /** Hairline border and its hover step. */
-  "--tw-border"?: string; "--tw-border-hover"?: string;
+  "--twk-border"?: string;
+  "--twk-border-hover"?: string;
   /** Text-selection highlight wash. */
-  "--tw-selection"?: string;
-  /** Text tones — panel title, section heading, primary value text, control label, and the muted / faint / focus tones. */
-  "--tw-text-root"?: string; "--tw-text-section"?: string; "--tw-text-primary"?: string; "--tw-text-label"?: string;
-  "--tw-text-secondary"?: string; "--tw-text-tertiary"?: string; "--tw-text-focus"?: string;
+  "--twk-selection"?: string;
+  /** Text tones — panel title, section heading, primary value text, control label, and the muted / faint / focus
+   * tones. */
+  "--twk-text-root"?: string;
+  "--twk-text-section"?: string;
+  "--twk-text-primary"?: string;
+  "--twk-text-label"?: string;
+  "--twk-text-secondary"?: string;
+  "--twk-text-tertiary"?: string;
+  "--twk-text-focus"?: string;
   /** Copy-confirmation accent, and the invalid-state accent (the plot's bad-expression cue). */
-  "--tw-success"?: string; "--tw-danger"?: string;
+  "--twk-success"?: string;
+  "--twk-danger"?: string;
   /** Popover shadow, the panel's container elevation, and its lifted (floating / dragging) variant. */
-  "--tw-shadow-dropdown"?: string; "--tw-shadow-panel"?: string; "--tw-shadow-panel-lifted"?: string;
+  "--twk-shadow-dropdown"?: string;
+  "--twk-shadow-panel"?: string;
+  "--twk-shadow-panel-lifted"?: string;
   /** Font stack, and the monospace stack (the plot's expression field). */
-  "--tw-font-sans"?: string; "--tw-font-mono"?: string;
+  "--twk-font-sans"?: string;
+  "--twk-font-mono"?: string;
   /** Control corner radius, row height and the panel's width (256px by default), as CSS lengths. */
-  "--tw-radius"?: string; "--tw-row-height"?: string; "--tw-width"?: string;
+  "--twk-radius"?: string;
+  "--twk-row-height"?: string;
+  "--twk-width"?: string;
   /** Any other token. */
-  [token: `--${string}`]: string | undefined;
+  [token: `--twk-${string}`]: string | undefined;
 }
 
 /** Options for a programmatic write — `set()`, `setMany()`, `fromJSON()`. */
@@ -310,12 +639,143 @@ export interface SetOptions {
 
 /** Where a floating panel starts: `x` / `y` are its insets in px (16 by default) from the
  *  viewport's top-left. The far edge keeps a gap of `y` when the height caps; CSS
- *  `--tw-float-gap` overrides it. */
-export interface FloatingPlacement { x?: number; y?: number }
+ *  `--twk-float-gap` overrides it. */
+export interface FloatingPlacement {
+  x?: number;
+  y?: number;
+}
+
+/** The words a panel shows and says, by key, for the `strings` option (each line notes the English default). A key
+ *  with a `{placeholder}` takes a string that uses it, or a function given the values, for a language whose plurals
+ *  need more than one form. Units (px, ms, %), axis letters and color notations stay as they are. */
+export type Word<V = never> = [V] extends [never] ? string : string | ((v: V) => string);
+export interface Strings {
+  // The panel and its toolbar
+  /** "Tweaks" — the panel's landmark name when its own is blank */ panel?: string;
+  /** "Presets" — the toolbar button */ presets?: string;
+  /** "Copy values (⇧: changed only)" — the toolbar button */ copy?: string;
+  /** "Reset" — the toolbar button */ reset?: string;
+  /** "Double-click or hold to reset" — a row label's tooltip */ resetHint?: string;
+  /** "Values copied" */ copied?: string;
+  /** "{n} changed values copied" — 1 changed value copied for one */ copiedChanged?: Word<{ n: number }>;
+  /** "Nothing has changed" */ nothingChanged?: string;
+  /** "Copy failed" */ copyFailed?: string;
+  /** "{label} copied" — ⌘C on a row */ rowCopied?: Word<{ label: string }>;
+  /** "Not saved" — a value storage refused */ notSaved?: string;
+  /** "{n} values pasted" — 1 value pasted for one */ pasted?: Word<{ n: number }>;
+  /** "Nothing to paste" */ nothingToPaste?: string;
+  /** "Couldn't read the clipboard" */ clipboardUnread?: string;
+  // The presets menu
+  /** "Preset name…" — the field's placeholder */ presetName?: string;
+  /** "New preset name" — the field's label */ newPreset?: string;
+  /** "Save" */ save?: string;
+  /** "No presets yet" */ noPresets?: string;
+  /** "Loaded preset {name}" */ presetLoaded?: Word<{ name: string }>;
+  /** "Saved preset {name}" */ presetSaved?: Word<{ name: string }>;
+  /** "Preset {name} not saved: storage is full" */ presetFull?: Word<{ name: string }>;
+  /** "Delete preset {name}" — a row's delete button */ presetDelete?: Word<{ name: string }>;
+  // Controls
+  /** "Off" — a checkbox */ off?: string;
+  /** "On" — a checkbox */ on?: string;
+  /** "Button" — a group button with no label */ button?: string;
+  /** "Tab" — a tab page whose title is blank */ tab?: string;
+  /** "Folder" — a markup folder with no data-label */ folder?: string;
+  /** "Drag to adjust" — a number field's grip */ dragToAdjust?: string;
+  /** "{label} minimum" */ intervalMin?: Word<{ label: string }>;
+  /** "{label} maximum" */ intervalMax?: Word<{ label: string }>;
+  /** "Monitor" — a monitor with no label */ monitor?: string;
+  /** "FPS" — an fpsgraph with no label */ fps?: string;
+  /** "Plot" — a plot with no label */ plot?: string;
+  /** "{label} — expression in x" — a plot's field */ expression?: Word<{ label: string }>;
+  /** "Point" — a point with no label */ point?: string;
+  /** "{label} pad: {x} and {y}" */ pointPad?: Word<{ label: string; x: string | number; y: string | number }>;
+  /** "Control point {n}" — a cubic bézier handle */ controlPoint?: Word<{ n: number }>;
+  /** "Control point {n}, x {x}, y {y}" */ controlPointAt?: Word<{ n: number; x: string | number; y: string | number }>;
+  // Color
+  /** "Color" — a color row with no label, and the shadow's color row */ color?: string;
+  /** "Color plane: chroma across, lightness up" */ colorPlane?: string;
+  /** "Color mode" */ colorMode?: string;
+  /** "Hex color" */ hex?: string;
+  /** "Hue" */ hue?: string;
+  /** "Alpha" */ alpha?: string;
+  /** "lightness {l}%, chroma {c}" — the color plane's description, said after a run of keys */ colorReadout?: Word<{
+    l: number;
+    c: number;
+  }>;
+  /** "wide" — the gamut badge past P3 (sRGB and P3 are names) */ wide?: string;
+  // Gradient
+  /** "Gradient" — a gradient with no label */ gradient?: string;
+  /** "{n} stops" — 1 stop for one */ stops?: Word<{ n: number }>;
+  /** "Add a stop after the selected one" — the add button's tooltip */ addStop?: string;
+  /** "Add a color stop after the selected one" — the add button's label */ addStopAria?: string;
+  /** "Color stop at {pos}%" */ stopAt?: Word<{ pos: number }>;
+  /** "Color stop at {pos}%, selected" */ stopAtSelected?: Word<{ pos: number }>;
+  /** "Easing between stops" — the easing menu's label */ stopEasing?: string;
+  /** "How the ramp blends between stops" — its tooltip */ stopEasingHint?: string;
+  /** "Linear" */ easeLinear?: string;
+  /** "Ease" */ ease?: string;
+  /** "Ease in" */ easeIn?: string;
+  /** "Ease out" */ easeOut?: string;
+  /** "Ease in-out" */ easeInOut?: string;
+  /** "Custom" — an easing the menu doesn't list */ custom?: string;
+  // Image
+  /** "Upload image" — the gallery's upload button */ upload?: string;
+  /** "{label}: upload an image" */ uploadImage?: Word<{ label: string }>;
+  /** "{label}: choose an image" */ chooseImage?: Word<{ label: string }>;
+  /** "Clear" */ clear?: string;
+  /** "{label}: clear the image" */ clearImage?: Word<{ label: string }>;
+  /** "Replace" */ replace?: string;
+  /** "Drop or choose" */ dropOrChoose?: string;
+  /** "None" — no image chosen */ none?: string;
+  /** "Image {n}" — a gallery option with no label */ imageN?: Word<{ n: number }>;
+  /** "Uploaded image" */ uploadedImage?: string;
+  /** "Custom image" — a value off the gallery's list */ customImage?: string;
+  /** "Not an image" */ notAnImage?: string;
+  /** "Couldn't read the file" */ unreadable?: string;
+  /** "{size}, max {max}" — a file over maxSize */ tooLarge?: Word<{ size: string; max: string }>;
+  // Motion and spring
+  /** "Motion" — a motion row with no label */ motion?: string;
+  /** "Motion type" */ motionType?: string;
+  /** "Type" — the motion pane's row label beside that switch */ type?: string;
+  /** "Easing" */ easing?: string;
+  /** "Spring" */ spring?: string;
+  /** "Duration" */ duration?: string;
+  /** "Replay the motion" */ replay?: string;
+  /** "Easing · {ms} ms" */ easingSummary?: Word<{ ms: number }>;
+  /** "Spring · {ms} ms" */ springSummary?: Word<{ ms: number }>;
+  /** "Spring mode" */ springMode?: string;
+  /** "Mode" */ mode?: string;
+  /** "Time" */ time?: string;
+  /** "Physics" */ physics?: string;
+  /** "Stiffness" */ stiffness?: string;
+  /** "Damping" */ damping?: string;
+  /** "Mass" */ mass?: string;
+  /** "Bounce" */ bounce?: string;
+  // Shadow
+  /** "Shadow" — a shadow with no label */ shadow?: string;
+  /** "Shadow position" */ shadowPosition?: string;
+  /** "in" — an inset shadow's summary, before its numbers */ inset?: string;
+  /** "Position" */ position?: string;
+  /** "Outer" */ outer?: string;
+  /** "Inner" */ inner?: string;
+  /** "Blur" */ blur?: string;
+  /** "Spread" */ spread?: string;
+  // Sides and corners
+  /** "Top" */ top?: string;
+  /** "Right" */ right?: string;
+  /** "Bottom" */ bottom?: string;
+  /** "Left" */ left?: string;
+  /** "Top-left" */ topLeft?: string;
+  /** "Top-right" */ topRight?: string;
+  /** "Bottom-right" */ bottomRight?: string;
+  /** "Bottom-left" */ bottomLeft?: string;
+  /** "Independent sides" */ splitSides?: string;
+  /** "Independent corners" */ splitCorners?: string;
+}
 
 /** Panel options (third arg to `tweaks()`). */
 export interface TweaksOptions {
-  /** Theme overrides as `--tw-*` tokens; `null` / omitted = default monochrome. */
+  /** Theme overrides as `--twk-*` tokens; `null` / omitted = default monochrome. */
   theme?: Theme | null;
   /** Persist values to localStorage + enable presets — a key, or `true` to key by name. Uploaded images go to
    *  IndexedDB under the same key, and come back by `ready`. */
@@ -335,6 +795,19 @@ export interface TweaksOptions {
   undo?: boolean;
   /** Custom reset handler (e.g. restore real app defaults + rebuild). */
   onReset?: () => void;
+  /** Mount the panel in a shadow root, so page CSS can't restyle it (`#app button { … }`, a `.prose` wrapper). `el` is
+   *  then its host, a `<twk-host>`: theme it with `--twk-*` on the host itself (`.twk-host { … }`), or with `theme`.
+   *  The styles come from the page's `tweakit/css` when that's loaded, else from `href` (by default `tweaks.css` beside
+   *  the module). */
+  shadow?: boolean | { href?: string };
+  /** The words the panel and its controls show and say, over the English defaults: translate them, or rename the chrome
+   *  (`{ presets: "Looks" }`). A key left out keeps its default. */
+  strings?: Strings;
+}
+
+/** Options for `enhance()`: the words its markup controls show and say. */
+export interface EnhanceOptions {
+  strings?: Strings;
 }
 
 /** The live values bag, loosely typed — `params[key]` for each control. A schema literal passed
@@ -342,11 +815,22 @@ export interface TweaksOptions {
 export type Params = Record<string, any>;
 /** The keys `set()` and `setMany()` take: a typed panel's controls by dotted path (`size`, `card.size`), so a typo is a
  *  compile error; any string for a panel built from a plain `Schema`. An object-valued control's own fields read as
- *  paths too (`drop.blur`): the types can't tell its value from a folder, so they allow what the runtime refuses. Past ten
- *  folders deep the rest of a path is any string, since spelling every one out overran tsc's depth limit. */
+ *  paths too (`drop.blur`): the types can't tell its value from a folder, so they allow what the runtime refuses. Past
+ *  ten folders deep the rest of a path is any string, since spelling every one out overran tsc's depth limit. */
 export type PanelPath<P> = PathsOf<P, []>;
-type PathsOf<P, D extends unknown[]> = string extends keyof P ? string : D["length"] extends 10 ? string
-  : { [K in keyof P & string]: K | (P[K] extends readonly unknown[] ? never : P[K] extends object ? `${K}.${PathsOf<P[K], [...D, 0]>}` : never) }[keyof P & string];
+type PathsOf<P, D extends unknown[]> = string extends keyof P
+  ? string
+  : D["length"] extends 10
+    ? string
+    : {
+        [K in keyof P & string]:
+          | K
+          | (P[K] extends readonly unknown[]
+              ? never
+              : P[K] extends object
+                ? `${K}.${PathsOf<P[K], [...D, 0]>}`
+                : never);
+      }[keyof P & string];
 
 /** The whole-panel state `toJSON()` returns / `fromJSON()` accepts: every control value
  *  (nested to mirror folders/tabs) plus UI state — which folders are collapsed and which
@@ -373,14 +857,15 @@ export interface PanelState {
 /** The panel object `tweaks()` returns; `P` is its values' shape. A bare `Panel` takes any panel, typed or not (its
  *  default is `any`, not `Params`: `set()`'s typed paths would make a typed panel unassignable to `Panel<Params>`). */
 export interface Panel<P = any> {
-  /** The panel root element — append it to the DOM. */
+  /** The panel root element — append it to the DOM. With `shadow`, the host the panel lives in. */
   el: HTMLElement;
   /** Live values, updated in place as controls change. */
   params: P;
   /** Resolves once any lazily-loaded controls have hydrated and, for a panel that persists an image control, its
    *  stored images have loaded (resolves immediately when there's neither). */
   ready: Promise<Panel<P>>;
-  /** Subscribe to changes; `last` is the changed control's dotted path (`size`, `card.size`), as `set()` and `changes()`
+  /** Subscribe to changes; `last` is the changed control's dotted path (`size`, `card.size`), as `set()` and
+   * `changes()`
    *  name it, or undefined when many changed at once (a restore, `reset()`, `fromJSON`, `setMany`). */
   on(fn: (params: P, last?: string) => void): () => void;
   /** Set a control's value programmatically. Nested controls take a dotted path
@@ -418,7 +903,8 @@ export interface Panel<P = any> {
    *  with stays its storage key (`persist: true`), so saved values and presets keep their
    *  home across a rename. */
   setName(name: string): void;
-  /** Save the current values as a named preset (needs `opts.persist`). False when there is nowhere to save it, or storage refused it. */
+  /** Save the current values as a named preset (needs `opts.persist`). False when there is nowhere to save it, or
+   * storage refused it. */
   savePreset(name: string): boolean;
   /** Load a named preset. */
   loadPreset(name: string): boolean;
@@ -429,7 +915,8 @@ export interface Panel<P = any> {
   /** Undo / redo (need `opts.undo`). */
   undo(): void;
   redo(): void;
-  /** Tear the panel down — remove it from the DOM, release every global listener, close any open popover; the API goes inert. */
+  /** Tear the panel down — remove it from the DOM, release every global listener, close any open popover; the API goes
+   * inert. */
   destroy(): void;
 }
 
@@ -458,13 +945,18 @@ export interface MountOptions {
   label?: string;
   /** Fired with the new value whenever the control changes — by hand or through `set()`. */
   onChange?: (value: unknown, key: string) => void;
+  /** Mount it in a shadow root, as `tweaks()`'s `shadow` does a panel; `el` is then the host. */
+  shadow?: boolean | { href?: string };
+  /** Its words, as `tweaks()`'s `strings`. */
+  strings?: Strings;
 }
 
 /** The handle `mountControl()` returns. */
 export interface MountedControl {
-  /** The wrapper (`.tw-control`) the control lives in, already appended to the host and
+  /** The wrapper (`.twk-control`) the control lives in, already appended to the host and
    *  stable from creation — it carries the kit's tokens, so the control renders outside a
-   *  panel. On the code-split build a lazily-loaded control fills it in once `ready` resolves. */
+   *  panel. On the code-split build a lazily-loaded control fills it in once `ready` resolves. With `shadow`, the host
+   *  the wrapper lives in. */
   el: HTMLElement;
   /** Apply a value — the control updates AND `onChange` fires (when the value actually
    *  changed). Before `ready`, the value is queued and applied once the control builds. */
@@ -490,14 +982,18 @@ export interface ColorPickerOptions {
   mode?: ColorMode;
   /** Fired with the new color string whenever it changes — by hand or through `set()`. */
   onChange?: (value: string) => void;
+  /** Build it in a shadow root, as `tweaks()`'s `shadow` does a panel; `el` is then the host. */
+  shadow?: boolean | { href?: string };
+  /** Its words, as `tweaks()`'s `strings`. */
+  strings?: Strings;
 }
 
 /** The handle `createColorPicker()` returns. Bring your own trigger: append `el` to a popover
  *  or a panel of your own; the kit owns the editor surface and the gamut math. */
 export interface ColorPicker {
-  /** The picker's root (`.tw-color-picker`), stable from creation; it carries the kit's tokens,
+  /** The picker's root (`.twk-color-picker`), stable from creation; it carries the kit's tokens,
    *  so the picker renders anywhere. On the code-split build the editor fills it in once the
-   *  color chunk has loaded. */
+   *  color chunk has loaded. With `shadow`, the host the root lives in. */
   el: HTMLElement;
   /** Apply a color — the picker updates AND `onChange` fires (when the color actually changed). */
   set(value: string): void;
@@ -516,11 +1012,16 @@ export interface ColorPicker {
   ready: Promise<ColorPicker>;
 }
 
-/** `detail` of the `tw:change` event a `[data-tw]` host dispatches (bubbling) whenever its
+/** `detail` of the `twk:change` event a `[data-twk]` host dispatches (bubbling) whenever its
  *  control changes — `key` is the host's `data-key` (or its label), `value` the new value,
  *  also written to the host's `data-value`. */
-export interface TwChangeDetail { key: string; value: unknown; }
+export interface TwChangeDetail {
+  key: string;
+  value: unknown;
+}
 
 declare global {
-  interface HTMLElementEventMap { "tw:change": CustomEvent<TwChangeDetail>; }
+  interface HTMLElementEventMap {
+    "twk:change": CustomEvent<TwChangeDetail>;
+  }
 }