efficient-easel 11.3.0 → 11.8.0

package/dist/screen/screen.css

@@ -202,7 +202,7 @@
   background: var(--sf-app-bg);
   color: var(--sf-text);
   font-family: var(--sf-font);
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -261,7 +261,7 @@
      quietly deciding the padding of a dialog AND a different editor's strip is
      the coupling that made this a question at all. Whether this strip should go
      flat too is its own decision, on its own card. */
-  padding: 8px 10px;
+  padding: var(--space-8, 8px) var(--space-12, 12px);
 }
 
 /* The save pill (dot, ring, words, the autosave switch around it) is
@@ -292,7 +292,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 13px 14px 11px;
+  padding: var(--space-16, 16px) var(--space-16, 16px) var(--space-12, 12px);
   flex: none;
 }
 
@@ -303,7 +303,7 @@
    `0.83em 0` on an h2 and would push the whole head open. The `--btn` variant
    below re-states its own margin and wins by source order. */
 .sf-panel-title {
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   font-weight: 600;
   color: var(--sf-text);
   margin: 0;
@@ -321,8 +321,8 @@
   font-family: inherit;
   cursor: pointer;
   text-align: left;
-  padding: 5px 8px;
-  margin: -5px -8px;
+  padding: var(--space-8, 8px);
+  margin: calc(-1 * var(--space-8, 8px));
   border-radius: var(--sf-row-radius);
   transition: background 0.12s;
 }
@@ -358,7 +358,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   flex: none;
   /* NO GROUND AND NO RULE. Every row carries a glyph now, so a filled tile on
      each one is 40 tiles down a page — the chip was a way of picking the icon
@@ -375,7 +375,7 @@
      way of saying the indent already says. 12px/500 is `.es-group-head`'s size
      at a row's weight, so the tree and the inspector's headings agree on how big
      a name in this editor is. */
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   font-weight: 500;
   color: var(--sf-text);
   white-space: nowrap;
@@ -404,13 +404,13 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 6px 9px;
+  padding: var(--space-8, 8px) var(--space-12, 12px);
   border: none;
   background: transparent;
   border-radius: var(--radius-lg);
   cursor: pointer;
   color: var(--sf-accent);
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   font-weight: 500;
 }
 
@@ -432,7 +432,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   flex: none;
   background: var(--sf-accent-tint);
 }
@@ -442,7 +442,7 @@
    that opens it is the add card (`.sf-add-card`, the trigger's own look). What
    stays is a heading's count, quieter than its word. */
 .sf-menugroup-count {
-  font-size: 11px;
+  font-size: var(--text-2xs, 11px);
   color: var(--sf-field-placeholder);
 }
 
@@ -457,7 +457,7 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 14px 16px;
+  padding: 0 var(--space-16, 16px) var(--space-16, 16px);
 }
 
 /* ── Footer "Add block" menu — heterogeneous block-type picker ──────────── */
@@ -665,7 +665,7 @@
 
 .sf-msg {
   padding: 24px;
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   color: var(--sf-icon);
 }
 
@@ -737,10 +737,10 @@
    a full-width strip, so it keeps its own rule. */
 .sf-device-scope {
   margin: 8px 0 2px;
-  padding: 7px 10px;
+  padding: var(--space-8, 8px) var(--space-12, 12px);
   border-radius: var(--radius-md);
   background: var(--sf-chip-bg);
-  font-size: 11.5px;
+  font-size: var(--text-xs, 12px);
   line-height: 1.35;
   color: var(--sf-muted);
 }

package/dist/screen/words.js

@@ -1 +1 @@
-export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_SAVE_STATUS_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-VWXUMVCD.js";
+export{DEFAULT_SCREEN_ADD_WORDS,DEFAULT_SCREEN_SAVE_STATUS_WORDS,DEFAULT_SCREEN_WORDS}from"../chunk-VVPZMWJE.js";

package/dist/shell/shell.css

@@ -137,14 +137,16 @@
   --es-panel-gap: 12px;
 
   /* — spacing: ONE scale for every panel (owner ruling, 2026-10-02) —
-     Six steps and no seventh. Every margin, padding and gap in this package
-     is one of them; `tests/spacing-scale.test.ts` holds every sheet to it. */
-  --es-space-2: 2px;
-  --es-space-4: 4px;
-  --es-space-8: 8px;
-  --es-space-12: 12px;
-  --es-space-16: 16px;
-  --es-space-32: 32px;
+     The scale itself is the shell's (efficient-shell `--space-*`, 2/4/8/12/16/
+     20/24/32/40/48, owner ruling 2026-10-12); these six names read it. Every
+     margin, padding and gap in this package is a step of it;
+     `tests/spacing-scale.test.ts` holds every sheet to it. */
+  --es-space-2: var(--space-2, 2px);
+  --es-space-4: var(--space-4, 4px);
+  --es-space-8: var(--space-8, 8px);
+  --es-space-12: var(--space-12, 12px);
+  --es-space-16: var(--space-16, 16px);
+  --es-space-32: var(--space-32, 32px);
 
   /* — shadows: black at an alpha (no shell elevation token yet) — */
   --es-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);

package/dist/strings/catalogue.d.ts

@@ -1,6 +1,6 @@
 import { S as SaveWords } from '../words-pgIK0I6g.js';
 import { N as NoticeWords, C as ChromeWords } from '../words-BpiVrsW5.js';
-import { C as CopyWords } from '../words-dsex49Jh.js';
+import { C as CopyWords } from '../words-CiuKuiy0.js';
 import { D as DragWords } from '../words-BDignMl_.js';
 import { LockWords } from '../edit-lock/index.js';
 import { F as FieldsWords } from '../words-vhnV8sM7.js';
@@ -18,7 +18,7 @@ import '../wordFit-7XpmhcaW.js';
 import 'react';
 import '../panelWidths-D9hTLR25.js';
 import '../engine-CvXpFE86.js';
