npm - editor-shell - Versions diffs - 0.8.2 → 0.9.0 - Mend

editor-shell 0.8.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/gold/gold.css CHANGED Viewed

@@ -23,6 +23,7 @@
   --es-gold-caret: var(--es-text, #111827);
   --es-gold-placeholder: var(--es-field-placeholder, #9ca3af);
   --es-gold-delim-opacity: 0.35;
+  --es-gold-delim-resting-opacity: 0.25;
   --es-gold-bold-shadow: 0 0 0.4px currentColor;
   --es-gold-italic-decoration: underline dotted;
   --es-gold-strike-decoration: line-through;
@@ -105,10 +106,16 @@
 /* — the marks — */
 /*
- * Quiet unless you are IN the box (card 8802.h). A merchant who is not typing
- * should not read `**` and `==` sitting inside their own page text — it looks
- * like a bug. While the caret is in here they are what is being aimed at, so
- * `:focus-within` brings them back at the token dim.
+ * A whisper at rest, louder while you are IN the box (cards 8802.h, 8807).
+ *
+ * A merchant who is not typing should not READ `**` and `==` sitting inside
+ * their own page text — it looks like a bug. 8802.h took them to 0 for that,
+ * which worked, and left a second problem: the characters keep their full width
+ * either way (see below), so at 0 the space stayed and the explanation went. A
+ * short, heavily marked string spends about a quarter of its line on blanks
+ * nothing accounts for. At 0 that gap reads as a rendering bug; at a whisper it
+ * reads as punctuation. While the caret is in here the marks are what is being
+ * aimed at, so `:focus-within` brings them up to the louder dim.
  *
  * FADED, never removed, and done here rather than in React for the same reason.
  * The characters stay in the layer at their full width: dropping a `**` would
@@ -118,7 +125,7 @@
  * state, so focusing the box does not re-render it for a change that is paint.
  */
 .es-gold .es-gold-delim {
-  opacity: 0;
+  opacity: var(--es-gold-delim-resting-opacity);
 }
 .es-gold:focus-within .es-gold-delim {

package/dist/gold/index.d.ts CHANGED Viewed

@@ -179,7 +179,15 @@ declare function goldSegments(value: string, rules: readonly InlineRule[]): Gold
  *   - the caret and the placeholder defer to the shell layer's `--es-text` /
  *     `--es-field-placeholder` (see `shell/tokens.ts`) with the same values as
  *     their fallbacks;
- *   - the dim is the rail's existing disabled opacity (0.35), not a new number.
+ *   - the FOCUSED dim is the rail's existing disabled opacity (0.35), not a new
+ *     number. Its RESTING sibling (0.25) is the one value in this file picked by
+ *     eye rather than borrowed: nothing else in the product paints a mark that
+ *     has to hold its width while it stops being read, so there was nothing to
+ *     copy. The owner chose it against a picker rendering the candidates at
+ *     heading and body size; 0.18 was tried there first and still read too
+ *     faint (card 8807). That history is here on purpose: a later reader who
+ *     finds 0.25 with nothing behind it will "fix" it to match some other
+ *     number, and this is the paragraph that stops them.
  *
  * Every value is a STRING, unlike the rail's and shell's pixel magnitudes:
  * none of these is a length, so nothing here gains a unit on the way into CSS.
@@ -197,11 +205,20 @@ declare const goldTokens: {
     readonly caret: "var(--es-text, #111827)";
     /** The hint shown while the value is empty. */
     readonly placeholder: "var(--es-field-placeholder, #9ca3af)";
-    /** How far the asterisks are dimmed WHILE THE BOX HAS FOCUS. Out of focus they
-     *  are faded out altogether (`gold.css`, `:focus-within`, card 8802.h) — but
-     *  FADED, never removed: the characters stay in the layer at their full width,
-     *  which is the deal. Anything that took them out would move a glyph. */
+    /** How far the asterisks are dimmed WHILE THE BOX HAS FOCUS — the moment they
+     *  are what the merchant is aiming at, so this is the louder of the pair.
+     *  Out of focus they drop to {@link goldTokens.delimiterRestingOpacity}. */
     readonly delimiterOpacity: "0.35";
+    /** How far they are dimmed AT REST, when nobody is typing (card 8807). A
+     *  whisper, and deliberately not 0.
+     *
+     *  FADED, never removed: the characters stay in the layer at their full width
+     *  in BOTH states, which is the deal — anything that took them out would move
+     *  a glyph. So the width is spent either way, and 0 spends it with nothing to
+     *  show for it: a short, heavily marked string loses about a quarter of its
+     *  line to blanks that read as a rendering bug. Faint, the same space reads as
+     *  punctuation. */
+    readonly delimiterRestingOpacity: "0.25";
     /**
      * Faux-bold. A real `font-weight: 600` is wider, and a wider run down here
      * wraps a line earlier than the transparent box on top of it — after which

package/dist/gold/index.js CHANGED Viewed

@@ -169,11 +169,20 @@ var goldTokens = {
   caret: "var(--es-text, #111827)",
   /** The hint shown while the value is empty. */
   placeholder: "var(--es-field-placeholder, #9ca3af)",
-  /** How far the asterisks are dimmed WHILE THE BOX HAS FOCUS. Out of focus they
-   *  are faded out altogether (`gold.css`, `:focus-within`, card 8802.h) — but
-   *  FADED, never removed: the characters stay in the layer at their full width,
-   *  which is the deal. Anything that took them out would move a glyph. */
+  /** How far the asterisks are dimmed WHILE THE BOX HAS FOCUS — the moment they
+   *  are what the merchant is aiming at, so this is the louder of the pair.
+   *  Out of focus they drop to {@link goldTokens.delimiterRestingOpacity}. */
   delimiterOpacity: "0.35",
+  /** How far they are dimmed AT REST, when nobody is typing (card 8807). A
+   *  whisper, and deliberately not 0.
+   *
+   *  FADED, never removed: the characters stay in the layer at their full width
+   *  in BOTH states, which is the deal — anything that took them out would move
+   *  a glyph. So the width is spent either way, and 0 spends it with nothing to
+   *  show for it: a short, heavily marked string loses about a quarter of its
+   *  line to blanks that read as a rendering bug. Faint, the same space reads as
+   *  punctuation. */
+  delimiterRestingOpacity: "0.25",
   /**
    * Faux-bold. A real `font-weight: 600` is wider, and a wider run down here
    * wraps a line earlier than the transparent box on top of it — after which
@@ -192,6 +201,7 @@ var goldCssVars = {
   caret: "--es-gold-caret",
   placeholder: "--es-gold-placeholder",
   delimiterOpacity: "--es-gold-delim-opacity",
+  delimiterRestingOpacity: "--es-gold-delim-resting-opacity",
   boldShadow: "--es-gold-bold-shadow",
   italicDecoration: "--es-gold-italic-decoration",
   strikeDecoration: "--es-gold-strike-decoration"

package/dist/gold/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/gold/segments.ts","../../src/gold/GoldLayer.tsx","../../src/gold/GoldTextInput.tsx","../../src/gold/tokens.ts"],"names":["STANDARD_MARKUP","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { tokenizeInline } from 'react-os-shell/markup';\nimport type { InlineKind, InlineRule } from 'react-os-shell/markup';\n\n/*\n Cutting an authored string into the pieces the layer paints — WITHOUT losing a\n * character.\n \n The grammar is not re-implemented here and never will be (constitution E8):\n * {@link tokenizeInline} from `react-os-shell/markup` decides what is a run and\n * what is not, exactly as it does for the published page. What it does not\n * return is the delimiters — it hands back a run's INNER text, because every\n * other consumer wants the words without the asterisks.\n \n This layer wants the asterisks. It draws underneath a transparent box whose\n * caret walks the stored string, so the two surfaces must hold the same\n * characters in the same order: drop the `*` and every glyph after it sits two\n columns left of the caret that is supposed to be inside it.\n \n So each parsed run is located back in the source and cut into three pieces —\n * opening delimiter, inner text, closing delimiter — and EVERY piece is sliced\n * out of the original string rather than rebuilt from the token. Nothing is\n * retyped, so nothing can be retyped wrong.\n /\n\n/* A piece of the source: a parsed run's kind, or the delimiters around one. /\nexport type GoldSegmentKind = InlineKind \| 'delimiter';\n\nexport interface GoldSegment {\n kind: GoldSegmentKind;\n /* Verbatim source text. Concatenating every segment reproduces the input. /\n text: string;\n}\n\n/\n Split `value` into paint-able segments under `rules`.\n \n GUARANTEE: `segments.map(s => s.text).join('') === value`, always. If the walk\n * below cannot line a run up with the rule that produced it — which would mean\n * the grammar and this function disagree — the whole string comes back as one\n * plain `text` segment. Losing the gold is a disappointment; losing a character\n * puts the caret in the wrong place, so the fallback is never in doubt.\n /\nexport function goldSegments(value: string, rules: readonly InlineRule[]): GoldSegment[] {\n const out: GoldSegment[] = [];\n let at = 0;\n\n for (const token of tokenizeInline(value, rules)) {\n if (token.kind === 'text') {\n // Empty text tokens are part of the tokenizer's alternating contract; they\n // paint nothing, so they are dropped rather than drawn as empty spans.\n if (token.text.length > 0) {\n out.push({ kind: 'text', text: value.slice(at, at + token.text.length) });\n at += token.text.length;\n }\n continue;\n }\n\n const rule = ruleAt(value, at, token.kind, token.text, rules);\n if (!rule) return [{ kind: 'text', text: value }];\n\n const innerAt = at + rule.open.length;\n const closeAt = innerAt + token.text.length;\n const end = closeAt + rule.close.length;\n\n out.push({ kind: 'delimiter', text: value.slice(at, innerAt) });\n out.push({ kind: token.kind, text: value.slice(innerAt, closeAt) });\n out.push({ kind: 'delimiter', text: value.slice(closeAt, end) });\n at = end;\n }\n\n // The promise, checked rather than assumed — this is the one thing the whole\n // component rests on, and it costs one string compare per keystroke.\n if (out.map((s) => s.text).join('') !== value) return [{ kind: 'text', text: value }];\n return out;\n}\n\n/\n The rule that opened the run `tokenizeInline` reported at `at`.\n \n Found by shape, in the tokenizer's own rule order: the first rule of the right\n * kind whose `open`, inner text and `close` all sit where they would have to.\n * The tokenizer's extra guards (an intraword `_`, a `#` before a digit) only\n * ever make it SKIP a rule, and a skipped rule produces no run — so at a\n * position where a run exists, the first shape-match is the rule that made it.\n /\nfunction ruleAt(\n value: string,\n at: number,\n kind: InlineKind,\n inner: string,\n rules: readonly InlineRule[],\n): InlineRule \| null {\n for (const rule of rules) {\n if (rule.kind !== kind) continue;\n if (!value.startsWith(rule.open, at)) continue;\n const innerAt = at + rule.open.length;\n if (!value.startsWith(inner, innerAt)) continue;\n if (!value.startsWith(rule.close, innerAt + inner.length)) continue;\n return rule;\n }\n return null;\n}\n","import { STANDARD_MARKUP } from 'react-os-shell/markup';\nimport { goldSegments } from './segments';\nimport type { GoldSegment } from './segments';\nimport type { GoldLayerProps } from './types';\n\n/\n The formatted text, drawn UNDER the box.\n \n It is a MARKER layer, not a preview of the page. That distinction is the whole\n * design, and it is why a bold run here is not drawn at weight 600:\n \n the caret, the selection and the line breaks all come from the transparent\n * textarea on top, which has ONE font. A heavier or slanted face down here is\n * wider, so a marked line would wrap a word earlier than the box does and\n * every line after it would sit on top of the wrong text.\n \n So the layer may only paint what cannot move a glyph — colour, opacity,\n * text-decoration, a shadow. A merchant sees WHERE the formatting starts and\n * ends and in which colour it will land; the real weight and slant appear on the\n * page the moment they click away. Full WYSIWYG (asterisks gone, real faces) is\n * a second text engine and is deliberately out of scope — see CLAUDE.md.\n \n The elements mirror the storefront's own renderer (`goldPhrases.tsx`):\n * `<strong>` for bold, `<em>` for italic and for the gold accent, `<s>` for\n * struck-out. The classes carry the paint; the tokens carry the values.\n /\nexport function GoldLayer({ value, rules = STANDARD_MARKUP, className, layerRef }: GoldLayerProps) {\n const segments = goldSegments(value, rules);\n return (\n <div\n ref={layerRef}\n className={['es-gold-layer', className ?? ''].filter(Boolean).join(' ')}\n // The box above holds the same characters and is what a screen reader\n // reads; announcing them twice would be a bug, not thoroughness.\n aria-hidden=\"true\"\n >\n {segments.map((segment, i) => paint(segment, i))}\n </div>\n );\n}\n\nfunction paint(segment: GoldSegment, key: number) {\n const { kind, text } = segment;\n switch (kind) {\n // The delimiters STAY — dimmed, never removed. See `segments.ts`.\n case 'delimiter':\n return (\n <span key={key} className=\"es-gold-delim\">\n {text}\n </span>\n );\n // `accent` (the legacy `phrase`) and `highlight` (`==phrase==`) paint the\n // same, exactly as the page paints them — which is what makes converting\n // stored copy from one to the other invisible here too.\n case 'accent':\n case 'highlight':\n return (\n <em key={key} className=\"es-gold-mark es-gold-accent\">\n {text}\n </em>\n );\n case 'bold':\n return (\n <strong key={key} className=\"es-gold-mark es-gold-bold\">\n {text}\n </strong>\n );\n case 'italic':\n return (\n <em key={key} className=\"es-gold-mark es-gold-italic\">\n {text}\n </em>\n );\n case 'strike':\n return (\n <s key={key} className=\"es-gold-mark es-gold-strike\">\n {text}\n </s>\n );\n // `text` — and `code`, which no product rule produces today, so a backtick\n // stays ordinary copy rather than becoming a chip nobody asked for.\n default:\n return (\n <span key={key} className=\"es-gold-text\">\n {text}\n </span>\n );\n }\n}\n","import { useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, UIEvent } from 'react';\nimport { STANDARD_MARKUP } from 'react-os-shell/markup';\nimport { GoldLayer } from './GoldLayer';\nimport type { GoldTextInputProps } from './types';\n\n/\n Type where the text sits, and watch the gold appear as you type.\n \n The arrangement, in one paragraph: a textarea whose own text is TRANSPARENT\n * sits on top of a layer holding the same characters, painted. What you read is\n * the layer; what the caret walks is the box. Both take their type styles from\n * whatever the host renders them inside (`font: inherit` all the way down), so\n * the glyphs land on top of each other instead of near each other, and the box\n * inherits the page's own type rather than a size this package invented.\n \n The layer is the element IN FLOW and the box is absolutely positioned over it,\n * which is deliberate: the layer holds the same characters, so it wraps to the\n * same height, so the box grows as the merchant types without anyone measuring\n * anything.\n \n WHAT IT DOES NOT DO: write. It has no document, no section, no Puck, no shop.\n * `onCommit` says \"this edit is finished\"; what that means is the host's\n * business. That is what makes it shareable by both editors (constitution E2)\n * and testable without any of them.\n \n No `'use client'` — same reason as the rail: the directive is the HOST's to\n * place, and both editors' chrome are already client components. Unlike the\n * rail, though, this leaf has hooks, so it must be rendered inside that client\n * boundary; a server component can import the module but cannot render it.\n \n Requires `editor-shell/gold.css`, imported once from a client entry.\n /\nexport function GoldTextInput({\n value,\n onInput,\n onCommit,\n onCancel,\n multiline = false,\n placeholder,\n className,\n rules = STANDARD_MARKUP,\n ariaLabel,\n}: GoldTextInputProps) {\n const layerRef = useRef<HTMLDivElement \| null>(null);\n\n /* The string this editing session started from — what Escape restores. /\n const openedWith = useRef(value);\n /\n Whether anything has been typed since focus. This one boolean carries two\n * owner rulings at once: a focus that types nothing writes nothing (6), and a\n * session that has already committed does not commit again on the blur that\n * follows (2 — one undo step per session).\n /\n const dirty = useRef(false);\n\n function handleFocus() {\n openedWith.current = value;\n dirty.current = false;\n }\n\n function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {\n dirty.current = true;\n onInput(event.currentTarget.value);\n }\n\n function commit(current: string) {\n if (!dirty.current) return;\n dirty.current = false;\n onCommit?.(current);\n }\n\n function handleBlur() {\n // Click-away commits (ruling 5) — or, after an Escape or an Enter that has\n // already committed, does nothing at all.\n commit(value);\n }\n\n function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {\n if (event.key === 'Escape') {\n // Escape ALWAYS cancels, even having typed nothing: it is the merchant\n // saying \"leave this alone\", and it must not fall through to a host that\n // reads Escape as \"close the editor\".\n event.preventDefault();\n dirty.current = false;\n onCancel?.(openedWith.current);\n return;\n }\n\n if (event.key === 'Enter' && !multiline) {\n // A single-line field never takes a newline — not even one that would be\n // thrown away by a commit that does not happen.\n event.preventDefault();\n commit(value);\n return;\n }\n\n // Multi-line Enter is left alone on purpose: the browser inserts the newline\n // and the ordinary change event carries it back. Nothing commits.\n }\n\n function handleScroll(event: UIEvent<HTMLTextAreaElement>) {\n // Only reachable when a host constrains the height — the box scrolls, so the\n // layer has to scroll with it or the two surfaces come apart.\n const layer = layerRef.current;\n if (!layer) return;\n layer.scrollTop = event.currentTarget.scrollTop;\n layer.scrollLeft = event.currentTarget.scrollLeft;\n }\n\n return (\n <div\n className={[\n 'es-gold',\n multiline ? 'es-gold-is-multiline' : 'es-gold-is-single',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <GoldLayer value={value} rules={rules} layerRef={layerRef} />\n {placeholder && value === '' ? (\n // Drawn as the layer's SIBLING, not inside it, so the layer's text stays\n // character-for-character the stored string — the invariant the whole\n // component rests on. It is painted here rather than by the box's own\n // `::placeholder` (which gold.css makes transparent) so the hint lands\n // in exactly the place the first typed character will.\n <div className=\"es-gold-placeholder\" aria-hidden=\"true\">\n {placeholder}\n </div>\n ) : null}\n <textarea\n className=\"es-gold-input\"\n value={value}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onScroll={handleScroll}\n />\n </div>\n );\n}\n","/\n Gold-layer paint tokens.\n \n SHORT LIST BY DESIGN. The layer draws inside whatever the host renders it in\n * and inherits that context's type entirely — family, size, weight, line-height,\n * letter-spacing — because it has to sit on top of a box that inherits the same\n * (see `GoldTextInput`). So there is no type here to tokenise; what is left is\n * the paint, and only the paint that cannot move a glyph.\n \n NOTHING HERE IS INVENTED (CLAUDE.md — \"the tokens are not ours to invent\"):\n * - the gold defers to the page's own `--gold`, falling back to the\n * storefront's light-theme value (`efficient-shop/app/globals.css` → `--gold:\n * #c9a461`), so the mark in the box matches the mark on the page;\n * - the caret and the placeholder defer to the shell layer's `--es-text` /\n * `--es-field-placeholder` (see `shell/tokens.ts`) with the same values as\n * their fallbacks;\n * - the dim is the rail's existing disabled opacity (0.35), not a new number.\n \n Every value is a STRING, unlike the rail's and shell's pixel magnitudes:\n * none of these is a length, so nothing here gains a unit on the way into CSS.\n \n Exposed BOTH ways, per the same value: `goldTokens` (this object) and\n * `gold.css` (the stylesheet, which declares them on `.es-gold` — names in\n * {@link goldCssVars}). The parity gate in `tests/gold-leaf-safety.test.ts`\n * proves the two never drift.\n /\nexport const goldTokens = {\n /* The mark colour — `==phrase==` and the legacy `phrase`. /\n accent: 'var(--gold, #c9a461)',\n /* The caret. Set explicitly because the box's own text is transparent, and\n * `caret-color: auto` would make the caret transparent with it. /\n caret: 'var(--es-text, #111827)',\n /* The hint shown while the value is empty. /\n placeholder: 'var(--es-field-placeholder, #9ca3af)',\n /* How far the asterisks are dimmed WHILE THE BOX HAS FOCUS. Out of focus they\n * are faded out altogether (`gold.css`, `:focus-within`, card 8802.h) — but\n * FADED, never removed: the characters stay in the layer at their full width,\n * which is the deal. Anything that took them out would move a glyph. /\n delimiterOpacity: '0.35',\n /\n Faux-bold. A real `font-weight: 600` is wider, and a wider run down here\n * wraps a line earlier than the transparent box on top of it — after which\n * every following line is drawn over the wrong text. The shadow reads heavier\n * and moves nothing.\n /\n boldShadow: '0 0 0.4px currentColor',\n /* Italic, marked rather than slanted — an italic FACE has its own widths, and\n * the layer may not change a glyph's advance. Same reason as the bold. /\n italicDecoration: 'underline dotted',\n /* Strike-through is metric-safe, so it is drawn exactly as it will print. /\n strikeDecoration: 'line-through',\n} as const;\n\nexport type GoldTokens = typeof goldTokens;\n\n/\n The CSS custom-property name behind each token. `gold.css` sets these on\n * `.es-gold`, so overriding one on (or above) the box re-themes it without\n * shipping new CSS — e.g. `style={{ ['--es-gold-accent']: brand }}`.\n */\nexport const goldCssVars: Record<keyof GoldTokens, string> = {\n accent: '--es-gold-accent',\n caret: '--es-gold-caret',\n placeholder: '--es-gold-placeholder',\n delimiterOpacity: '--es-gold-delim-opacity',\n boldShadow: '--es-gold-bold-shadow',\n italicDecoration: '--es-gold-italic-decoration',\n strikeDecoration: '--es-gold-strike-decoration',\n};\n"]}
1	+ {"version":3,"sources":["../../src/gold/segments.ts","../../src/gold/GoldLayer.tsx","../../src/gold/GoldTextInput.tsx","../../src/gold/tokens.ts"],"names":["STANDARD_MARKUP","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { tokenizeInline } from 'react-os-shell/markup';\nimport type { InlineKind, InlineRule } from 'react-os-shell/markup';\n\n/*\n Cutting an authored string into the pieces the layer paints — WITHOUT losing a\n * character.\n \n The grammar is not re-implemented here and never will be (constitution E8):\n * {@link tokenizeInline} from `react-os-shell/markup` decides what is a run and\n * what is not, exactly as it does for the published page. What it does not\n * return is the delimiters — it hands back a run's INNER text, because every\n * other consumer wants the words without the asterisks.\n \n This layer wants the asterisks. It draws underneath a transparent box whose\n * caret walks the stored string, so the two surfaces must hold the same\n * characters in the same order: drop the `*` and every glyph after it sits two\n columns left of the caret that is supposed to be inside it.\n \n So each parsed run is located back in the source and cut into three pieces —\n * opening delimiter, inner text, closing delimiter — and EVERY piece is sliced\n * out of the original string rather than rebuilt from the token. Nothing is\n * retyped, so nothing can be retyped wrong.\n /\n\n/* A piece of the source: a parsed run's kind, or the delimiters around one. /\nexport type GoldSegmentKind = InlineKind \| 'delimiter';\n\nexport interface GoldSegment {\n kind: GoldSegmentKind;\n /* Verbatim source text. Concatenating every segment reproduces the input. /\n text: string;\n}\n\n/\n Split `value` into paint-able segments under `rules`.\n \n GUARANTEE: `segments.map(s => s.text).join('') === value`, always. If the walk\n * below cannot line a run up with the rule that produced it — which would mean\n * the grammar and this function disagree — the whole string comes back as one\n * plain `text` segment. Losing the gold is a disappointment; losing a character\n * puts the caret in the wrong place, so the fallback is never in doubt.\n /\nexport function goldSegments(value: string, rules: readonly InlineRule[]): GoldSegment[] {\n const out: GoldSegment[] = [];\n let at = 0;\n\n for (const token of tokenizeInline(value, rules)) {\n if (token.kind === 'text') {\n // Empty text tokens are part of the tokenizer's alternating contract; they\n // paint nothing, so they are dropped rather than drawn as empty spans.\n if (token.text.length > 0) {\n out.push({ kind: 'text', text: value.slice(at, at + token.text.length) });\n at += token.text.length;\n }\n continue;\n }\n\n const rule = ruleAt(value, at, token.kind, token.text, rules);\n if (!rule) return [{ kind: 'text', text: value }];\n\n const innerAt = at + rule.open.length;\n const closeAt = innerAt + token.text.length;\n const end = closeAt + rule.close.length;\n\n out.push({ kind: 'delimiter', text: value.slice(at, innerAt) });\n out.push({ kind: token.kind, text: value.slice(innerAt, closeAt) });\n out.push({ kind: 'delimiter', text: value.slice(closeAt, end) });\n at = end;\n }\n\n // The promise, checked rather than assumed — this is the one thing the whole\n // component rests on, and it costs one string compare per keystroke.\n if (out.map((s) => s.text).join('') !== value) return [{ kind: 'text', text: value }];\n return out;\n}\n\n/\n The rule that opened the run `tokenizeInline` reported at `at`.\n \n Found by shape, in the tokenizer's own rule order: the first rule of the right\n * kind whose `open`, inner text and `close` all sit where they would have to.\n * The tokenizer's extra guards (an intraword `_`, a `#` before a digit) only\n * ever make it SKIP a rule, and a skipped rule produces no run — so at a\n * position where a run exists, the first shape-match is the rule that made it.\n /\nfunction ruleAt(\n value: string,\n at: number,\n kind: InlineKind,\n inner: string,\n rules: readonly InlineRule[],\n): InlineRule \| null {\n for (const rule of rules) {\n if (rule.kind !== kind) continue;\n if (!value.startsWith(rule.open, at)) continue;\n const innerAt = at + rule.open.length;\n if (!value.startsWith(inner, innerAt)) continue;\n if (!value.startsWith(rule.close, innerAt + inner.length)) continue;\n return rule;\n }\n return null;\n}\n","import { STANDARD_MARKUP } from 'react-os-shell/markup';\nimport { goldSegments } from './segments';\nimport type { GoldSegment } from './segments';\nimport type { GoldLayerProps } from './types';\n\n/\n The formatted text, drawn UNDER the box.\n \n It is a MARKER layer, not a preview of the page. That distinction is the whole\n * design, and it is why a bold run here is not drawn at weight 600:\n \n the caret, the selection and the line breaks all come from the transparent\n * textarea on top, which has ONE font. A heavier or slanted face down here is\n * wider, so a marked line would wrap a word earlier than the box does and\n * every line after it would sit on top of the wrong text.\n \n So the layer may only paint what cannot move a glyph — colour, opacity,\n * text-decoration, a shadow. A merchant sees WHERE the formatting starts and\n * ends and in which colour it will land; the real weight and slant appear on the\n * page the moment they click away. Full WYSIWYG (asterisks gone, real faces) is\n * a second text engine and is deliberately out of scope — see CLAUDE.md.\n \n The elements mirror the storefront's own renderer (`goldPhrases.tsx`):\n * `<strong>` for bold, `<em>` for italic and for the gold accent, `<s>` for\n * struck-out. The classes carry the paint; the tokens carry the values.\n /\nexport function GoldLayer({ value, rules = STANDARD_MARKUP, className, layerRef }: GoldLayerProps) {\n const segments = goldSegments(value, rules);\n return (\n <div\n ref={layerRef}\n className={['es-gold-layer', className ?? ''].filter(Boolean).join(' ')}\n // The box above holds the same characters and is what a screen reader\n // reads; announcing them twice would be a bug, not thoroughness.\n aria-hidden=\"true\"\n >\n {segments.map((segment, i) => paint(segment, i))}\n </div>\n );\n}\n\nfunction paint(segment: GoldSegment, key: number) {\n const { kind, text } = segment;\n switch (kind) {\n // The delimiters STAY — dimmed, never removed. See `segments.ts`.\n case 'delimiter':\n return (\n <span key={key} className=\"es-gold-delim\">\n {text}\n </span>\n );\n // `accent` (the legacy `phrase`) and `highlight` (`==phrase==`) paint the\n // same, exactly as the page paints them — which is what makes converting\n // stored copy from one to the other invisible here too.\n case 'accent':\n case 'highlight':\n return (\n <em key={key} className=\"es-gold-mark es-gold-accent\">\n {text}\n </em>\n );\n case 'bold':\n return (\n <strong key={key} className=\"es-gold-mark es-gold-bold\">\n {text}\n </strong>\n );\n case 'italic':\n return (\n <em key={key} className=\"es-gold-mark es-gold-italic\">\n {text}\n </em>\n );\n case 'strike':\n return (\n <s key={key} className=\"es-gold-mark es-gold-strike\">\n {text}\n </s>\n );\n // `text` — and `code`, which no product rule produces today, so a backtick\n // stays ordinary copy rather than becoming a chip nobody asked for.\n default:\n return (\n <span key={key} className=\"es-gold-text\">\n {text}\n </span>\n );\n }\n}\n","import { useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, UIEvent } from 'react';\nimport { STANDARD_MARKUP } from 'react-os-shell/markup';\nimport { GoldLayer } from './GoldLayer';\nimport type { GoldTextInputProps } from './types';\n\n/\n Type where the text sits, and watch the gold appear as you type.\n \n The arrangement, in one paragraph: a textarea whose own text is TRANSPARENT\n * sits on top of a layer holding the same characters, painted. What you read is\n * the layer; what the caret walks is the box. Both take their type styles from\n * whatever the host renders them inside (`font: inherit` all the way down), so\n * the glyphs land on top of each other instead of near each other, and the box\n * inherits the page's own type rather than a size this package invented.\n \n The layer is the element IN FLOW and the box is absolutely positioned over it,\n * which is deliberate: the layer holds the same characters, so it wraps to the\n * same height, so the box grows as the merchant types without anyone measuring\n * anything.\n \n WHAT IT DOES NOT DO: write. It has no document, no section, no Puck, no shop.\n * `onCommit` says \"this edit is finished\"; what that means is the host's\n * business. That is what makes it shareable by both editors (constitution E2)\n * and testable without any of them.\n \n No `'use client'` — same reason as the rail: the directive is the HOST's to\n * place, and both editors' chrome are already client components. Unlike the\n * rail, though, this leaf has hooks, so it must be rendered inside that client\n * boundary; a server component can import the module but cannot render it.\n \n Requires `editor-shell/gold.css`, imported once from a client entry.\n /\nexport function GoldTextInput({\n value,\n onInput,\n onCommit,\n onCancel,\n multiline = false,\n placeholder,\n className,\n rules = STANDARD_MARKUP,\n ariaLabel,\n}: GoldTextInputProps) {\n const layerRef = useRef<HTMLDivElement \| null>(null);\n\n /* The string this editing session started from — what Escape restores. /\n const openedWith = useRef(value);\n /\n Whether anything has been typed since focus. This one boolean carries two\n * owner rulings at once: a focus that types nothing writes nothing (6), and a\n * session that has already committed does not commit again on the blur that\n * follows (2 — one undo step per session).\n /\n const dirty = useRef(false);\n\n function handleFocus() {\n openedWith.current = value;\n dirty.current = false;\n }\n\n function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {\n dirty.current = true;\n onInput(event.currentTarget.value);\n }\n\n function commit(current: string) {\n if (!dirty.current) return;\n dirty.current = false;\n onCommit?.(current);\n }\n\n function handleBlur() {\n // Click-away commits (ruling 5) — or, after an Escape or an Enter that has\n // already committed, does nothing at all.\n commit(value);\n }\n\n function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {\n if (event.key === 'Escape') {\n // Escape ALWAYS cancels, even having typed nothing: it is the merchant\n // saying \"leave this alone\", and it must not fall through to a host that\n // reads Escape as \"close the editor\".\n event.preventDefault();\n dirty.current = false;\n onCancel?.(openedWith.current);\n return;\n }\n\n if (event.key === 'Enter' && !multiline) {\n // A single-line field never takes a newline — not even one that would be\n // thrown away by a commit that does not happen.\n event.preventDefault();\n commit(value);\n return;\n }\n\n // Multi-line Enter is left alone on purpose: the browser inserts the newline\n // and the ordinary change event carries it back. Nothing commits.\n }\n\n function handleScroll(event: UIEvent<HTMLTextAreaElement>) {\n // Only reachable when a host constrains the height — the box scrolls, so the\n // layer has to scroll with it or the two surfaces come apart.\n const layer = layerRef.current;\n if (!layer) return;\n layer.scrollTop = event.currentTarget.scrollTop;\n layer.scrollLeft = event.currentTarget.scrollLeft;\n }\n\n return (\n <div\n className={[\n 'es-gold',\n multiline ? 'es-gold-is-multiline' : 'es-gold-is-single',\n className ?? '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <GoldLayer value={value} rules={rules} layerRef={layerRef} />\n {placeholder && value === '' ? (\n // Drawn as the layer's SIBLING, not inside it, so the layer's text stays\n // character-for-character the stored string — the invariant the whole\n // component rests on. It is painted here rather than by the box's own\n // `::placeholder` (which gold.css makes transparent) so the hint lands\n // in exactly the place the first typed character will.\n <div className=\"es-gold-placeholder\" aria-hidden=\"true\">\n {placeholder}\n </div>\n ) : null}\n <textarea\n className=\"es-gold-input\"\n value={value}\n placeholder={placeholder}\n aria-label={ariaLabel}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onScroll={handleScroll}\n />\n </div>\n );\n}\n","/\n Gold-layer paint tokens.\n \n SHORT LIST BY DESIGN. The layer draws inside whatever the host renders it in\n * and inherits that context's type entirely — family, size, weight, line-height,\n * letter-spacing — because it has to sit on top of a box that inherits the same\n * (see `GoldTextInput`). So there is no type here to tokenise; what is left is\n * the paint, and only the paint that cannot move a glyph.\n \n NOTHING HERE IS INVENTED (CLAUDE.md — \"the tokens are not ours to invent\"):\n * - the gold defers to the page's own `--gold`, falling back to the\n * storefront's light-theme value (`efficient-shop/app/globals.css` → `--gold:\n * #c9a461`), so the mark in the box matches the mark on the page;\n * - the caret and the placeholder defer to the shell layer's `--es-text` /\n * `--es-field-placeholder` (see `shell/tokens.ts`) with the same values as\n * their fallbacks;\n * - the FOCUSED dim is the rail's existing disabled opacity (0.35), not a new\n * number. Its RESTING sibling (0.25) is the one value in this file picked by\n * eye rather than borrowed: nothing else in the product paints a mark that\n * has to hold its width while it stops being read, so there was nothing to\n * copy. The owner chose it against a picker rendering the candidates at\n * heading and body size; 0.18 was tried there first and still read too\n * faint (card 8807). That history is here on purpose: a later reader who\n * finds 0.25 with nothing behind it will \"fix\" it to match some other\n * number, and this is the paragraph that stops them.\n \n Every value is a STRING, unlike the rail's and shell's pixel magnitudes:\n * none of these is a length, so nothing here gains a unit on the way into CSS.\n \n Exposed BOTH ways, per the same value: `goldTokens` (this object) and\n * `gold.css` (the stylesheet, which declares them on `.es-gold` — names in\n * {@link goldCssVars}). The parity gate in `tests/gold-leaf-safety.test.ts`\n * proves the two never drift.\n /\nexport const goldTokens = {\n /* The mark colour — `==phrase==` and the legacy `phrase`. /\n accent: 'var(--gold, #c9a461)',\n /* The caret. Set explicitly because the box's own text is transparent, and\n * `caret-color: auto` would make the caret transparent with it. /\n caret: 'var(--es-text, #111827)',\n /* The hint shown while the value is empty. /\n placeholder: 'var(--es-field-placeholder, #9ca3af)',\n /* How far the asterisks are dimmed WHILE THE BOX HAS FOCUS — the moment they\n * are what the merchant is aiming at, so this is the louder of the pair.\n * Out of focus they drop to {@link goldTokens.delimiterRestingOpacity}. /\n delimiterOpacity: '0.35',\n /* How far they are dimmed AT REST, when nobody is typing (card 8807). A\n * whisper, and deliberately not 0.\n \n FADED, never removed: the characters stay in the layer at their full width\n * in BOTH states, which is the deal — anything that took them out would move\n * a glyph. So the width is spent either way, and 0 spends it with nothing to\n * show for it: a short, heavily marked string loses about a quarter of its\n * line to blanks that read as a rendering bug. Faint, the same space reads as\n * punctuation. /\n delimiterRestingOpacity: '0.25',\n /\n Faux-bold. A real `font-weight: 600` is wider, and a wider run down here\n * wraps a line earlier than the transparent box on top of it — after which\n * every following line is drawn over the wrong text. The shadow reads heavier\n * and moves nothing.\n /\n boldShadow: '0 0 0.4px currentColor',\n /* Italic, marked rather than slanted — an italic FACE has its own widths, and\n * the layer may not change a glyph's advance. Same reason as the bold. /\n italicDecoration: 'underline dotted',\n /* Strike-through is metric-safe, so it is drawn exactly as it will print. /\n strikeDecoration: 'line-through',\n} as const;\n\nexport type GoldTokens = typeof goldTokens;\n\n/\n The CSS custom-property name behind each token. `gold.css` sets these on\n * `.es-gold`, so overriding one on (or above) the box re-themes it without\n * shipping new CSS — e.g. `style={{ ['--es-gold-accent']: brand }}`.\n */\nexport const goldCssVars: Record<keyof GoldTokens, string> = {\n accent: '--es-gold-accent',\n caret: '--es-gold-caret',\n placeholder: '--es-gold-placeholder',\n delimiterOpacity: '--es-gold-delim-opacity',\n delimiterRestingOpacity: '--es-gold-delim-resting-opacity',\n boldShadow: '--es-gold-bold-shadow',\n italicDecoration: '--es-gold-italic-decoration',\n strikeDecoration: '--es-gold-strike-decoration',\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Shared editor-chrome primitives for the EFFICIENT editors: EditorRail (a Next-16-safe left icon-rail leaf), the shell token layer, and GoldTextInput — type in place and watch the markup formatting appear as you type.",
   "license": "MIT",
   "author": "Lewis Liu",