efficient-easel 0.99.2 → 0.100.0

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

@@ -0,0 +1,328 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as TextStylesWords } from '../words-CRYvAiHX.js';
+export { D as DEFAULT_TEXT_STYLES_WORDS } from '../words-CRYvAiHX.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' | '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;
+
+interface TextStylesListProps {
+    /** Headings and bodies, in the host's order; the list draws headings first. */
+    styles: readonly TextStyle[];
+    /** The whole list, after one change: a value set, a style added. */
+    onChange: (next: TextStyle[]) => void;
+    /** The fonts the Font row offers. */
+    fonts: readonly TextStyleFont[];
+    /** The theme's colours, offered in the Color row before Any color. */
+    colours?: readonly TextStyleColour[];
+    /**
+     * Which settings an open style shows. They are always drawn in the
+     * design's order (`TEXT_STYLE_SETTINGS`). Left out: the campaign's set.
+     * Site styles adds `emphasis` (B · I) and `largestSize` (headings only).
+     */
+    settings?: readonly TextStyleSetting[];
+    /** Which settings may be Auto: "no number, each section draws its own" (Site styles). */
+    auto?: readonly TextStyleAuto[];
+    /** The numbers a style shows, grey, for a setting with nothing of its own. */
+    fallback?: (style: TextStyle) => TextStyleValues;
+    /** The line the open style's preview is drawn in. */
+    sample?: string;
+    /** Which style is open — the host's, when given (one at a time). */
+    openId?: string | null;
+    /** Which style is open at first, when the host does not hold it. */
+    defaultOpenId?: string | null;
+    onOpenChange?: (id: string | null) => void;
+    /** The host's own new style (its own id). `n` is the number it would be called. */
+    onAdd?: (kind: TextStyleKind, n: number) => TextStyle;
+    /**
+     * Buttons the host puts at the end of a style's row, OUTSIDE the button that
+     * opens it (a button may not hold a button). They lie over the row's end and
+     * show on hover and on focus, as the Layers row's do, after Delete.
+     */
+    rowActions?: (style: TextStyle) => ReactNode;
+    /**
+     * Given: an ADDED style's row has Delete (the trash, red, as the Layers
+     * delete). Heading 1–3 and Body 1–5 never have it. A press deletes at once
+     * with no confirm — the host's undo brings it back, so a host passes this
+     * only once its undo covers the styles. The new list still comes through
+     * `onChange`, as one change; this only says which style went.
+     */
+    onRemove?: (removed: TextStyle) => void;
+    /** At most this many of each kind. */
+    max?: number;
+    readOnly?: boolean;
+}
+/**
+ * ONE TEXT-STYLES LIST FOR BOTH EDITORS (plan step E6): Email styles → Text
+ * and Site styles → Text, drawn once. Design final 2026-10-06, on the
+ * campaign page (the shared list, Email styles option C) and the website page
+ * (§3, Site styles).
+ *
+ *   Headings                         a group heading, then its styles
+ *   ▸ Heading 1                      the name, in its own face (≤ 20 px here)
+ *     Playfair Display · 40 px · …   the grey line under it
+ *   + Add heading            3 / 7   grey at 7
+ *
+ * A style opens to a one-line preview, Font, Color (the theme's colours and
+ * Any color, which opens the pickers' window), sliders (E4's FieldSlider) and
+ * Letter case. What is on offer is the host's: `settings`, `auto`.
+ *
+ * The data and the words are the host's. The list does not know where an
+ * email or a storefront keeps its styles, nor what they were once called.
+ */
+declare function TextStylesList({ styles, onChange, fonts, colours, settings, auto, fallback, sample, openId, defaultOpenId, onOpenChange, onAdd, rowActions, onRemove, max, readOnly, }: TextStylesListProps): react.JSX.Element;
+
+interface ColourSwatchRowProps {
+    /** The stored colour: a theme colour's `key`, a `#rrggbb`, or `undefined` for none of its own. */
+    value: string | undefined;
+    /** The `#rrggbb` the row reads out, or `undefined` while there is none (the host resolves a key to its value). */
+    hex: string | undefined;
+    /** The theme's colours, drawn as swatches in this order. */
+    colours: readonly TextStyleColour[];
+    /** The row's name ("Color"): its caption and the swatch group's accessible name. */
+    label: string;
+    /** What the readout says with no colour of its own ("Follows the style"). */
+    followsWord: string;
+    /** The last swatch's name ("Any color"). */
+    anyWord: string;
+    /** A swatch writes its `key`; the colour window writes a `#rrggbb`. */
+    onChange: (next: string) => void;
+    readOnly?: boolean;
+}
+/**
+ * THE COLOR ROW — the theme's colours in a row, then Any color, which opens
+ * the one colour window (`ColourWindow`). Exported so a second host draws the
+ * same row instead of a copy (plan S2: the website's part panel; design final
+ * 2026-10-06). The text-styles list draws it through this export, unchanged.
+ *
+ * What a press means is the host's: a swatch writes its key, the window a
+ * hex. Clearing, and what "nothing chosen" reads, are the host's too.
+ */
+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, type TextStyleKind, type TextStyleNumber, type TextStyleRange, type TextStyleSetting, type TextStyleValues, TextStylesList, type TextStylesListProps, TextStylesWords, addTextStyle, canAddTextStyle, defaultTextStyles, describeTextStyle, isDefaultTextStyle, removeTextStyle, resolveTextStyle, textStyleRowSize, updateTextStyle, weightWord };

package/dist/text-styles/index.js

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