-import '../markup/index.js';
+import 'efficient-shell/markup';
 import '../buckets-Tj-nkBpg.js';
 
 /**

package/dist/strings/catalogue.js

@@ -1 +1 @@
-export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-FAAZZXIS.js";import"../chunk-OGH6CC3E.js";import"../chunk-ZAOM6PFH.js";import"../chunk-6WY6ZXJG.js";import"../chunk-VWXUMVCD.js";import"../chunk-TBY3DFKS.js";import"../chunk-K56YDHYQ.js";import"../chunk-KFV7N2DJ.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-Z6PVRXVY.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-Q6AM43CA.js";import"../chunk-FFYXVAAL.js";import"../chunk-546BBOPE.js";import"../chunk-GG4FGBFR.js";
+export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-A6PY6C3C.js";import"../chunk-OGH6CC3E.js";import"../chunk-643PVCEG.js";import"../chunk-6WY6ZXJG.js";import"../chunk-VVPZMWJE.js";import"../chunk-TBY3DFKS.js";import"../chunk-K56YDHYQ.js";import"../chunk-KFV7N2DJ.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-33C6ALT5.js";import"../chunk-WRFD4EXD.js";import"../chunk-Z6PVRXVY.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-AYWN5NRH.js";

package/dist/strings/index.d.ts

@@ -3,7 +3,7 @@ export { CanvasWords, DEFAULT_EASEL_STRINGS, RailWords, mergeEaselStrings } from
 import * as react from 'react';
 import { ReactNode } from 'react';
 export { C as ChromeWords, N as NoticeWords } from '../words-BpiVrsW5.js';
-export { C as CopyWords } from '../words-dsex49Jh.js';
+export { C as CopyWords } from '../words-CiuKuiy0.js';
 export { D as DragWords } from '../words-BDignMl_.js';
 export { F as FieldsWords } from '../words-vhnV8sM7.js';
 export { LockWords } from '../edit-lock/index.js';
@@ -15,7 +15,7 @@ export { ScreenAddWords, ScreenWords } from '../screen/words.js';
 export { S as StyleClipboardWords } from '../words-CnnHb9jo.js';
 export { T as TextStylesWords } from '../words-gIDCeRv3.js';
 export { T as TreeWords } from '../words-Cl9xMUYY.js';
-import '../markup/index.js';
+import 'efficient-shell/markup';
 import '../buckets-Tj-nkBpg.js';
 import '../types-DGyDHiJV.js';
 import '../types-CsgMwHHa.js';

package/dist/strings/index.js

@@ -1,2 +1,2 @@
-import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-FAAZZXIS.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-FAAZZXIS.js";import"../chunk-OGH6CC3E.js";import"../chunk-ZAOM6PFH.js";import"../chunk-6WY6ZXJG.js";import"../chunk-VWXUMVCD.js";import"../chunk-TBY3DFKS.js";import"../chunk-K56YDHYQ.js";import"../chunk-KFV7N2DJ.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-Z6PVRXVY.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-Q6AM43CA.js";import"../chunk-FFYXVAAL.js";import"../chunk-546BBOPE.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-GG4FGBFR.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
+import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-A6PY6C3C.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-A6PY6C3C.js";import"../chunk-OGH6CC3E.js";import"../chunk-643PVCEG.js";import"../chunk-6WY6ZXJG.js";import"../chunk-VVPZMWJE.js";import"../chunk-TBY3DFKS.js";import"../chunk-K56YDHYQ.js";import"../chunk-KFV7N2DJ.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-33C6ALT5.js";import"../chunk-WRFD4EXD.js";import"../chunk-Z6PVRXVY.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-AYWN5NRH.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
 return i(e.Provider,{value:k,children:m})}function u(){return t(o())?.strings??r}function m(){return t(o())?.locale??"en"}export{s as EaselStringsProvider,m as useEaselLocale,u as useEaselStrings};

package/dist/text-styles/index.d.ts

@@ -1,235 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as TextStylesWords } from '../words-gIDCeRv3.js';
-export { D as DEFAULT_TEXT_STYLES_WORDS } from '../words-gIDCeRv3.js';
-
-/**
- * The text styles as data (plan step E6): what a style is, the list both
- * editors start from, the design's ranges, and the pure changes the list
- * makes. No React and no browser global, so P3 and S2 can use it where they
- * read and write their own storage.
- *
- * What this does NOT know is where a host keeps its styles, or what its old
- * values were called. Turning an email's "Label" into Body 5, or the website's
- * "Tight" into 95 % / −0.01 em, is the host's (P3, S2). The units here are the
- * panel's: px, and % for line spacing.
- */
-
-type TextStyleKind = 'heading' | 'body';
-/** As typed · Uppercase · Lowercase. No value = Auto where the host offers it, As typed where not. */
-type TextStyleCase = 'none' | 'upper' | 'capitalize' | 'lower';
-/**
- * One style's own settings. A missing key has nothing of its own: it is Auto
- * where the host offers Auto for that setting, and otherwise shows the host's
- * `fallback`, grey.
- */
-interface TextStyleValues {
-    /** A font's `value`, from the host's list. */
-    font?: string;
-    /** A theme colour's `key`, or a `#rrggbb`. */
-    color?: string;
-    /** px. */
-    size?: number;
-    /** 100–900. */
-    weight?: number;
-    italic?: boolean;
-    /** % of the font size; below 100 is tighter than the type. */
-    lineSpacing?: number;
-    /** px; may be negative. */
-    letterSpacing?: number;
-    /** px. */
-    paragraphSpacing?: number;
-    letterCase?: TextStyleCase;
-    /** px; headings only — the largest a heading is drawn anywhere on the site. */
-    largestSize?: number;
-}
-interface TextStyle {
-    /** The host's, stable: the list never renames an id. */
-    id: string;
-    kind: TextStyleKind;
-    /** Stored, so the host's words: "Heading 1", "Body 5". */
-    name: string;
-    values: TextStyleValues;
-}
-/** A font the host offers. */
-interface TextStyleFont {
-    value: string;
-    label: string;
-    /** The CSS `font-family` the list draws the name and the preview in. */
-    family: string;
-    /** `false` when this font has no italic loaded: the Italic button is off. */
-    italic?: boolean;
-}
-/** A theme colour the host offers, stored by its key. */
-interface TextStyleColour {
-    key: string;
-    name: string;
-    /** `#rrggbb`. */
-    value: string;
-}
-/** Every setting an open style can show, in the order it shows them. */
-declare const TEXT_STYLE_SETTINGS: readonly ["font", "color", "size", "weight", "emphasis", "lineSpacing", "letterSpacing", "paragraphSpacing", "letterCase", "largestSize"];
-type TextStyleSetting = (typeof TEXT_STYLE_SETTINGS)[number];
-/** The settings an Email styles list shows — the campaign design page. */
-declare const CAMPAIGN_TEXT_STYLE_SETTINGS: readonly TextStyleSetting[];
-/** The settings that may be Auto, when the host says so (Site styles). */
-type TextStyleAuto = 'size' | 'lineSpacing' | 'letterSpacing' | 'letterCase';
-/** The kinds, in the order the list draws them. */
-declare const TEXT_STYLE_KINDS: readonly TextStyleKind[];
-/** At most this many of EACH kind (Lewis, 2026-10-02). */
-declare const TEXT_STYLE_MAX = 7;
-/** How many of each the list starts with: Heading 1–3, Body 1–5. */
-declare const TEXT_STYLE_DEFAULT_COUNT: Readonly<Record<TextStyleKind, number>>;
-/** A number setting's slider: its travel, the typed limits, the steps and the unit. */
-interface TextStyleRange {
-    /** The lowest a typed value may be; `undefined` = no limit. */
-    min: number | undefined;
-    /** The highest a typed value may be; `undefined` = no limit. */
-    max: number | undefined;
-    sliderMin: number;
-    sliderMax: number;
-    step: number;
-    shiftStep: number;
-    unit: string;
-}
-/**
- * The design's numbers (campaign page, "the three boxes' rules" and the slider
- * ranges; website page §5). A typed value may go past the slider; only `min`
- * and `max` hold it. Line spacing down to 50 % and letter spacing down to
- * −10 px are Lewis's (2026-10-06).
- */
-declare const TEXT_STYLE_RANGES: {
-    readonly size: TextStyleRange;
-    readonly weight: {
-        readonly min: 100;
-        readonly max: 900;
-        readonly sliderMin: 300;
-        readonly sliderMax: 900;
-        readonly step: 100;
-        readonly shiftStep: 100;
-        readonly unit: "";
-    };
-    readonly lineSpacing: {
-        readonly min: 50;
-        readonly max: 250;
-        readonly sliderMin: 50;
-        readonly sliderMax: 250;
-        readonly step: 1;
-        readonly shiftStep: 10;
-        readonly unit: "%";
-    };
-    readonly letterSpacing: {
-        readonly min: -10;
-        readonly max: undefined;
-        readonly sliderMin: -5;
-        readonly sliderMax: 10;
-        readonly step: 0.1;
-        readonly shiftStep: 1;
-        readonly unit: "px";
-    };
-    readonly paragraphSpacing: {
-        readonly min: 0;
-        readonly max: undefined;
-        readonly sliderMin: 0;
-        readonly sliderMax: 48;
-        readonly step: 1;
-        readonly shiftStep: 10;
-        readonly unit: "px";
-    };
-    readonly largestSize: TextStyleRange;
-};
-type TextStyleNumber = keyof typeof TEXT_STYLE_RANGES;
-/** Heading 1–3 then Body 1–5, ids `heading-1` … `body-5`, no values: the host fills them. */
-declare function defaultTextStyles(name?: (v: {
-    kind: TextStyleKind;
-    n: number;
-}) => string): TextStyle[];
-/** Whether another style of this kind fits under the cap. */
-declare function canAddTextStyle(styles: readonly TextStyle[], kind: TextStyleKind, max?: number): boolean;
-/**
- * Whether a style is one the list starts with (Heading 1–3, Body 1–5), which
- * can never be deleted. Decided by the fixed id (`heading-1` … `body-5`),
- * never by the name: a host's words name the styles.
- */
-declare function isDefaultTextStyle(style: TextStyle): boolean;
-/**
- * A new style of `kind`, after the last one of that kind: a copy of that
- * one's values, named the next free number ("Heading 4"). `null` at the cap.
- * The list given is not changed.
- *
- * The name and the id are chosen apart. The name is the next number after
- * the styles of its kind, skipping a name already taken, so after a delete
- * the names have no gap. The id is above every id of its kind
- * (`heading-7` when `heading-6` is there), and the name's number when that
- * is higher. So an id freed by a delete is used again only when it was the
- * highest of its kind, and then the new style is a copy of the one that
- * id's text was already drawn as (`resolveTextStyle`): nothing on the page
- * jumps.
- *
- * `make` lets a host build the new style itself (its own ids); it gets the
- * kind and the number the new style is called.
- */
-declare function addTextStyle(styles: readonly TextStyle[], kind: TextStyleKind, options?: {
-    max?: number;
-    name?: (v: {
-        kind: TextStyleKind;
-        n: number;
-    }) => string;
-    make?: (kind: TextStyleKind, n: number) => TextStyle;
-}): {
-    styles: TextStyle[];
-    added: TextStyle;
-} | null;
-/**
- * The list without one ADDED style. `null` for a default (they are never
- * deleted) or an id not in the list. The list given is not changed.
- *
- * The styles of its kind after it close the gap by NAME — "Heading 5" becomes
- * "Heading 4" — when their name is still the number of their place. Their
- * ids never change, so text on them stays on them. Text on the deleted one
- * is not rewritten: `resolveTextStyle` draws it as the nearest earlier style
- * of its kind.
- *
- * `name` is the host's words for a style's name, as `addTextStyle` takes it.
- */
-declare function removeTextStyle(styles: readonly TextStyle[], id: string, options?: {
-    name?: (v: {
-        kind: TextStyleKind;
-        n: number;
-    }) => string;
-}): {
-    styles: TextStyle[];
-    removed: TextStyle;
-} | null;
-/**
- * The style text on `id` draws as: that style, or — when it was deleted —
- * the nearest EARLIER style of its kind still in the list (`heading-5` gone:
- * Heading 4's id, else `heading-3`). The defaults are never deleted, so an
- * id the model made always finds one. `undefined` for an id the model did
- * not make (a host's own, through `make`): that host resolves its own.
- *
- * Read every stored style id through this, so a deleted style's text keeps
- * drawing — in a saved page and in a sent email alike — and nothing stored
- * is rewritten.
- */
-declare function resolveTextStyle(styles: readonly TextStyle[], id: string): TextStyle | undefined;
-/**
- * The list with one style's values changed. A key given as `undefined` is
- * removed: the setting has nothing of its own again. Nothing is changed in
- * place, and the other styles are the same objects.
- */
-declare function updateTextStyle(styles: readonly TextStyle[], id: string, patch: Partial<TextStyleValues>): TextStyle[];
-/** The size a style's NAME is drawn at in the list: half its size plus 6, kept within 12–20 px. */
-declare function textStyleRowSize(px: number): number;
-/** A weight's name, by the hundred it is nearest. */
-declare function weightWord(weight: number, words: TextStylesWords): string;
-/**
- * A row's grey line, "Playfair Display · 28 px · Semibold". `autoSize`: a
- * size with no number reads the Auto word. A weight with none is Regular.
- */
-declare function describeTextStyle(values: TextStyleValues, fonts: readonly TextStyleFont[], words: TextStylesWords, options?: {
-    autoSize?: boolean;
-}): string;
+import { TextStyle, TextStyleFont, TextStyleColour, TextStyleSetting, TextStyleAuto, TextStyleValues, TextStyleKind } from './model.js';
+export { CAMPAIGN_TEXT_STYLE_SETTINGS, TEXT_STYLE_CASES, TEXT_STYLE_CASE_CSS, TEXT_STYLE_DEFAULT_COUNT, TEXT_STYLE_KINDS, TEXT_STYLE_MAX, TEXT_STYLE_RANGES, TEXT_STYLE_SETTINGS, TextStyleCase, TextStyleCaseCss, TextStyleNumber, TextStyleRange, addTextStyle, canAddTextStyle, defaultTextStyles, describeTextStyle, isDefaultTextStyle, isTextStyleCase, removeTextStyle, resolveTextStyle, textStyleCaseCss, textStyleCaseOfCss, textStyleRowSize, updateTextStyle, weightWord } from './model.js';
+export { D as DEFAULT_TEXT_STYLES_WORDS, T as TextStylesWords } from '../words-gIDCeRv3.js';
 
 interface TextStylesListProps {
     /** Headings and bodies, in the host's order; the list draws headings first. */
@@ -368,4 +141,4 @@ interface ColourSwatchRowProps {
  */
 declare function ColourSwatchRow({ value, hex, colours, label, followsWord, anyWord, onChange, readOnly }: ColourSwatchRowProps): react.JSX.Element;
 
-export { CAMPAIGN_TEXT_STYLE_SETTINGS, ColourSwatchRow, type ColourSwatchRowProps, TEXT_STYLE_DEFAULT_COUNT, TEXT_STYLE_KINDS, TEXT_STYLE_MAX, TEXT_STYLE_RANGES, TEXT_STYLE_SETTINGS, type TextStyle, type TextStyleAuto, type TextStyleCase, type TextStyleColour, type TextStyleFont, TextStyleItem, type TextStyleItemProps, type TextStyleKind, type TextStyleNumber, type TextStyleRange, type TextStyleSetting, type TextStyleValues, TextStylesGroup, type TextStylesGroupProps, TextStylesList, type TextStylesListProps, TextStylesWords, addTextStyle, canAddTextStyle, defaultTextStyles, describeTextStyle, isDefaultTextStyle, removeTextStyle, resolveTextStyle, textStyleRowSize, updateTextStyle, weightWord };
+export { ColourSwatchRow, type ColourSwatchRowProps, TextStyle, TextStyleAuto, TextStyleColour, TextStyleFont, TextStyleItem, type TextStyleItemProps, TextStyleKind, TextStyleSetting, TextStyleValues, TextStylesGroup, type TextStylesGroupProps, TextStylesList, type TextStylesListProps };

package/dist/text-styles/index.js

@@ -1,35 +1,35 @@
-import{hexReadout as e,ColourWindow as n,typedHex as t}from"../chunk-FPAVNX3Y.js";import{DEFAULT_TEXT_STYLES_WORDS as s}from"../chunk-OGH6CC3E.js";export{DEFAULT_TEXT_STYLES_WORDS}from"../chunk-OGH6CC3E.js";import"../chunk-ZAOM6PFH.js";import{FieldSlider as a}from"../chunk-XWFH2NHZ.js";import{FieldSelect as i}from"../chunk-65Z5FSAW.js";import"../chunk-FFYXVAAL.js";import{useWords as l}from"../chunk-MFIRYGHW.js";import{withTip as r}from"../chunk-P2VEMZH5.js";import{hsvToHex as o,Tooltip as d,ColorSwatch as c,IconButton as u}from"efficient-shell/ui";import{useState as m,useRef as f,useId as h,useEffect as p,Fragment as v}from"react";import{TrashIcon as g,ChevronIcon as y,BoldIcon as k,ItalicIcon as b,CaseLowerIcon as x,CaseCapitalizedIcon as w,CaseUpperIcon as S,CaseNormalIcon as N}from"efficient-shell/icons/efficient";import{jsxs as C,jsx as z,Fragment as O}from"react/jsx-runtime";var M=["font","color","size","weight","emphasis","lineSpacing","letterSpacing","paragraphSpacing","letterCase","largestSize"],$=["font","color","size","weight","lineSpacing","letterSpacing","paragraphSpacing","letterCase"],A=["heading","body"],j=7,F={heading:3,body:5},E={min:5,max:void 0,sliderMin:12,sliderMax:72,step:1,shiftStep:10,unit:"px"},W={size:E,weight:{min:100,max:900,sliderMin:300,sliderMax:900,step:100,shiftStep:100,unit:""},lineSpacing:{min:50,max:250,sliderMin:50,sliderMax:250,step:1,shiftStep:10,unit:"%"},letterSpacing:{min:-10,max:void 0,sliderMin:-5,sliderMax:10,step:.1,shiftStep:1,unit:"px"},paragraphSpacing:{min:0,max:void 0,sliderMin:0,sliderMax:48,step:1,shiftStep:10,unit:"px"},largestSize:E},H=(e,n)=>`${"heading"===e?"Heading":"Body"} ${n}`;function L(e=({kind:e,n:n})=>H(e,n)){return A.flatMap(n=>Array.from({length:F[n]},(t,s)=>({id:`${n}-${s+1}`,kind:n,name:e({kind:n,n:s+1}),values:{}})))}function B(e,n,t=j){return e.filter(e=>e.kind===n).length<t}function D(e,n){const t=new RegExp(`^${n}-([1-9]\\d*)$`).exec(e);return t?Number(t[1]):void 0}function I(e){const n=D(e.id,e.kind);return void 0!==n&&n<=F[e.kind]}function R(e,n,t={}){const{max:s=j,name:a=({kind:e,n:n})=>H(e,n),make:i}=t;if(!B(e,n,s))return null;const l=e.filter(e=>e.kind===n);let r=l.length+1;const o=new Set(e.map(e=>e.name));for(;o.has(a({kind:n,n:r}));)r+=1;const d=new Set(e.map(e=>e.id));let c=Math.max(r,...l.map(e=>(D(e.id,n)??0)+1));for(;d.has(`${n}-${c}`);)c+=1;const u=l.at(-1),m=i?i(n,r):{id:`${n}-${c}`,kind:n,name:a({kind:n,n:r}),values:{...u?.values??{}}},f=u?e.indexOf(u)+1:"heading"===n?0:e.length;return{styles:[...e.slice(0,f),m,...e.slice(f)],added:m}}function T(e,n,t={}){const{name:s=({kind:e,n:n})=>H(e,n)}=t,a=e.find(e=>e.id===n);if(!a||I(a))return null;const i=e.filter(e=>e.kind===a.kind),l=i.indexOf(a),r=/* @__PURE__ */new Map;return i.forEach((e,n)=>{n>l&&e.name===s({kind:e.kind,n:n+1})&&r.set(e,s({kind:e.kind,n:n}))}),{styles:e.filter(e=>e!==a).map(e=>r.has(e)?{...e,name:r.get(e)}:e),removed:a}}function V(e,n){const t=e.find(e=>e.id===n);if(t)return t;for(const t of A){const s=D(n,t);if(void 0===s)continue;let a;for(const n of e){const e=n.kind===t?D(n.id,t):void 0;void 0!==e&&e<s&&(!a||e>a.n)&&(a={n:e,style:n})}return a?.style}}function X(e,n,t){return e.map(e=>{if(e.id!==n)return e;const s={...e.values};for(const[e,n]of Object.entries(t))void 0===n?delete s[e]:s[e]=n;return{...e,values:s}})}function Y(e){return Math.min(20,Math.max(12,Math.round(.5*e+6)))}function Z(e,n){const t=n.weights;return[t.thin,t.extraLight,t.light,t.regular,t.medium,t.semibold,t.bold,t.extraBold,t.black][Math.min(8,Math.max(0,Math.round(e/100)-1))]}function q(e,n,t,s={}){const a=n.find(n=>n.value===e.font)?.label??e.font??"",i=void 0===e.size?s.autoSize?t.auto:"":t.px({n:e.size});return t.summary({font:a,size:i,weight:Z(e.weight??400,t)})}var G=`conic-gradient(${[0,60,120,180,240,300,0].map(e=>o({h:e,s:1,v:1})).join(", ")})`;function P({value:t,hex:s,colours:a,label:i,followsWord:l,anyWord:r,onChange:o,readOnly:u=!1}){const[v,g]=m(!1),y=f(null),k=f(null),b=h(),x=void 0!==t&&a.some(e=>e.key===t),w=void 0!==t&&!x;return p(()=>{if(!v)return;const e=y.current?.ownerDocument;if(!e)return;const n=e=>{y.current&&!y.current.contains(e.target)&&g(!1)};return e.addEventListener("click",n,!0),()=>e.removeEventListener("click",n,!0)},[v]),/* @__PURE__ */C("div",{ref:y,className:"es-ts-set","data-ts-setting":"color",children:[
-/* @__PURE__ */C("div",{className:"es-ts-top",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:i}),
-/* @__PURE__ */z("span",{className:"es-ts-colour-read",children:s?e(s):l})]}),
-/* @__PURE__ */C("div",{className:"es-ts-swatches",role:"group","aria-label":i,children:[a.map(n=>/* @__PURE__ */z(d,{content:`${n.name} · ${e(n.value)}`,children:/* @__PURE__ */z(c,{color:n.value,size:"sm",className:"es-ts-swatch","aria-label":n.name,selected:t===n.key,disabled:u,onClick:()=>o(n.key)})},n.key)),
-/* @__PURE__ */z(d,{content:r,children:/* @__PURE__ */z(c,{ref:k,color:G,size:"sm",className:"es-ts-swatch es-ts-swatch--any","aria-label":r,selected:w,"aria-expanded":v,"aria-controls":v?b:void 0,disabled:u,onClick:()=>g(e=>!e)})})]}),v?/* @__PURE__ */z(n,{id:b,value:s??"",onChange:e=>o(e),label:i,readOnly:u,onClose:()=>{g(!1),k.current?.focus()}}):null]})}function _({styles:e,onChange:n,fonts:t,colours:a=[],settings:i=$,auto:o=[],fallback:d,sample:c,openId:u,defaultOpenId:v=null,onOpenChange:y,onAdd:k,rowActions:b,onRemove:x,max:w=j,readOnly:S=!1}){const N=l("textStyles",s),M=h(),[F,E]=m(v),W=void 0!==u?u:F,H=e=>{void 0===u&&E(e),y?.(e)},L=f(null),[D,V]=m(null);p(()=>{if(!D||!L.current)return;const e=[...L.current.querySelectorAll(".es-ts-item")].find(e=>e.dataset.tsId===D.id),n=e?e.querySelector(".es-ts-row"):L.current.querySelector(`.es-ts-add[data-ts-kind="${D.kind}"]`);n?.focus(),V(null)},[D]);/* @__PURE__ */
-return z("div",{className:"es-ts",ref:L,children:A.map(s=>{const l=e.filter(e=>e.kind===s),u=!B(e,s,w),m=!S&&!u;/* @__PURE__ */
-return C(U,{label:N.groups[s],children:[l.map(s=>{const l=b?.(s),u=null!=l&&!1!==l,m=Boolean(x)&&!S&&!I(s);/* @__PURE__ */
-return z(K,{style:s,fonts:t,colours:a,settings:i,auto:o,fallback:d,sample:c,readOnly:S,open:W===s.id,onOpenChange:e=>H(e?s.id:null),onChange:t=>n(e.map(e=>e.id===t.id?t:e)),actions:m||u?/* @__PURE__ */C(O,{children:[m?r(N.remove,/* @__PURE__ */z("button",{type:"button",className:"es-ts-del","aria-label":N.removeNamed({name:s.name}),onClick:()=>(t=>{if(S||!x)return;const s=T(e,t.id,{name:N.styleName});if(!s)return;const a=e.filter(e=>e.kind===t.kind),i=a[a.indexOf(t)+1];W===t.id&&H(null),n(s.styles),x(s.removed),V({id:i?.id??null,kind:t.kind})})(s),children:/* @__PURE__ */z(g,{size:14,"aria-hidden":"true"})})):null,u?l:null]}):null},s.id)}),r(!S&&u?N.full({kind:s,max:w}):void 0,/* @__PURE__ */C("button",{type:"button",className:"es-ts-add","data-ts-kind":s,disabled:S,"aria-disabled":!(S||!u)||void 0,"aria-describedby":!S&&u?`${M}-full-${s}`:void 0,onClick:()=>{m&&(t=>{if(S)return;const s=R(e,t,{max:w,name:N.styleName,make:k});s&&n(s.styles)})(s)},children:[
-/* @__PURE__ */z("span",{className:"es-ts-add-word",children:N.add[s]}),
-/* @__PURE__ */z("span",{className:"es-ts-count",children:N.count({n:l.length,max:w})})]})),S||!u?null:/* @__PURE__ */z("span",{id:`${M}-full-${s}`,className:"es-vh",children:N.full({kind:s,max:w})})]},s)})})}function U({label:e,children:n}){const t=h();/* @__PURE__ */
-return C("section",{className:"es-ts-section","aria-labelledby":t,children:[
-/* @__PURE__ */z("div",{className:"es-ts-group",id:t,children:e}),n]})}function K({style:e,fonts:n,colours:t=[],settings:a=$,auto:i=[],fallback:r,sample:o,open:d,onOpenChange:c,onChange:u,actions:m,readOnly:f=!1}){const p=l("textStyles",s),g=`${h()}-open-${e.id}`,k=new Set(i),b=M.filter(e=>a.includes(e)),x={...r?.(e)??{},...e.values},w=n.find(e=>e.value===x.font),S={fontFamily:w?.family,fontSize:`${Y(x.size??16)}px`,fontWeight:x.weight,fontStyle:x.italic?"italic":void 0};/* @__PURE__ */
-return C(v,{children:[
-/* @__PURE__ */C("div",{className:"es-ts-item","data-ts-id":e.id,children:[
-/* @__PURE__ */C("button",{type:"button",className:"es-ts-row","aria-expanded":d,"aria-controls":d?g:void 0,onClick:()=>c(!d),children:[
-/* @__PURE__ */z("span",{className:"es-ts-chev","aria-hidden":"true",children:/* @__PURE__ */z(y,{size:12})}),
-/* @__PURE__ */z("span",{className:"es-ts-name",style:S,children:e.name}),
-/* @__PURE__ */z("span",{className:"es-ts-meta",children:q(x,n,p,{autoSize:k.has("size")&&void 0===e.values.size})})]}),m?/* @__PURE__ */z("div",{className:"es-ts-actions",children:m}):null]}),d?/* @__PURE__ */z("div",{className:"es-ts-open",id:g,children:/* @__PURE__ */z(ee,{style:e,values:x,fonts:n,colours:t,settings:b,autoSet:k,sample:o??p.sample,words:p,readOnly:f,set:n=>u(X([e],e.id,n)[0])})}):null]})}var J={none:N,upper:S,capitalize:w,lower:x},Q={none:"none",upper:"uppercase",capitalize:"capitalize",lower:"lowercase"};function ee({style:e,values:n,fonts:s,colours:i,settings:l,autoSet:o,sample:d,words:c,readOnly:m,set:f}){const h=e.values,p=s.find(e=>e.value===n.font),v=function(e,n){return e?n.find(n=>n.key===e)?.value??t(e)??void 0:void 0}(n.color,i),g=e=>"largestSize"===e||o.has(e),y=e=>g(e)?h[e]:n[e],x=y("size"),w=y("lineSpacing"),S=y("letterSpacing"),N=g("letterCase")?h.letterCase:n.letterCase,M={fontFamily:p?.family,fontSize:void 0===x?void 0:`${x}px`,fontWeight:n.weight,fontStyle:n.italic?"italic":void 0,lineHeight:void 0===w?void 0:String(w/100),letterSpacing:void 0===S?void 0:`${S}px`,color:v,textTransform:N?Q[N]:void 0},$=e=>{const t=W[e],s=g(e);/* @__PURE__ */
-return z("div",{className:"es-ts-slider","data-ts-setting":e,children:/* @__PURE__ */z(a,{label:c.settings[e],value:h[e],onChange:n=>f({[e]:n}),min:t.min,max:t.max,step:t.step,shiftStep:t.shiftStep,sliderMin:t.sliderMin,sliderMax:t.sliderMax,unit:t.unit||void 0,styleValue:s?void 0:n[e],auto:s?c.auto:void 0,readOnly:m})},e)};/* @__PURE__ */
-return C(O,{children:[
-/* @__PURE__ */z("div",{className:"es-ts-preview",style:M,"aria-label":c.preview,children:d}),l.map(t=>{switch(t){case"font":/* @__PURE__ */
-return z(ne,{value:h.font,fonts:s,words:c,readOnly:m,set:f},t);case"color":/* @__PURE__ */
-return z(te,{value:h.color,hex:v,colours:i,words:c,readOnly:m,set:f},t);case"emphasis":{const e=(n.weight??400)>=600,s=!1!==p?.italic;/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":t,children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:c.settings.emphasis}),
-/* @__PURE__ */C("div",{className:"es-ts-icons",children:[r(c.bold,/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.bold,"aria-pressed":e,disabled:m,onClick:()=>f({weight:e?400:700}),children:/* @__PURE__ */z(k,{size:16})})),m||s?r(c.italic,/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(n.italic),disabled:m,onClick:()=>f({italic:!n.italic||void 0}),children:/* @__PURE__ */z(b,{size:16})})):/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(n.italic),"aria-disabled":!0,disabledReason:c.italicMissing,children:/* @__PURE__ */z(b,{size:16})})]})]},t)}case"letterCase":/* @__PURE__ */
-return z(se,{value:h.letterCase??n.letterCase,auto:g("letterCase"),words:c,readOnly:m,set:f},t);case"largestSize":return"heading"===e.kind?$(t):null;default:return $(t)}})]})}function ne({value:e,fonts:n,words:t,readOnly:s,set:a}){const l=h();/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":"font",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",id:l,children:t.settings.font}),
-/* @__PURE__ */z(i,{value:e,options:n.map(e=>({label:e.label,value:e.value})),onChange:e=>a({font:e}),ariaLabelledBy:l,readOnly:s})]})}function te({value:e,hex:n,colours:t,words:s,readOnly:a,set:i}){/* @__PURE__ */
-return z(P,{value:e,hex:n,colours:t,label:s.settings.color,followsWord:s.colour.follows,anyWord:s.colour.any,readOnly:a,onChange:e=>i({color:e})})}function se({value:e,auto:n,words:t,readOnly:s,set:a}){const i=n?["auto","none","upper","capitalize","lower"]:["none","upper","capitalize","lower"],l=e??(n?"auto":"none"),o=f([]),d=e=>a({letterCase:"auto"===e?void 0:e});/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":"letterCase",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:t.settings.letterCase}),
-/* @__PURE__ */z("div",{className:"es-ts-icons",role:"radiogroup","aria-label":t.settings.letterCase,onKeyDown:e=>{const n="ArrowRight"===e.key||"ArrowDown"===e.key?1:"ArrowLeft"===e.key||"ArrowUp"===e.key?-1:0;if(!n||s)return;e.preventDefault();const t=(i.indexOf(l)+n+i.length)%i.length;d(i[t]),o.current[t]?.focus()},children:i.map((e,n)=>{const a=e===l;if("auto"===e)return r(t.case.autoTitle,/* @__PURE__ */z(u,{ref:e=>{o.current[n]=e},role:"radio",pressed:a,className:"es-ts-icon es-ts-icon--word","aria-checked":a,"aria-label":t.case.auto,tabIndex:a?0:-1,disabled:s,onClick:()=>d(e),children:t.case.auto},e));const i=J[e];return r(t.case[e],/* @__PURE__ */z(u,{ref:e=>{o.current[n]=e},role:"radio",pressed:a,className:"es-ts-icon","aria-checked":a,"aria-label":t.case[e],tabIndex:a?0:-1,disabled:s,onClick:()=>d(e),children:/* @__PURE__ */z(i,{size:16})},e))})})]})}export{$ as CAMPAIGN_TEXT_STYLE_SETTINGS,P as ColourSwatchRow,F as TEXT_STYLE_DEFAULT_COUNT,A as TEXT_STYLE_KINDS,j as TEXT_STYLE_MAX,W as TEXT_STYLE_RANGES,M as TEXT_STYLE_SETTINGS,K as TextStyleItem,U as TextStylesGroup,_ as TextStylesList,R as addTextStyle,B as canAddTextStyle,L as defaultTextStyles,q as describeTextStyle,I as isDefaultTextStyle,T as removeTextStyle,V as resolveTextStyle,Y as textStyleRowSize,X as updateTextStyle,Z as weightWord};
+import{hexReadout as e,ColourWindow as s,typedHex as t}from"../chunk-5XUMLKQF.js";import{DEFAULT_TEXT_STYLES_WORDS as a}from"../chunk-OGH6CC3E.js";export{DEFAULT_TEXT_STYLES_WORDS}from"../chunk-OGH6CC3E.js";import"../chunk-643PVCEG.js";import{FieldSlider as l}from"../chunk-XWFH2NHZ.js";import{TEXT_STYLE_KINDS as n,canAddTextStyle as i,TEXT_STYLE_MAX as r,isDefaultTextStyle as o,CAMPAIGN_TEXT_STYLE_SETTINGS as c,TEXT_STYLE_SETTINGS as d,textStyleRowSize as u,describeTextStyle as m,updateTextStyle as h,textStyleCaseCss as f,TEXT_STYLE_CASES as p,addTextStyle as v,removeTextStyle as y,TEXT_STYLE_RANGES as S}from"../chunk-YHZSBL2N.js";export{CAMPAIGN_TEXT_STYLE_SETTINGS,TEXT_STYLE_CASES,TEXT_STYLE_CASE_CSS,TEXT_STYLE_DEFAULT_COUNT,TEXT_STYLE_KINDS,TEXT_STYLE_MAX,TEXT_STYLE_RANGES,TEXT_STYLE_SETTINGS,addTextStyle,canAddTextStyle,defaultTextStyles,describeTextStyle,isDefaultTextStyle,isTextStyleCase,removeTextStyle,resolveTextStyle,textStyleCaseCss,textStyleCaseOfCss,textStyleRowSize,updateTextStyle,weightWord}from"../chunk-YHZSBL2N.js";import{FieldSelect as g}from"../chunk-G3GWAP5R.js";import"../chunk-WRFD4EXD.js";import{useWords as b}from"../chunk-MFIRYGHW.js";import{withTip as N}from"../chunk-P2VEMZH5.js";import{hsvToHex as k,Tooltip as C,ColorSwatch as T,IconButton as x}from"efficient-shell/ui";import{useState as w,useRef as E,useId as O,useEffect as _,Fragment as z}from"react";import{TrashIcon as L,ChevronIcon as A,BoldIcon as j,ItalicIcon as X,CaseLowerIcon as $,CaseCapitalizedIcon as W,CaseUpperIcon as Y,CaseNormalIcon as D}from"efficient-shell/icons/efficient";import{jsxs as G,jsx as I,Fragment as M}from"react/jsx-runtime";var F=`conic-gradient(${[0,60,120,180,240,300,0].map(e=>k({h:e,s:1,v:1})).join(", ")})`;function H({value:t,hex:a,colours:l,label:n,followsWord:i,anyWord:r,onChange:o,readOnly:c=!1}){const[d,u]=w(!1),m=E(null),h=E(null),f=O(),p=void 0!==t&&l.some(e=>e.key===t),v=void 0!==t&&!p;return _(()=>{if(!d)return;const e=m.current?.ownerDocument;if(!e)return;const s=e=>{m.current&&!m.current.contains(e.target)&&u(!1)};return e.addEventListener("click",s,!0),()=>e.removeEventListener("click",s,!0)},[d]),/* @__PURE__ */G("div",{ref:m,className:"es-ts-set","data-ts-setting":"color",children:[
+/* @__PURE__ */G("div",{className:"es-ts-top",children:[
+/* @__PURE__ */I("span",{className:"es-ts-sub",children:n}),
+/* @__PURE__ */I("span",{className:"es-ts-colour-read",children:a?e(a):i})]}),
+/* @__PURE__ */G("div",{className:"es-ts-swatches",role:"group","aria-label":n,children:[l.map(s=>/* @__PURE__ */I(C,{content:`${s.name} · ${e(s.value)}`,children:/* @__PURE__ */I(T,{color:s.value,size:"sm",className:"es-ts-swatch","aria-label":s.name,selected:t===s.key,disabled:c,onClick:()=>o(s.key)})},s.key)),
+/* @__PURE__ */I(C,{content:r,children:/* @__PURE__ */I(T,{ref:h,color:F,size:"sm",className:"es-ts-swatch es-ts-swatch--any","aria-label":r,selected:v,"aria-expanded":d,"aria-controls":d?f:void 0,disabled:c,onClick:()=>u(e=>!e)})})]}),d?/* @__PURE__ */I(s,{id:f,value:a??"",onChange:e=>o(e),label:n,readOnly:c,onClose:()=>{u(!1),h.current?.focus()}}):null]})}function R({styles:e,onChange:s,fonts:t,colours:l=[],settings:d=c,auto:u=[],fallback:m,sample:h,openId:f,defaultOpenId:p=null,onOpenChange:S,onAdd:g,rowActions:k,onRemove:C,max:T=r,readOnly:x=!1}){const z=b("textStyles",a),A=O(),[j,X]=w(p),$=void 0!==f?f:j,W=e=>{void 0===f&&X(e),S?.(e)},Y=E(null),[D,F]=w(null);_(()=>{if(!D||!Y.current)return;const e=[...Y.current.querySelectorAll(".es-ts-item")].find(e=>e.dataset.tsId===D.id),s=e?e.querySelector(".es-ts-row"):Y.current.querySelector(`.es-ts-add[data-ts-kind="${D.kind}"]`);s?.focus(),F(null)},[D]);/* @__PURE__ */
+return I("div",{className:"es-ts",ref:Y,children:n.map(a=>{const n=e.filter(e=>e.kind===a),r=!i(e,a,T),c=!x&&!r;/* @__PURE__ */
+return G(B,{label:z.groups[a],children:[n.map(a=>{const n=k?.(a),i=null!=n&&!1!==n,r=Boolean(C)&&!x&&!o(a);/* @__PURE__ */
+return I(U,{style:a,fonts:t,colours:l,settings:d,auto:u,fallback:m,sample:h,readOnly:x,open:$===a.id,onOpenChange:e=>W(e?a.id:null),onChange:t=>s(e.map(e=>e.id===t.id?t:e)),actions:r||i?/* @__PURE__ */G(M,{children:[r?N(z.remove,/* @__PURE__ */I("button",{type:"button",className:"es-ts-del","aria-label":z.removeNamed({name:a.name}),onClick:()=>(t=>{if(x||!C)return;const a=y(e,t.id,{name:z.styleName});if(!a)return;const l=e.filter(e=>e.kind===t.kind),n=l[l.indexOf(t)+1];$===t.id&&W(null),s(a.styles),C(a.removed),F({id:n?.id??null,kind:t.kind})})(a),children:/* @__PURE__ */I(L,{size:14,"aria-hidden":"true"})})):null,i?n:null]}):null},a.id)}),N(!x&&r?z.full({kind:a,max:T}):void 0,/* @__PURE__ */G("button",{type:"button",className:"es-ts-add","data-ts-kind":a,disabled:x,"aria-disabled":!(x||!r)||void 0,"aria-describedby":!x&&r?`${A}-full-${a}`:void 0,onClick:()=>{c&&(t=>{if(x)return;const a=v(e,t,{max:T,name:z.styleName,make:g});a&&s(a.styles)})(a)},children:[
+/* @__PURE__ */I("span",{className:"es-ts-add-word",children:z.add[a]}),
+/* @__PURE__ */I("span",{className:"es-ts-count",children:z.count({n:n.length,max:T})})]})),x||!r?null:/* @__PURE__ */I("span",{id:`${A}-full-${a}`,className:"es-vh",children:z.full({kind:a,max:T})})]},a)})})}function B({label:e,children:s}){const t=O();/* @__PURE__ */
+return G("section",{className:"es-ts-section","aria-labelledby":t,children:[
+/* @__PURE__ */I("div",{className:"es-ts-group",id:t,children:e}),s]})}function U({style:e,fonts:s,colours:t=[],settings:l=c,auto:n=[],fallback:i,sample:r,open:o,onOpenChange:f,onChange:p,actions:v,readOnly:y=!1}){const S=b("textStyles",a),g=`${O()}-open-${e.id}`,N=new Set(n),k=d.filter(e=>l.includes(e)),C={...i?.(e)??{},...e.values},T=s.find(e=>e.value===C.font),x={fontFamily:T?.family,fontSize:`${u(C.size??16)}px`,fontWeight:C.weight,fontStyle:C.italic?"italic":void 0};/* @__PURE__ */
+return G(z,{children:[
+/* @__PURE__ */G("div",{className:"es-ts-item","data-ts-id":e.id,children:[
+/* @__PURE__ */G("button",{type:"button",className:"es-ts-row","aria-expanded":o,"aria-controls":o?g:void 0,onClick:()=>f(!o),children:[
+/* @__PURE__ */I("span",{className:"es-ts-chev","aria-hidden":"true",children:/* @__PURE__ */I(A,{size:12})}),
+/* @__PURE__ */I("span",{className:"es-ts-name",style:x,children:e.name}),
+/* @__PURE__ */I("span",{className:"es-ts-meta",children:m(C,s,S,{autoSize:N.has("size")&&void 0===e.values.size})})]}),v?/* @__PURE__ */I("div",{className:"es-ts-actions",children:v}):null]}),o?/* @__PURE__ */I("div",{className:"es-ts-open",id:g,children:/* @__PURE__ */I(Z,{style:e,values:C,fonts:s,colours:t,settings:k,autoSet:N,sample:r??S.sample,words:S,readOnly:y,set:s=>p(h([e],e.id,s)[0])})}):null]})}var P={none:D,upper:Y,capitalize:W,lower:$};function Z({style:e,values:s,fonts:a,colours:n,settings:i,autoSet:r,sample:o,words:c,readOnly:d,set:u}){const m=e.values,h=a.find(e=>e.value===s.font),p=function(e,s){return e?s.find(s=>s.key===e)?.value??t(e)??void 0:void 0}(s.color,n),v=e=>"largestSize"===e||r.has(e),y=e=>v(e)?m[e]:s[e],g=y("size"),b=y("lineSpacing"),k=y("letterSpacing"),C=v("letterCase")?m.letterCase:s.letterCase,T={fontFamily:h?.family,fontSize:void 0===g?void 0:`${g}px`,fontWeight:s.weight,fontStyle:s.italic?"italic":void 0,lineHeight:void 0===b?void 0:String(b/100),letterSpacing:void 0===k?void 0:`${k}px`,color:p,textTransform:f(C)},w=e=>{const t=S[e],a=v(e);/* @__PURE__ */
+return I("div",{className:"es-ts-slider","data-ts-setting":e,children:/* @__PURE__ */I(l,{label:c.settings[e],value:m[e],onChange:s=>u({[e]:s}),min:t.min,max:t.max,step:t.step,shiftStep:t.shiftStep,sliderMin:t.sliderMin,sliderMax:t.sliderMax,unit:t.unit||void 0,styleValue:a?void 0:s[e],auto:a?c.auto:void 0,readOnly:d})},e)};/* @__PURE__ */
+return G(M,{children:[
+/* @__PURE__ */I("div",{className:"es-ts-preview",style:T,"aria-label":c.preview,children:o}),i.map(t=>{switch(t){case"font":/* @__PURE__ */
+return I(q,{value:m.font,fonts:a,words:c,readOnly:d,set:u},t);case"color":/* @__PURE__ */
+return I(K,{value:m.color,hex:p,colours:n,words:c,readOnly:d,set:u},t);case"emphasis":{const e=(s.weight??400)>=600,a=!1!==h?.italic;/* @__PURE__ */
+return G("div",{className:"es-ts-set","data-ts-setting":t,children:[
+/* @__PURE__ */I("span",{className:"es-ts-sub",children:c.settings.emphasis}),
+/* @__PURE__ */G("div",{className:"es-ts-icons",children:[N(c.bold,/* @__PURE__ */I(x,{className:"es-ts-icon","aria-label":c.bold,"aria-pressed":e,disabled:d,onClick:()=>u({weight:e?400:700}),children:/* @__PURE__ */I(j,{size:16})})),d||a?N(c.italic,/* @__PURE__ */I(x,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(s.italic),disabled:d,onClick:()=>u({italic:!s.italic||void 0}),children:/* @__PURE__ */I(X,{size:16})})):/* @__PURE__ */I(x,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(s.italic),"aria-disabled":!0,disabledReason:c.italicMissing,children:/* @__PURE__ */I(X,{size:16})})]})]},t)}case"letterCase":/* @__PURE__ */
+return I(V,{value:m.letterCase??s.letterCase,auto:v("letterCase"),words:c,readOnly:d,set:u},t);case"largestSize":return"heading"===e.kind?w(t):null;default:return w(t)}})]})}function q({value:e,fonts:s,words:t,readOnly:a,set:l}){const n=O();/* @__PURE__ */
+return G("div",{className:"es-ts-set","data-ts-setting":"font",children:[
+/* @__PURE__ */I("span",{className:"es-ts-sub",id:n,children:t.settings.font}),
+/* @__PURE__ */I(g,{value:e,options:s.map(e=>({label:e.label,value:e.value})),onChange:e=>l({font:e}),ariaLabelledBy:n,readOnly:a})]})}function K({value:e,hex:s,colours:t,words:a,readOnly:l,set:n}){/* @__PURE__ */
+return I(H,{value:e,hex:s,colours:t,label:a.settings.color,followsWord:a.colour.follows,anyWord:a.colour.any,readOnly:l,onChange:e=>n({color:e})})}function V({value:e,auto:s,words:t,readOnly:a,set:l}){const n=s?["auto",...p]:p,i=e??(s?"auto":"none"),r=E([]),o=e=>l({letterCase:"auto"===e?void 0:e});/* @__PURE__ */
+return G("div",{className:"es-ts-set","data-ts-setting":"letterCase",children:[
+/* @__PURE__ */I("span",{className:"es-ts-sub",children:t.settings.letterCase}),
+/* @__PURE__ */I("div",{className:"es-ts-icons",role:"radiogroup","aria-label":t.settings.letterCase,onKeyDown:e=>{const s="ArrowRight"===e.key||"ArrowDown"===e.key?1:"ArrowLeft"===e.key||"ArrowUp"===e.key?-1:0;if(!s||a)return;e.preventDefault();const t=(n.indexOf(i)+s+n.length)%n.length;o(n[t]),r.current[t]?.focus()},children:n.map((e,s)=>{const l=e===i;if("auto"===e)return N(t.case.autoTitle,/* @__PURE__ */I(x,{ref:e=>{r.current[s]=e},role:"radio",pressed:l,className:"es-ts-icon es-ts-icon--word","aria-checked":l,"aria-label":t.case.auto,tabIndex:l?0:-1,disabled:a,onClick:()=>o(e),children:t.case.auto},e));const n=P[e];return N(t.case[e],/* @__PURE__ */I(x,{ref:e=>{r.current[s]=e},role:"radio",pressed:l,className:"es-ts-icon","aria-checked":l,"aria-label":t.case[e],tabIndex:l?0:-1,disabled:a,onClick:()=>o(e),children:/* @__PURE__ */I(n,{size:16})},e))})})]})}export{H as ColourSwatchRow,U as TextStyleItem,B as TextStylesGroup,R as TextStylesList};