shape-text 0.1.0 → 0.2.0

package/README.md

@@ -12,29 +12,20 @@ Browser-first TypeScript library for shape-paragraph layout and SVG rendering.
 - Shape-first API, not a thin wrapper over `pretext`
 - Compile-shape boundary for cache-friendly repeated rendering
 
-## Install
-
-```bash
-npm install shape-text
-bun add shape-text
-```
-
-## Local demo and browser E2E
-
-```bash
-npx playwright install chromium
-npm run demo
-npm run e2e:ui
-```
-
-- `npm run demo` starts the React workbench on `http://127.0.0.1:4173/`
-- `npm run demo:preview` serves the built demo
-- `npm run e2e` and `npm run e2e:ui` run Playwright against the built preview app on port `4174`, which is closer to production than hitting the dev server
-- The npm scripts resolve their own package root so they still work even if Windows launches `cmd.exe` with a broken fallback cwd
-
-## Ship readiness
-
-Library packaging is validated for both `npm` and `bun`.
+## Install
+
+```bash
+npm install shape-text
+bun add shape-text
+```
+
+## Published consumer example
+
+A small React consumer app lives at [examples/react-published-package-consumer](./examples/react-published-package-consumer/). Inside this repo it resolves `shape-text` to the current package surface so it can validate unreleased API additions before the next publish.
+
+## Ship readiness
+
+Library packaging is validated for both `npm` and `bun`.
 
 ```bash
 npm run ship:check
@@ -58,20 +49,25 @@ import {
 
 const measurer = createCanvasTextMeasurer()
 
-const layout = layoutTextInShape({
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  textStyle: {
-    family: '"Helvetica Neue", Arial, sans-serif',
-    size: 16,
-    weight: 700,
-    style: 'italic',
-    color: '#111827',
-  },
-  lineHeight: 22,
-  shape: {
-    kind: 'polygon',
-    points: [
-      { x: 0, y: 0 },
+const layout = layoutTextInShape({
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  textStyle: {
+    // Swap `family` to any browser-available font stack.
+    family: '"Helvetica Neue", Arial, sans-serif',
+    // Increase or decrease `size` with `lineHeight` together.
+    size: 16,
+    // Typical weights: 400, 500, 700.
+    weight: 700,
+    // `style` can be omitted, `italic`, or `oblique`.
+    style: 'italic',
+    color: '#111827',
+  },
+  lineHeight: 22,
+  shape: {
+    // Replace `polygon` with `text-mask` for value-derived shapes.
+    kind: 'polygon',
+    points: [
+      { x: 0, y: 0 },
       { x: 240, y: 0 },
       { x: 240, y: 280 },
       { x: 0, y: 280 },
@@ -79,13 +75,14 @@ const layout = layoutTextInShape({
   },
   measurer,
 })
-
-const svg = renderLayoutToSvg(layout, {
-  background: '#fffdf7',
-  shapeStyle: {
-    backgroundColor: '#dbeafe',
-    borderColor: '#94a3b8',
-    borderWidth: 2,
+
+const svg = renderLayoutToSvg(layout, {
+  background: '#fffdf7',
+  shapeStyle: {
+    // Replace the palette or omit `shapeStyle` if you only want the text layer.
+    backgroundColor: '#dbeafe',
+    borderColor: '#94a3b8',
+    borderWidth: 2,
     shadow: {
       blur: 6,
       offsetY: 6,
@@ -106,33 +103,36 @@ The low-level API term stays `text-mask`, but the product framing is `value-deri
 ## Value-derived example
 
 ```ts
-const layout = layoutTextInShape({
-  text: 'Shape paragraph can fill a value-derived silhouette too.',
-  textStyle: {
-    family: 'Arial, sans-serif',
-    size: 16,
+const layout = layoutTextInShape({
+  text: 'Shape paragraph can fill a value-derived silhouette too.',
+  textStyle: {
+    family: 'Arial, sans-serif',
+    size: 16,
     weight: 700,
     color: '#0f172a',
-  },
-  lineHeight: 20,
-  autoFill: true,
-  shape: {
-    kind: 'text-mask',
-    text: '23',
-    font: '700 420px Arial',
-    size: {
-      mode: 'fit-content',
-      padding: 10,
-    },
+  },
+  lineHeight: 20,
+  // Set `autoFill: false` for normal paragraph flow instead of max-fill repeat coverage.
+  autoFill: true,
+  shape: {
+    kind: 'text-mask',
+    // Replace with any glyph string, for example `SALE`, `09`, or `AB`.
+    text: '23',
+    font: '700 420px Arial',
+    size: {
+      // Use `fixed` with explicit `width` / `height` when you need a forced raster box.
+      mode: 'fit-content',
+      padding: 10,
+    },
   },
   measurer,
 })
 ```
 
-## Sequential value-derived regions
-
-```ts
-const layout = layoutTextInShape({
+## Sequential value-derived regions
+
+```ts
+const layout = layoutTextInShape({
   text: 'ABCDEFGHIJ',
   textStyle: {
     family: 'Arial, sans-serif',
@@ -140,34 +140,57 @@ const layout = layoutTextInShape({
     weight: 700,
   },
   lineHeight: 18,
-  shape: {
-    kind: 'text-mask',
-    text: 'AB',
-    font: '700 160px Arial',
-    size: {
+  shape: {
+    kind: 'text-mask',
+    text: 'AB',
+    font: '700 160px Arial',
+    size: {
       mode: 'fixed',
-      width: 260,
-      height: 180,
-    },
-    shapeTextMode: 'per-character',
-  },
-  measurer,
-})
-```
-
-`shape.size` defaults to `{ mode: 'fit-content', padding: 0 }`. Use `mode: 'fixed'` only when you need to force the glyph mask into an explicit raster box.
-
-`shape.shapeTextMode` defaults to `'whole-text'`. Set it to `'per-character'` to compile one ordered region per non-space grapheme and flow layout through those regions in shape-text order.
-
-## Public API
-
-- `createCanvasTextMeasurer()`
-- `compileShapeForLayout()`
-- `normalizeTextStyleToFont()`
-- `prepareTextForLayout()`
-- `layoutNextLineFromPreparedText()`
-- `layoutNextLineFromRepeatedText()`
-- `getBandIntervalsFromPolygon()`
+      width: 260,
+      height: 180,
+    },
+    // Omit this or set `whole-text` to treat the full string as one shape region.
+    shapeTextMode: 'per-character',
+  },
+  measurer,
+})
+```
+
+`shape.size` defaults to `{ mode: 'fit-content', padding: 0 }`. Use `mode: 'fixed'` only when you need to force the glyph mask into an explicit raster box.
+
+`shape.shapeTextMode` defaults to `'whole-text'`. Set it to `'per-character'` to compile one ordered region per non-space grapheme and flow layout through those regions in shape-text order.
+
+## Random fill helpers
+
+```ts
+import { createRandomFillText } from 'shape-text'
+
+const fillText = createRandomFillText({
+  // Presets: 'ascii', 'binary', 'hex', 'octal', 'symbol'.
+  preset: 'hex',
+  // Omit `length` to use the preset default length.
+  length: 48,
+})
+
+const customFillText = createRandomFillText({
+  // Custom alphabets work too.
+  alphabet: 'ABCD1234',
+  length: 32,
+})
+```
+
+## Public API
+
+- `createCanvasTextMeasurer()`
+- `createRandomFillText()`
+- `compileShapeForLayout()`
+- `getRandomFillPreset()`
+- `normalizeTextStyleToFont()`
+- `prepareTextForLayout()`
+- `randomFillPresets`
+- `layoutNextLineFromPreparedText()`
+- `layoutNextLineFromRepeatedText()`
+- `getBandIntervalsFromPolygon()`
 - `layoutTextInCompiledShape()`
 - `layoutTextInShape()`
 - `renderLayoutToSvg()`
@@ -177,44 +200,33 @@ const layout = layoutTextInShape({
 - V1 keeps the text engine simple on purpose. It uses `Intl.Segmenter` for grapheme-safe word breaking, but it does not promise full browser-parity for every writing system.
 - The project takes inspiration from `pretext` for the `prepare -> layout` split and streaming line iteration, but owns its geometry, slot policy, and public API.
 - Geometry and value-derived shapes both compile into reusable line bands before layout.
-- `text-mask` shapes are raster-compiled into reusable line bands. This is the default value-derived path for browser fonts such as `Arial`, and it is designed so callers can precompile `0-9` and `:` for clock-like UIs.
-- `autoFill: true` now means one thing: max-fill stream layout that sweeps every usable interval in reading order.
-- Max fill keeps spaces as normal graphemes instead of stripping them, and it does not fall back to smaller text for leftover pockets.
-- `text-mask` sizing now lives under `shape.size`. The default `fit-content` mode measures the text mask first and grows the raster box to avoid clipping multi-character shapes such as `23`.
-- `shape.shapeTextMode: 'per-character'` keeps the full text-mask debug view, but also compiles ordered per-character regions for sequential fill across multi-character shape text.
-- `textStyle` is the new data-driven API for size, weight, italic/oblique, family, and default text color. Legacy `font` string input still works.
+- `text-mask` shapes are raster-compiled into reusable line bands. This is the default value-derived path for browser fonts such as `Arial`, and it is designed so callers can precompile `0-9` and `:` for clock-like UIs.
+- `autoFill: true` now means one thing: max-fill stream layout that sweeps every usable interval in reading order.
+- Max fill keeps spaces as normal graphemes instead of stripping them, and it does not fall back to smaller text for leftover pockets.
+- Random fill helpers are content utilities only; they generate source text but do not change layout rules.
+- `text-mask` sizing now lives under `shape.size`. The default `fit-content` mode measures the text mask first and grows the raster box to avoid clipping multi-character shapes such as `23`.
+- `shape.shapeTextMode: 'per-character'` keeps the full text-mask debug view, but also compiles ordered per-character regions for sequential fill across multi-character shape text.
+- `textStyle` is the new data-driven API for size, weight, italic/oblique, family, and default text color. Legacy `font` string input still works.
 - `shapeStyle` lives in `renderLayoutToSvg()` because fill, border, and shadow do not affect line breaking or shape compilation.
 - For late-loading web fonts, compile after the font is ready if you want immediate cache reuse. The compiler skips cache writes until `document.fonts.check()` reports the font as ready.
 
-## Local E2E
-
-Install the local browser once:
-
-```bash
-npx playwright install chromium
-```
-
-Run the local browser suite:
-
-```bash
-npm run e2e
-```
-
-Run unit coverage for `src/`:
-
-```bash
-npm run test:coverage
-```
-
-Useful dev modes:
-
-```bash
-npm run e2e:ui
-npm run e2e:headed
-npm run e2e:debug
-```
-
-Playwright now targets the React workbench in `demo/`, so browser coverage runs against the same app used for manual exploration.
+## Maintainer checks
+
+Run the local validation stack:
+
+```bash
+npm run check
+npm run ship:check
+npm run e2e
+```
+
+Useful extras:
+
+```bash
+npm run test:coverage
+npm run e2e:ui
+npm run e2e:headed
+```
 
 ## Publish notes
 
@@ -224,41 +236,6 @@ Playwright now targets the React workbench in `demo/`, so browser coverage runs
 - On Windows terminals that start inside a `\\?\C:\...` cwd, prefer `npm run publish:npm` instead of raw `npm publish`
 - PR validation now runs through `.github/workflows/ci.yml`
 - Tag releases now run through `.github/workflows/release.yml`
-- Preferred publish path is npm Trusted Publisher via GitHub Actions OIDC, with `NPM_TOKEN` as fallback only
+- Release tags now skip npm publish automatically if that exact version already exists on npm
+- Preferred publish path after the first release is npm Trusted Publisher via GitHub Actions OIDC, with `NPM_TOKEN` as fallback only
 - Maintainer release steps and repository settings live in [docs/deployment-guide.md](./docs/deployment-guide.md)
-
-## Local Demo UI
-
-Open the React workbench:
-
-```bash
-npm run demo
-```
-
-Then open:
-
-```text
-http://127.0.0.1:4173/
-```
-
-Build the workbench explicitly:
-
-```bash
-npm run demo:build
-```
-
-Preview the built app:
-
-```bash
-npm run demo:preview
-```
-
-The workbench includes:
-
-- geometry vs value-derived shape source switching
-- direct `shape.text` editing for value-derived shapes
-- `shape.size.mode` switching between `fit-content` and `fixed`
-- `shapeTextMode` switching between `whole-text` and sequential `per-character` value-derived regions
-- random character-pattern fill presets
-- a payload JSON editor for the live `layout` + `render` request
-- a scrollable full-output SVG viewport with `Zoom out`, `Zoom in`, `100%`, and `Fit` controls

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 export type { CompiledShapeBand, CompiledShapeBands, CompiledShapeRegion, CompileShapeForLayoutOptions, Interval, LayoutCursor, LayoutLineRange, LayoutTextInCompiledShapeOptions, LayoutTextInShapeOptions, PolygonShape, PreparedLayoutText, PreparedLayoutToken, RenderLayoutToSvgOptions, ResolvedShapeShadow, ResolvedShapeStyle, ResolvedTextStyle, ShapeInput, ShapeBounds, ShapeShadowInput, ShapeStyleInput, ShapeTextLayout, ShapeTextLine, ShapeTextPoint, TextMaskShape, TextMaskShapeFixedSize, TextMaskShapeFitContentSize, TextMaskShapeSize, TextMaskShapeSizeMode, TextMaskShapeTextMode, TextStyleInput, TextMeasurer, } from './types.js';
+export type { CreateRandomFillTextOptions, RandomIntSelector, } from './random-fill/create-random-fill-text.js';
+export type { RandomFillPreset, RandomFillPresetId, } from './random-fill/random-fill-presets.js';
 export { createCanvasTextMeasurer } from './text/create-canvas-text-measurer.js';
 export { normalizeTextStyleToFont, resolveLayoutTextStyle } from './text/normalize-text-style-to-font.js';
 export { prepareTextForLayout } from './text/prepare-text-for-layout.js';
 export { layoutNextLineFromPreparedText } from './text/layout-next-line-from-prepared-text.js';
 export { layoutNextLineFromRepeatedText } from './text/layout-next-line-from-repeated-text.js';
+export { createRandomFillText } from './random-fill/create-random-fill-text.js';
+export { getRandomFillPreset, randomFillPresets } from './random-fill/random-fill-presets.js';
 export { getBandIntervalsFromPolygon } from './geometry/get-band-intervals-from-polygon.js';
 export { compileShapeForLayout } from './shape/compile-shape-for-layout.js';
 export { layoutTextInCompiledShape } from './layout/layout-text-in-compiled-shape.js';

package/dist/index.js

@@ -3,6 +3,8 @@ export { normalizeTextStyleToFont, resolveLayoutTextStyle } from './text/normali
 export { prepareTextForLayout } from './text/prepare-text-for-layout.js';
 export { layoutNextLineFromPreparedText } from './text/layout-next-line-from-prepared-text.js';
 export { layoutNextLineFromRepeatedText } from './text/layout-next-line-from-repeated-text.js';
+export { createRandomFillText } from './random-fill/create-random-fill-text.js';
+export { getRandomFillPreset, randomFillPresets } from './random-fill/random-fill-presets.js';
 export { getBandIntervalsFromPolygon } from './geometry/get-band-intervals-from-polygon.js';
 export { compileShapeForLayout } from './shape/compile-shape-for-layout.js';
 export { layoutTextInCompiledShape } from './layout/layout-text-in-compiled-shape.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAA;AACzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,8BAA8B,EAAE,MAAM,+CAA+C,CAAA;AAC9F,OAAO,EAAE,8BAA8B,EAAE,MAAM,+CAA+C,CAAA;AAC9F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA0CA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAA;AACzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,8BAA8B,EAAE,MAAM,+CAA+C,CAAA;AAC9F,OAAO,EAAE,8BAA8B,EAAE,MAAM,+CAA+C,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA"}

package/dist/random-fill/create-random-fill-text.d.ts

@@ -0,0 +1,12 @@
+import { type RandomFillPresetId } from './random-fill-presets.js';
+export type RandomIntSelector = (max: number) => number;
+export type CreateRandomFillTextOptions = {
+    preset: RandomFillPresetId;
+    length?: number;
+    randomInt?: RandomIntSelector;
+} | {
+    alphabet: string;
+    length: number;
+    randomInt?: RandomIntSelector;
+};
+export declare function createRandomFillText(options: CreateRandomFillTextOptions): string;

package/dist/random-fill/create-random-fill-text.js

@@ -0,0 +1,70 @@
+import { getRandomFillPreset } from './random-fill-presets.js';
+const graphemeSegmenter = typeof Intl?.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+function createDefaultRandomIntSelector() {
+    if (typeof globalThis.crypto?.getRandomValues === 'function') {
+        const buffer = new Uint32Array(1);
+        return max => {
+            globalThis.crypto.getRandomValues(buffer);
+            return buffer[0] % max;
+        };
+    }
+    return max => Math.floor(Math.random() * max);
+}
+function segmentAlphabet(alphabet) {
+    if (!alphabet) {
+        throw new Error('Random fill alphabet must not be empty');
+    }
+    if (graphemeSegmenter) {
+        return Array.from(graphemeSegmenter.segment(alphabet), segment => segment.segment);
+    }
+    return Array.from(alphabet);
+}
+function getAlphabetSymbols(options) {
+    if ('alphabet' in options) {
+        return segmentAlphabet(options.alphabet);
+    }
+    const preset = getRandomFillPreset(options.preset);
+    if (!preset) {
+        throw new Error(`Unknown random fill preset: ${String(options.preset)}`);
+    }
+    return segmentAlphabet(preset.alphabet);
+}
+function getLength(options) {
+    if ('alphabet' in options) {
+        return options.length;
+    }
+    if (options.length !== undefined) {
+        return options.length;
+    }
+    const preset = getRandomFillPreset(options.preset);
+    if (!preset) {
+        throw new Error(`Unknown random fill preset: ${String(options.preset)}`);
+    }
+    return preset.defaultLength;
+}
+function assertValidLength(length) {
+    if (!Number.isInteger(length) || length <= 0) {
+        throw new Error('Random fill length must be a positive integer');
+    }
+    return length;
+}
+function getRandomIndex(randomInt, alphabetLength) {
+    const value = randomInt(alphabetLength);
+    if (!Number.isInteger(value) || value < 0 || value >= alphabetLength) {
+        throw new Error('Random fill selector must return an integer between 0 and max - 1');
+    }
+    return value;
+}
+export function createRandomFillText(options) {
+    const alphabet = getAlphabetSymbols(options);
+    const length = assertValidLength(getLength(options));
+    const randomInt = options.randomInt ?? createDefaultRandomIntSelector();
+    let text = '';
+    for (let index = 0; index < length; index++) {
+        text += alphabet[getRandomIndex(randomInt, alphabet.length)];
+    }
+    return text;
+}
+//# sourceMappingURL=create-random-fill-text.js.map

package/dist/random-fill/create-random-fill-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-random-fill-text.js","sourceRoot":"","sources":["../../src/random-fill/create-random-fill-text.ts"],"names":[],"mappings":"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"}

package/dist/random-fill/random-fill-presets.d.ts

@@ -0,0 +1,59 @@
+export type RandomFillPresetId = 'ascii' | 'binary' | 'hex' | 'octal' | 'symbol';
+export type RandomFillPreset = {
+    id: RandomFillPresetId;
+    label: string;
+    alphabet: string;
+    defaultLength: number;
+};
+export declare const randomFillPresets: readonly [{
+    readonly id: "ascii";
+    readonly label: "ASCII";
+    readonly alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()[]{}<>?/|+-=";
+    readonly defaultLength: 96;
+}, {
+    readonly id: "binary";
+    readonly label: "BINARY";
+    readonly alphabet: "01";
+    readonly defaultLength: 128;
+}, {
+    readonly id: "hex";
+    readonly label: "HEX";
+    readonly alphabet: "0123456789ABCDEF";
+    readonly defaultLength: 112;
+}, {
+    readonly id: "octal";
+    readonly label: "OCTAL";
+    readonly alphabet: "01234567";
+    readonly defaultLength: 120;
+}, {
+    readonly id: "symbol";
+    readonly label: "SYMBOL";
+    readonly alphabet: "<>[]{}()/\\|+-=_*#@~";
+    readonly defaultLength: 96;
+}];
+export declare function getRandomFillPreset(id: RandomFillPresetId): {
+    readonly id: "ascii";
+    readonly label: "ASCII";
+    readonly alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()[]{}<>?/|+-=";
+    readonly defaultLength: 96;
+} | {
+    readonly id: "binary";
+    readonly label: "BINARY";
+    readonly alphabet: "01";
+    readonly defaultLength: 128;
+} | {
+    readonly id: "hex";
+    readonly label: "HEX";
+    readonly alphabet: "0123456789ABCDEF";
+    readonly defaultLength: 112;
+} | {
+    readonly id: "octal";
+    readonly label: "OCTAL";
+    readonly alphabet: "01234567";
+    readonly defaultLength: 120;
+} | {
+    readonly id: "symbol";
+    readonly label: "SYMBOL";
+    readonly alphabet: "<>[]{}()/\\|+-=_*#@~";
+    readonly defaultLength: 96;
+} | undefined;

package/dist/random-fill/random-fill-presets.js

@@ -0,0 +1,16 @@
+export const randomFillPresets = [
+    {
+        id: 'ascii',
+        label: 'ASCII',
+        alphabet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()[]{}<>?/|+-=',
+        defaultLength: 96,
+    },
+    { id: 'binary', label: 'BINARY', alphabet: '01', defaultLength: 128 },
+    { id: 'hex', label: 'HEX', alphabet: '0123456789ABCDEF', defaultLength: 112 },
+    { id: 'octal', label: 'OCTAL', alphabet: '01234567', defaultLength: 120 },
+    { id: 'symbol', label: 'SYMBOL', alphabet: '<>[]{}()/\\|+-=_*#@~', defaultLength: 96 },
+];
+export function getRandomFillPreset(id) {
+    return randomFillPresets.find(preset => preset.id === id);
+}
+//# sourceMappingURL=random-fill-presets.js.map

package/dist/random-fill/random-fill-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"random-fill-presets.js","sourceRoot":"","sources":["../../src/random-fill/random-fill-presets.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;QACd,QAAQ,EACN,sFAAsF;QACxF,aAAa,EAAE,EAAE;KAClB;IACD,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE;IACrE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAG,EAAE;IAC7E,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE;IACzE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,EAAE;CACxC,CAAA;AAEhD,MAAM,UAAU,mBAAmB,CAAC,EAAsB;IACxD,OAAO,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;AAC3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shape-text",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Browser-first TypeScript library for shape-paragraph layout inside geometry and value-derived shapes, rendered to SVG.",
   "type": "module",
   "main": "./dist/index.js",
@@ -47,12 +47,12 @@
     "demo": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-demo-app.mjs')\"",
     "demo:dev": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-demo-app.mjs')\"",
     "demo:build": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-demo-app.mjs',['--build'])\"",
-    "demo:preview": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-demo-app.mjs',['--preview'])\"",
-    "prepack": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-library-build.mjs')\"",
-    "publish:npm": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-manual-npm-publish.mjs', process.argv.slice(1))\" --",
-    "ship:check": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-library-ship-check.mjs')\"",
-    "release:check-tag": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/validate-release-tag.mjs', process.argv.slice(1))\""
-  },
+    "demo:preview": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-demo-app.mjs',['--preview'])\"",
+    "prepack": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-library-build.mjs')\"",
+    "publish:npm": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-manual-npm-publish.mjs', process.argv.slice(1))\" --",
+    "ship:check": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/run-library-ship-check.mjs')\"",
+    "release:check-tag": "node -e \"const path=require('node:path');let pkg=process.env.npm_package_json||'';if(pkg.charCodeAt(0)===92&&pkg.charCodeAt(1)===92&&pkg.charCodeAt(2)===63&&pkg.charCodeAt(3)===92) pkg=pkg.slice(4);require(path.join(path.dirname(pkg),'scripts','run-node-script-from-package-root.cjs')).run('scripts/validate-release-tag.mjs', process.argv.slice(1))\""
+  },
   "keywords": [
     "svg",
     "text-layout",