@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/utils/device-preview-styles.js

@@ -0,0 +1,228 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * Artboard device preview styling (AGL-581).
+ *
+ * CSS media queries always evaluate against the BROWSER viewport, so a
+ * narrowed artboard never triggered visibility bands
+ * (`@media (max-width:599.95px)` in node sx), breakpoint-scoped sx
+ * values (`{ xs, sm, md }`), or MUI's own breakpoint-derived component
+ * styles. When a device is selected in the toolbar the canvas now pins
+ * both mechanisms to the device's width:
+ *
+ * - `resolveSxForDeviceWidth` statically evaluates width-only `@media`
+ *   keys in node sx: matching slices inline where the key sat (keeping
+ *   cascade order), off-device slices drop. Applied per-Leaf through
+ *   `LeafSxTransformContext` — canvas only.
+ * - `createDevicePinnedTheme` rebuilds the canvas theme's breakpoint
+ *   helpers so every `theme.breakpoints.up/down/...` query is forced
+ *   always-true or never-true for the device width. Responsive sx
+ *   objects, Stack/Grid responsive props, and component styleOverrides
+ *   all resolve through these helpers at render time.
+ *
+ * Fluid Responsive (the default) provides neither, so the canvas keeps
+ * today's real-viewport behavior; the published tenant never sees any
+ * of this.
+ *
+ * The width each device simulates is `devicePreviewWidth`, which lives in
+ * `@aglyn/besigner` with the device flags so that anything auditing a page
+ * at the switcher's widths reads the same numbers the canvas pins to.
+ */ export { DEVICE_PREVIEW_XS_WIDTH, devicePreviewWidth } from "@aglyn/besigner";
+const MEDIA_CONDITION_PATTERN = /^\(\s*(min-width|max-width|width)\s*:\s*(\d+(?:\.\d+)?)px\s*\)$/i;
+const MEDIA_TYPE_PATTERN = /^(only\s+)?(all|screen)$/i;
+function evaluateWidthMediaClause(clause, width) {
+    let matches = true;
+    for (const rawPart of clause.split(/\band\b/i)){
+        const part = rawPart.trim();
+        if (!part) return null;
+        if (MEDIA_TYPE_PATTERN.test(part)) continue;
+        const condition = MEDIA_CONDITION_PATTERN.exec(part);
+        if (!condition) return null;
+        const feature = condition[1].toLowerCase();
+        const value = parseFloat(condition[2]);
+        if (feature === 'min-width') matches = matches && width >= value;
+        else if (feature === 'max-width') matches = matches && width <= value;
+        else matches = matches && width === value;
+    }
+    return matches;
+}
+/**
+ * Statically evaluates a width-only `@media` query at the given
+ * viewport width. Returns null when the query involves anything beyond
+ * px width conditions and the all/screen media types (color-scheme,
+ * hover, em units…) — such queries must stay live in the browser.
+ * Comma-separated clauses OR together, per the media-query spec.
+ */ export function evaluateWidthMediaQuery(query, width) {
+    const conditions = query.replace(/^@media/i, '').trim();
+    if (!conditions) return null;
+    let matches = false;
+    for (const clause of conditions.split(',')){
+        const verdict = evaluateWidthMediaClause(clause.trim(), width);
+        if (verdict === null) return null;
+        matches = matches || verdict;
+    }
+    return matches;
+}
+const isPlainObject = (value)=>typeof value === 'object' && value !== null && !Array.isArray(value);
+/**
+ * Returns a copy of an sx value with width-only `@media` slices
+ * resolved at the device width: matching slices inline exactly where
+ * the media key sat (later duplicate keys override earlier ones — the
+ * same order the CSS cascade gives equal-specificity rules), and
+ * off-device slices drop. Non-width media keys pass through untouched,
+ * as do arrays (per-entry) and theme callbacks (wrapped).
+ */ export function resolveSxForDeviceWidth(sx, width) {
+    if (Array.isArray(sx)) {
+        return sx.map((entry)=>resolveSxForDeviceWidth(entry, width));
+    }
+    if (typeof sx === 'function') {
+        const callback = sx;
+        return (...args)=>resolveSxForDeviceWidth(callback(...args), width);
+    }
+    if (!isPlainObject(sx)) return sx;
+    const out = {};
+    for (const [key, value] of Object.entries(sx)){
+        if (key.trimStart().startsWith('@media')) {
+            const verdict = evaluateWidthMediaQuery(key, width);
+            if (verdict === null) {
+                // Not a pure width query — leave it to the real viewport.
+                out[key] = value;
+                continue;
+            }
+            if (!verdict) continue; // Off-device slice — dropped on canvas.
+            const slice = resolveSxForDeviceWidth(value, width);
+            if (!isPlainObject(slice)) continue;
+            for (const [sliceKey, sliceValue] of Object.entries(slice)){
+                out[sliceKey] = isPlainObject(out[sliceKey]) && isPlainObject(sliceValue) ? _extends({}, out[sliceKey], sliceValue) : sliceValue;
+            }
+            continue;
+        }
+        out[key] = isPlainObject(value) || Array.isArray(value) ? resolveSxForDeviceWidth(value, width) : value;
+    }
+    return out;
+}
+/**
+ * Returns breakpoint helpers whose queries are forced for the given
+ * width: helpers whose real media query would match a `width`-wide
+ * viewport emit an always-true query (a sub-pixel min-width), the rest
+ * emit a never-true one (an unreachable min-width). Each helper/key
+ * pair gets a distinct slot number so forced queries never collide
+ * into one style-object key. `values`/`keys`/`unit` stay real —
+ * components (e.g. MuiContainer) read them as pixel numbers.
+ *
+ * `internal_mediaKeys` is rebuilt from the pinned `up()` outputs so
+ * MUI's style engine pre-seeds them in ascending-breakpoint order —
+ * responsive sx slices keep mobile-first cascade order no matter what
+ * order they were authored in.
+ */ export function pinBreakpointsToWidth(breakpoints, width) {
+    var _breakpoints_keys, _breakpoints_values, _breakpoints_unit, _breakpoints_step;
+    const keys = (_breakpoints_keys = breakpoints.keys) != null ? _breakpoints_keys : [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ];
+    const values = (_breakpoints_values = breakpoints.values) != null ? _breakpoints_values : {};
+    const unit = (_breakpoints_unit = breakpoints.unit) != null ? _breakpoints_unit : 'px';
+    const step = (_breakpoints_step = breakpoints.step) != null ? _breakpoints_step : 5;
+    const valueOf = (key)=>{
+        const value = typeof key === 'number' ? key : values[key];
+        return typeof value === 'number' ? value : null;
+    };
+    const slotOf = (key)=>typeof key === 'number' ? 60 + Math.abs(Math.round(key)) % 900 : Math.max(0, keys.indexOf(key));
+    const force = (matches, slot)=>matches ? `@media (min-width:${slot / 1000}${unit})` : `@media (min-width:${100000 + slot}${unit})`;
+    // Match semantics mirror createBreakpoints exactly: up = min-width v,
+    // down = max-width v - step/100, between = both.
+    const upMatches = (key)=>{
+        const value = valueOf(key);
+        return value == null ? null : width >= value;
+    };
+    const downMatches = (key)=>{
+        const value = valueOf(key);
+        return value == null ? null : width <= value - step / 100;
+    };
+    const betweenMatches = (start, end)=>{
+        const lower = upMatches(start);
+        const upper = downMatches(end);
+        return lower == null || upper == null ? null : lower && upper;
+    };
+    const onlyMatches = (key)=>{
+        const index = typeof key === 'number' ? -1 : keys.indexOf(key);
+        return index !== -1 && index + 1 < keys.length ? betweenMatches(key, keys[index + 1]) : upMatches(key);
+    };
+    const pinned = _extends({}, breakpoints, {
+        up: (key)=>{
+            const matches = upMatches(key);
+            return matches == null ? breakpoints.up(key) : force(matches, slotOf(key));
+        },
+        down: (key)=>{
+            const matches = downMatches(key);
+            return matches == null ? breakpoints.down(key) : force(matches, 1000 + slotOf(key));
+        },
+        between: (start, end)=>{
+            const matches = betweenMatches(start, end);
+            return matches == null ? breakpoints.between(start, end) : force(matches, 2000 + slotOf(start) * 10 + slotOf(end));
+        },
+        only: (key)=>{
+            const matches = onlyMatches(key);
+            return matches == null ? breakpoints.only(key) : force(matches, 3000 + slotOf(key));
+        },
+        not: (key)=>{
+            const matches = onlyMatches(key);
+            return matches == null ? breakpoints.not(key) : force(!matches, 4000 + slotOf(key));
+        }
+    });
+    pinned.internal_mediaKeys = keys.map((key)=>pinned.up(key));
+    return pinned;
+}
+/**
+ * A canvas-only clone of the site theme pinned to the device width:
+ * breakpoint helpers are forced (see {@link pinBreakpointsToWidth}) and
+ * the toolbar mixin — whose real viewport queries were baked in at
+ * createTheme time — is rebuilt against them. The dense xs-landscape
+ * (48px) toolbar rule is intentionally omitted: device previews
+ * simulate portrait-first widths, and that rule only exists for real
+ * rotated phones.
+ */ export function createDevicePinnedTheme(theme, width) {
+    const breakpoints = pinBreakpointsToWidth(theme.breakpoints, width);
+    // Responsive font sizes (responsiveFontSizes) are baked into the
+    // typography VARIANTS as literal `@media (min-width:…px)` string keys
+    // at createTheme time — pinning the breakpoint helpers can't reach
+    // them, so they'd keep matching the real browser viewport (AGL-593).
+    // Flatten each variant object at the device width with the same
+    // resolver Leaf sx uses; scalars and functions (pxToRem, fontFamily)
+    // pass through untouched.
+    const typography = Object.fromEntries(Object.entries(theme.typography).map(([key, value])=>[
+            key,
+            value && typeof value === 'object' && !Array.isArray(value) ? resolveSxForDeviceWidth(value, width) : value
+        ]));
+    return _extends({}, theme, {
+        breakpoints,
+        typography,
+        mixins: _extends({}, theme.mixins, {
+            toolbar: {
+                minHeight: 56,
+                [breakpoints.up('sm')]: {
+                    minHeight: 64
+                }
+            }
+        })
+    });
+}
+
+//# sourceMappingURL=device-preview-styles.js.map

package/src/lib/utils/device-preview-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/device-preview-styles.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { Theme } from '@aglyn/shared-ui-theme'\n\n/**\n * Artboard device preview styling (AGL-581).\n *\n * CSS media queries always evaluate against the BROWSER viewport, so a\n * narrowed artboard never triggered visibility bands\n * (`@media (max-width:599.95px)` in node sx), breakpoint-scoped sx\n * values (`{ xs, sm, md }`), or MUI's own breakpoint-derived component\n * styles. When a device is selected in the toolbar the canvas now pins\n * both mechanisms to the device's width:\n *\n * - `resolveSxForDeviceWidth` statically evaluates width-only `@media`\n *   keys in node sx: matching slices inline where the key sat (keeping\n *   cascade order), off-device slices drop. Applied per-Leaf through\n *   `LeafSxTransformContext` — canvas only.\n * - `createDevicePinnedTheme` rebuilds the canvas theme's breakpoint\n *   helpers so every `theme.breakpoints.up/down/...` query is forced\n *   always-true or never-true for the device width. Responsive sx\n *   objects, Stack/Grid responsive props, and component styleOverrides\n *   all resolve through these helpers at render time.\n *\n * Fluid Responsive (the default) provides neither, so the canvas keeps\n * today's real-viewport behavior; the published tenant never sees any\n * of this.\n *\n * The width each device simulates is `devicePreviewWidth`, which lives in\n * `@aglyn/besigner` with the device flags so that anything auditing a page\n * at the switcher's widths reads the same numbers the canvas pins to.\n */\n\nexport { DEVICE_PREVIEW_XS_WIDTH, devicePreviewWidth } from '@aglyn/besigner'\n\nconst MEDIA_CONDITION_PATTERN =\n  /^\\(\\s*(min-width|max-width|width)\\s*:\\s*(\\d+(?:\\.\\d+)?)px\\s*\\)$/i\n\nconst MEDIA_TYPE_PATTERN = /^(only\\s+)?(all|screen)$/i\n\nfunction evaluateWidthMediaClause(\n  clause: string,\n  width: number,\n): boolean | null {\n  let matches = true\n  for (const rawPart of clause.split(/\\band\\b/i)) {\n    const part = rawPart.trim()\n    if (!part) return null\n    if (MEDIA_TYPE_PATTERN.test(part)) continue\n    const condition = MEDIA_CONDITION_PATTERN.exec(part)\n    if (!condition) return null\n    const feature = condition[1].toLowerCase()\n    const value = parseFloat(condition[2])\n    if (feature === 'min-width') matches = matches && width >= value\n    else if (feature === 'max-width') matches = matches && width <= value\n    else matches = matches && width === value\n  }\n  return matches\n}\n\n/**\n * Statically evaluates a width-only `@media` query at the given\n * viewport width. Returns null when the query involves anything beyond\n * px width conditions and the all/screen media types (color-scheme,\n * hover, em units…) — such queries must stay live in the browser.\n * Comma-separated clauses OR together, per the media-query spec.\n */\nexport function evaluateWidthMediaQuery(\n  query: string,\n  width: number,\n): boolean | null {\n  const conditions = query.replace(/^@media/i, '').trim()\n  if (!conditions) return null\n  let matches = false\n  for (const clause of conditions.split(',')) {\n    const verdict = evaluateWidthMediaClause(clause.trim(), width)\n    if (verdict === null) return null\n    matches = matches || verdict\n  }\n  return matches\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value)\n\n/**\n * Returns a copy of an sx value with width-only `@media` slices\n * resolved at the device width: matching slices inline exactly where\n * the media key sat (later duplicate keys override earlier ones — the\n * same order the CSS cascade gives equal-specificity rules), and\n * off-device slices drop. Non-width media keys pass through untouched,\n * as do arrays (per-entry) and theme callbacks (wrapped).\n */\nexport function resolveSxForDeviceWidth<T>(sx: T, width: number): T {\n  if (Array.isArray(sx)) {\n    return sx.map((entry) => resolveSxForDeviceWidth(entry, width)) as T\n  }\n  if (typeof sx === 'function') {\n    const callback = sx as (...args: unknown[]) => unknown\n    return ((...args: unknown[]) =>\n      resolveSxForDeviceWidth(callback(...args), width)) as T\n  }\n  if (!isPlainObject(sx)) return sx\n\n  const out: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(sx)) {\n    if (key.trimStart().startsWith('@media')) {\n      const verdict = evaluateWidthMediaQuery(key, width)\n      if (verdict === null) {\n        // Not a pure width query — leave it to the real viewport.\n        out[key] = value\n        continue\n      }\n      if (!verdict) continue // Off-device slice — dropped on canvas.\n      const slice = resolveSxForDeviceWidth(value, width)\n      if (!isPlainObject(slice)) continue\n      for (const [sliceKey, sliceValue] of Object.entries(slice)) {\n        out[sliceKey] =\n          isPlainObject(out[sliceKey]) && isPlainObject(sliceValue)\n            ? { ...(out[sliceKey] as object), ...sliceValue }\n            : sliceValue\n      }\n      continue\n    }\n    out[key] =\n      isPlainObject(value) || Array.isArray(value)\n        ? resolveSxForDeviceWidth(value, width)\n        : value\n  }\n  return out as T\n}\n\ntype ThemeBreakpoints = Theme['breakpoints']\ntype BreakpointArg = string | number\n\n/**\n * Returns breakpoint helpers whose queries are forced for the given\n * width: helpers whose real media query would match a `width`-wide\n * viewport emit an always-true query (a sub-pixel min-width), the rest\n * emit a never-true one (an unreachable min-width). Each helper/key\n * pair gets a distinct slot number so forced queries never collide\n * into one style-object key. `values`/`keys`/`unit` stay real —\n * components (e.g. MuiContainer) read them as pixel numbers.\n *\n * `internal_mediaKeys` is rebuilt from the pinned `up()` outputs so\n * MUI's style engine pre-seeds them in ascending-breakpoint order —\n * responsive sx slices keep mobile-first cascade order no matter what\n * order they were authored in.\n */\nexport function pinBreakpointsToWidth(\n  breakpoints: ThemeBreakpoints,\n  width: number,\n): ThemeBreakpoints {\n  const keys: readonly string[] = breakpoints.keys ?? [\n    'xs',\n    'sm',\n    'md',\n    'lg',\n    'xl',\n  ]\n  const values = (breakpoints.values ?? {}) as Record<string, number>\n  const unit = (breakpoints as { unit?: string }).unit ?? 'px'\n  const step = (breakpoints as { step?: number }).step ?? 5\n\n  const valueOf = (key: BreakpointArg): number | null => {\n    const value = typeof key === 'number' ? key : values[key]\n    return typeof value === 'number' ? value : null\n  }\n  const slotOf = (key: BreakpointArg): number =>\n    typeof key === 'number'\n      ? 60 + (Math.abs(Math.round(key)) % 900)\n      : Math.max(0, keys.indexOf(key))\n  const force = (matches: boolean, slot: number): string =>\n    matches\n      ? `@media (min-width:${slot / 1000}${unit})`\n      : `@media (min-width:${100000 + slot}${unit})`\n\n  // Match semantics mirror createBreakpoints exactly: up = min-width v,\n  // down = max-width v - step/100, between = both.\n  const upMatches = (key: BreakpointArg): boolean | null => {\n    const value = valueOf(key)\n    return value == null ? null : width >= value\n  }\n  const downMatches = (key: BreakpointArg): boolean | null => {\n    const value = valueOf(key)\n    return value == null ? null : width <= value - step / 100\n  }\n  const betweenMatches = (\n    start: BreakpointArg,\n    end: BreakpointArg,\n  ): boolean | null => {\n    const lower = upMatches(start)\n    const upper = downMatches(end)\n    return lower == null || upper == null ? null : lower && upper\n  }\n  const onlyMatches = (key: BreakpointArg): boolean | null => {\n    const index = typeof key === 'number' ? -1 : keys.indexOf(key)\n    return index !== -1 && index + 1 < keys.length\n      ? betweenMatches(key, keys[index + 1])\n      : upMatches(key)\n  }\n\n  const pinned: ThemeBreakpoints = {\n    ...breakpoints,\n    up: (key) => {\n      const matches = upMatches(key)\n      return matches == null\n        ? breakpoints.up(key)\n        : force(matches, slotOf(key))\n    },\n    down: (key) => {\n      const matches = downMatches(key)\n      return matches == null\n        ? breakpoints.down(key)\n        : force(matches, 1000 + slotOf(key))\n    },\n    between: (start, end) => {\n      const matches = betweenMatches(start, end)\n      return matches == null\n        ? breakpoints.between(start, end)\n        : force(matches, 2000 + slotOf(start) * 10 + slotOf(end))\n    },\n    only: (key) => {\n      const matches = onlyMatches(key)\n      return matches == null\n        ? breakpoints.only(key)\n        : force(matches, 3000 + slotOf(key))\n    },\n    not: (key) => {\n      const matches = onlyMatches(key)\n      return matches == null\n        ? breakpoints.not(key)\n        : force(!matches, 4000 + slotOf(key))\n    },\n  }\n  ;(pinned as { internal_mediaKeys?: string[] }).internal_mediaKeys = keys.map(\n    (key) => pinned.up(key as Parameters<ThemeBreakpoints['up']>[0]),\n  )\n  return pinned\n}\n\n/**\n * A canvas-only clone of the site theme pinned to the device width:\n * breakpoint helpers are forced (see {@link pinBreakpointsToWidth}) and\n * the toolbar mixin — whose real viewport queries were baked in at\n * createTheme time — is rebuilt against them. The dense xs-landscape\n * (48px) toolbar rule is intentionally omitted: device previews\n * simulate portrait-first widths, and that rule only exists for real\n * rotated phones.\n */\nexport function createDevicePinnedTheme(theme: Theme, width: number): Theme {\n  const breakpoints = pinBreakpointsToWidth(theme.breakpoints, width)\n  // Responsive font sizes (responsiveFontSizes) are baked into the\n  // typography VARIANTS as literal `@media (min-width:…px)` string keys\n  // at createTheme time — pinning the breakpoint helpers can't reach\n  // them, so they'd keep matching the real browser viewport (AGL-593).\n  // Flatten each variant object at the device width with the same\n  // resolver Leaf sx uses; scalars and functions (pxToRem, fontFamily)\n  // pass through untouched.\n  const typography = Object.fromEntries(\n    Object.entries(theme.typography as unknown as Record<string, unknown>).map(\n      ([key, value]) => [\n        key,\n        value && typeof value === 'object' && !Array.isArray(value)\n          ? resolveSxForDeviceWidth(value, width)\n          : value,\n      ],\n    ),\n  ) as unknown as Theme['typography']\n  return {\n    ...theme,\n    breakpoints,\n    typography,\n    mixins: {\n      ...theme.mixins,\n      toolbar: {\n        minHeight: 56,\n        [breakpoints.up('sm')]: { minHeight: 64 },\n      },\n    },\n  }\n}\n"],"names":["DEVICE_PREVIEW_XS_WIDTH","devicePreviewWidth","MEDIA_CONDITION_PATTERN","MEDIA_TYPE_PATTERN","evaluateWidthMediaClause","clause","width","matches","rawPart","split","part","trim","test","condition","exec","feature","toLowerCase","value","parseFloat","evaluateWidthMediaQuery","query","conditions","replace","verdict","isPlainObject","Array","isArray","resolveSxForDeviceWidth","sx","map","entry","callback","args","out","key","Object","entries","trimStart","startsWith","slice","sliceKey","sliceValue","pinBreakpointsToWidth","breakpoints","keys","values","unit","step","valueOf","slotOf","Math","abs","round","max","indexOf","force","slot","upMatches","downMatches","betweenMatches","start","end","lower","upper","onlyMatches","index","length","pinned","up","down","between","only","not","internal_mediaKeys","createDevicePinnedTheme","theme","typography","fromEntries","mixins","toolbar","minHeight"],"mappings":"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"}

package/src/lib/utils/docs-help.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type BesignerDocsAnchor, type BesignerDocsKey } from './docs-help.generated';
+export { BESIGNER_DOCS, type BesignerDocsAnchor, type BesignerDocsKey, } from './docs-help.generated';
+/** Absolute docs URL for a besigner docs page, with an optional heading anchor
+ * constrained to that page's real headings (e.g.
+ * `besignerDocsUrl('responsiveStyling', '#box-stylers')`). */
+export declare function besignerDocsUrl<K extends BesignerDocsKey>(page: K, anchor?: BesignerDocsAnchor<K>): string;

package/src/lib/utils/docs-help.generated.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const BESIGNER_DOCS: {
+    readonly besigner: "/building-sites/besigner/overview";
+    readonly bindings: "/building-sites/bindings/overview";
+    readonly dragDropHierarchy: "/building-sites/besigner/drag-drop-hierarchy";
+    readonly elementCatalog: "/building-sites/besigner/element-catalog";
+    readonly interactions: "/building-sites/besigner/interactions-and-custom-html";
+    readonly layouts: "/building-sites/screens-and-layouts/layouts";
+    readonly repeat: "/building-sites/besigner/repeat";
+    readonly responsiveStyling: "/building-sites/besigner/responsive-styling";
+    readonly reusableComponents: "/building-sites/besigner/reusable-components";
+    readonly seo: "/building-sites/seo/overview";
+    readonly textEditing: "/building-sites/besigner/text-editing";
+};
+export type BesignerDocsKey = keyof typeof BESIGNER_DOCS;
+export declare const BESIGNER_DOCS_ANCHORS: {
+    readonly besigner: readonly ["#preview-vs-canvas", "#what-you-can-do", "#the-canvas", "#hierarchy-panel", "#the-inspector", "#inline-and-rich-text", "#reusable-components", "#editing-together", "#ai-in-the-canvas", "#related"];
+    readonly bindings: readonly ["#binding-tokens", "#rename-safe-id-tokens", "#insert-a-variable", "#token-pills", "#in-the-canvas-text-editor", "#site-details", "#typed-variables", "#no-code-functions", "#parameters-a-visitor-can-answer", "#a-calculator-you-lay-out", "#where-used--safety", "#workflows", "#related"];
+    readonly dragDropHierarchy: readonly ["#where-you-can-drag", "#what-a-drag-does", "#drop-zones-edges-vs-center", "#containers-vs-leaf-elements", "#containers-accept-children", "#leaf-elements-dont--dropping-on-one-makes-a-sibling", "#adding-a-new-element", "#when-a-drop-is-rejected", "#moving-an-element-without-dragging", "#multi-drag", "#tips", "#related"];
+    readonly elementCatalog: readonly ["#finding-an-element", "#element-search", "#element-detail", "#layout", "#the-pages-main-landmark", "#every-container-can-be-a-semantic-element", "#which-link-groups-want-to-be-a-nav", "#header-and-footer-for-your-site-chrome", "#grid", "#surface", "#accordion", "#navigation", "#where-a-link-opens", "#linking-to-a-collection-listing", "#link-container", "#tabs", "#tabs-that-go-to-another-screen", "#pagination", "#text", "#data-display", "#media", "#image-list", "#forms-input-commerce-members", "#related"];
+    readonly interactions: readonly ["#fluent-interactions", "#interactions-belong-to-the-page-they-are-on", "#plan-availability", "#pick-the-target-by-clicking", "#interaction-cookbook", "#scroll-to-element-step", "#play-video-step", "#analytics-event-step", "#analytics-event-name", "#analytics-event-parameters", "#analytics-event-delivery", "#custom-html-block", "#related"];
+    readonly layouts: readonly ["#what-a-layout-is", "#nested-layouts", "#layout-properties", "#duplicate", "#generate-a-layout-with-aglyn-ai", "#used-by", "#layouts-vs-reusable-components", "#related"];
+    readonly repeat: readonly ["#turn-it-on", "#what-repeats-the-element-or-whats-inside-it", "#fill-each-copy-in", "#see-the-copies-while-you-design", "#bound-what-renders", "#the-hundred-record-ceiling", "#what-you-cant-do", "#when-a-dataset-goes-away", "#related"];
+    readonly responsiveStyling: readonly ["#style-per-breakpoint", "#mute-a-style", "#interaction-states", "#you-can-see-the-state-while-you-style-it", "#fields-you-dont-touch-keep-inheriting", "#states-and-breakpoints-combine", "#focus-state", "#box-stylers", "#spacing-side-names", "#spacing-units", "#spacing-steps", "#spacing-custom-amounts", "#unit-px", "#unit-rem", "#unit-em", "#unit-percent", "#unit-ch", "#unit-viewport", "#unit-small-viewport", "#style-groups", "#borders-without-css", "#picking-a-font", "#gradient-backgrounds", "#visibility-per-device-band", "#scheme-scoped-colors", "#custom-classes", "#custom-css-sx", "#semantic-sections--theme-mode", "#edit-json-for-one-element"];
+    readonly reusableComponents: readonly ["#promote", "#insert-instances", "#properties", "#declare-them", "#make-a-property-conditional", "#use-them", "#save-then-publish", "#fill-them-in-per-page", "#restyle-one-instance", "#override-an-attribute-on-one-instance", "#retrofit-duplicated-sections", "#detach", "#nesting", "#used-by", "#manage", "#duplicate", "#copy--paste-vs-reusable-components", "#tips", "#related"];
+    readonly seo: readonly ["#per-screen-seo", "#how-a-page-title-is-built", "#variables-so-a-title-is-not-a-copy-of-your-site-name", "#site-wide-defaults", "#what-language-your-site-says-it-is-in", "#search-engine-visibility", "#the-whole-site", "#a-single-page", "#sitemap--robots", "#one-index-one-file-per-section", "#social-cards", "#what-each-kind-of-page-emits", "#structured-data", "#ai-agents", "#markdown-for-any-page", "#llmstxt", "#openapijson", "#well-knownapi-catalog", "#crawler-access", "#analytics-integration", "#related"];
+    readonly textEditing: readonly ["#edit-inline", "#committing", "#inline-toolbar", "#rich-text", "#the-text-attribute", "#text-field-read-only", "#remove-formatting", "#line-breaks", "#bindings-in-text", "#limits", "#wrapped-outlines", "#related"];
+};
+type BesignerAnchorMap = typeof BESIGNER_DOCS_ANCHORS;
+/** Valid heading anchors for a besigner docs page (`never` when none). */
+export type BesignerDocsAnchor<K extends BesignerDocsKey> = K extends keyof BesignerAnchorMap ? BesignerAnchorMap[K][number] : never;
+export {};

package/src/lib/utils/docs-help.generated.js

@@ -0,0 +1,229 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ // GENERATED FILE — do not edit. Regenerate with:
+//   node tools/scripts/generate-docs-help.mjs
+// Source of truth: apps/docs/docs frontmatter + headings (AGL-602).
+// The besigner designer lib can't import the console constants, so it carries
+// its own generated subset of the docs help registry.
+export const BESIGNER_DOCS = {
+    besigner: '/building-sites/besigner/overview',
+    bindings: '/building-sites/bindings/overview',
+    dragDropHierarchy: '/building-sites/besigner/drag-drop-hierarchy',
+    elementCatalog: '/building-sites/besigner/element-catalog',
+    interactions: '/building-sites/besigner/interactions-and-custom-html',
+    layouts: '/building-sites/screens-and-layouts/layouts',
+    repeat: '/building-sites/besigner/repeat',
+    responsiveStyling: '/building-sites/besigner/responsive-styling',
+    reusableComponents: '/building-sites/besigner/reusable-components',
+    seo: '/building-sites/seo/overview',
+    textEditing: '/building-sites/besigner/text-editing'
+};
+export const BESIGNER_DOCS_ANCHORS = {
+    besigner: [
+        '#preview-vs-canvas',
+        '#what-you-can-do',
+        '#the-canvas',
+        '#hierarchy-panel',
+        '#the-inspector',
+        '#inline-and-rich-text',
+        '#reusable-components',
+        '#editing-together',
+        '#ai-in-the-canvas',
+        '#related'
+    ],
+    bindings: [
+        '#binding-tokens',
+        '#rename-safe-id-tokens',
+        '#insert-a-variable',
+        '#token-pills',
+        '#in-the-canvas-text-editor',
+        '#site-details',
+        '#typed-variables',
+        '#no-code-functions',
+        '#parameters-a-visitor-can-answer',
+        '#a-calculator-you-lay-out',
+        '#where-used--safety',
+        '#workflows',
+        '#related'
+    ],
+    dragDropHierarchy: [
+        '#where-you-can-drag',
+        '#what-a-drag-does',
+        '#drop-zones-edges-vs-center',
+        '#containers-vs-leaf-elements',
+        '#containers-accept-children',
+        '#leaf-elements-dont--dropping-on-one-makes-a-sibling',
+        '#adding-a-new-element',
+        '#when-a-drop-is-rejected',
+        '#moving-an-element-without-dragging',
+        '#multi-drag',
+        '#tips',
+        '#related'
+    ],
+    elementCatalog: [
+        '#finding-an-element',
+        '#element-search',
+        '#element-detail',
+        '#layout',
+        '#the-pages-main-landmark',
+        '#every-container-can-be-a-semantic-element',
+        '#which-link-groups-want-to-be-a-nav',
+        '#header-and-footer-for-your-site-chrome',
+        '#grid',
+        '#surface',
+        '#accordion',
+        '#navigation',
+        '#where-a-link-opens',
+        '#linking-to-a-collection-listing',
+        '#link-container',
+        '#tabs',
+        '#tabs-that-go-to-another-screen',
+        '#pagination',
+        '#text',
+        '#data-display',
+        '#media',
+        '#image-list',
+        '#forms-input-commerce-members',
+        '#related'
+    ],
+    interactions: [
+        '#fluent-interactions',
+        '#interactions-belong-to-the-page-they-are-on',
+        '#plan-availability',
+        '#pick-the-target-by-clicking',
+        '#interaction-cookbook',
+        '#scroll-to-element-step',
+        '#play-video-step',
+        '#analytics-event-step',
+        '#analytics-event-name',
+        '#analytics-event-parameters',
+        '#analytics-event-delivery',
+        '#custom-html-block',
+        '#related'
+    ],
+    layouts: [
+        '#what-a-layout-is',
+        '#nested-layouts',
+        '#layout-properties',
+        '#duplicate',
+        '#generate-a-layout-with-aglyn-ai',
+        '#used-by',
+        '#layouts-vs-reusable-components',
+        '#related'
+    ],
+    repeat: [
+        '#turn-it-on',
+        '#what-repeats-the-element-or-whats-inside-it',
+        '#fill-each-copy-in',
+        '#see-the-copies-while-you-design',
+        '#bound-what-renders',
+        '#the-hundred-record-ceiling',
+        '#what-you-cant-do',
+        '#when-a-dataset-goes-away',
+        '#related'
+    ],
+    responsiveStyling: [
+        '#style-per-breakpoint',
+        '#mute-a-style',
+        '#interaction-states',
+        '#you-can-see-the-state-while-you-style-it',
+        '#fields-you-dont-touch-keep-inheriting',
+        '#states-and-breakpoints-combine',
+        '#focus-state',
+        '#box-stylers',
+        '#spacing-side-names',
+        '#spacing-units',
+        '#spacing-steps',
+        '#spacing-custom-amounts',
+        '#unit-px',
+        '#unit-rem',
+        '#unit-em',
+        '#unit-percent',
+        '#unit-ch',
+        '#unit-viewport',
+        '#unit-small-viewport',
+        '#style-groups',
+        '#borders-without-css',
+        '#picking-a-font',
+        '#gradient-backgrounds',
+        '#visibility-per-device-band',
+        '#scheme-scoped-colors',
+        '#custom-classes',
+        '#custom-css-sx',
+        '#semantic-sections--theme-mode',
+        '#edit-json-for-one-element'
+    ],
+    reusableComponents: [
+        '#promote',
+        '#insert-instances',
+        '#properties',
+        '#declare-them',
+        '#make-a-property-conditional',
+        '#use-them',
+        '#save-then-publish',
+        '#fill-them-in-per-page',
+        '#restyle-one-instance',
+        '#override-an-attribute-on-one-instance',
+        '#retrofit-duplicated-sections',
+        '#detach',
+        '#nesting',
+        '#used-by',
+        '#manage',
+        '#duplicate',
+        '#copy--paste-vs-reusable-components',
+        '#tips',
+        '#related'
+    ],
+    seo: [
+        '#per-screen-seo',
+        '#how-a-page-title-is-built',
+        '#variables-so-a-title-is-not-a-copy-of-your-site-name',
+        '#site-wide-defaults',
+        '#what-language-your-site-says-it-is-in',
+        '#search-engine-visibility',
+        '#the-whole-site',
+        '#a-single-page',
+        '#sitemap--robots',
+        '#one-index-one-file-per-section',
+        '#social-cards',
+        '#what-each-kind-of-page-emits',
+        '#structured-data',
+        '#ai-agents',
+        '#markdown-for-any-page',
+        '#llmstxt',
+        '#openapijson',
+        '#well-knownapi-catalog',
+        '#crawler-access',
+        '#analytics-integration',
+        '#related'
+    ],
+    textEditing: [
+        '#edit-inline',
+        '#committing',
+        '#inline-toolbar',
+        '#rich-text',
+        '#the-text-attribute',
+        '#text-field-read-only',
+        '#remove-formatting',
+        '#line-breaks',
+        '#bindings-in-text',
+        '#limits',
+        '#wrapped-outlines',
+        '#related'
+    ]
+};
+
+//# sourceMappingURL=docs-help.generated.js.map

package/src/lib/utils/docs-help.generated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/docs-help.generated.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n// GENERATED FILE — do not edit. Regenerate with:\n//   node tools/scripts/generate-docs-help.mjs\n// Source of truth: apps/docs/docs frontmatter + headings (AGL-602).\n\n// The besigner designer lib can't import the console constants, so it carries\n// its own generated subset of the docs help registry.\n\nexport const BESIGNER_DOCS = {\n  besigner: '/building-sites/besigner/overview',\n  bindings: '/building-sites/bindings/overview',\n  dragDropHierarchy: '/building-sites/besigner/drag-drop-hierarchy',\n  elementCatalog: '/building-sites/besigner/element-catalog',\n  interactions: '/building-sites/besigner/interactions-and-custom-html',\n  layouts: '/building-sites/screens-and-layouts/layouts',\n  repeat: '/building-sites/besigner/repeat',\n  responsiveStyling: '/building-sites/besigner/responsive-styling',\n  reusableComponents: '/building-sites/besigner/reusable-components',\n  seo: '/building-sites/seo/overview',\n  textEditing: '/building-sites/besigner/text-editing',\n} as const satisfies Record<string, string>\n\nexport type BesignerDocsKey = keyof typeof BESIGNER_DOCS\n\nexport const BESIGNER_DOCS_ANCHORS = {\n  besigner: ['#preview-vs-canvas', '#what-you-can-do', '#the-canvas', '#hierarchy-panel', '#the-inspector', '#inline-and-rich-text', '#reusable-components', '#editing-together', '#ai-in-the-canvas', '#related'],\n  bindings: ['#binding-tokens', '#rename-safe-id-tokens', '#insert-a-variable', '#token-pills', '#in-the-canvas-text-editor', '#site-details', '#typed-variables', '#no-code-functions', '#parameters-a-visitor-can-answer', '#a-calculator-you-lay-out', '#where-used--safety', '#workflows', '#related'],\n  dragDropHierarchy: ['#where-you-can-drag', '#what-a-drag-does', '#drop-zones-edges-vs-center', '#containers-vs-leaf-elements', '#containers-accept-children', '#leaf-elements-dont--dropping-on-one-makes-a-sibling', '#adding-a-new-element', '#when-a-drop-is-rejected', '#moving-an-element-without-dragging', '#multi-drag', '#tips', '#related'],\n  elementCatalog: ['#finding-an-element', '#element-search', '#element-detail', '#layout', '#the-pages-main-landmark', '#every-container-can-be-a-semantic-element', '#which-link-groups-want-to-be-a-nav', '#header-and-footer-for-your-site-chrome', '#grid', '#surface', '#accordion', '#navigation', '#where-a-link-opens', '#linking-to-a-collection-listing', '#link-container', '#tabs', '#tabs-that-go-to-another-screen', '#pagination', '#text', '#data-display', '#media', '#image-list', '#forms-input-commerce-members', '#related'],\n  interactions: ['#fluent-interactions', '#interactions-belong-to-the-page-they-are-on', '#plan-availability', '#pick-the-target-by-clicking', '#interaction-cookbook', '#scroll-to-element-step', '#play-video-step', '#analytics-event-step', '#analytics-event-name', '#analytics-event-parameters', '#analytics-event-delivery', '#custom-html-block', '#related'],\n  layouts: ['#what-a-layout-is', '#nested-layouts', '#layout-properties', '#duplicate', '#generate-a-layout-with-aglyn-ai', '#used-by', '#layouts-vs-reusable-components', '#related'],\n  repeat: ['#turn-it-on', '#what-repeats-the-element-or-whats-inside-it', '#fill-each-copy-in', '#see-the-copies-while-you-design', '#bound-what-renders', '#the-hundred-record-ceiling', '#what-you-cant-do', '#when-a-dataset-goes-away', '#related'],\n  responsiveStyling: ['#style-per-breakpoint', '#mute-a-style', '#interaction-states', '#you-can-see-the-state-while-you-style-it', '#fields-you-dont-touch-keep-inheriting', '#states-and-breakpoints-combine', '#focus-state', '#box-stylers', '#spacing-side-names', '#spacing-units', '#spacing-steps', '#spacing-custom-amounts', '#unit-px', '#unit-rem', '#unit-em', '#unit-percent', '#unit-ch', '#unit-viewport', '#unit-small-viewport', '#style-groups', '#borders-without-css', '#picking-a-font', '#gradient-backgrounds', '#visibility-per-device-band', '#scheme-scoped-colors', '#custom-classes', '#custom-css-sx', '#semantic-sections--theme-mode', '#edit-json-for-one-element'],\n  reusableComponents: ['#promote', '#insert-instances', '#properties', '#declare-them', '#make-a-property-conditional', '#use-them', '#save-then-publish', '#fill-them-in-per-page', '#restyle-one-instance', '#override-an-attribute-on-one-instance', '#retrofit-duplicated-sections', '#detach', '#nesting', '#used-by', '#manage', '#duplicate', '#copy--paste-vs-reusable-components', '#tips', '#related'],\n  seo: ['#per-screen-seo', '#how-a-page-title-is-built', '#variables-so-a-title-is-not-a-copy-of-your-site-name', '#site-wide-defaults', '#what-language-your-site-says-it-is-in', '#search-engine-visibility', '#the-whole-site', '#a-single-page', '#sitemap--robots', '#one-index-one-file-per-section', '#social-cards', '#what-each-kind-of-page-emits', '#structured-data', '#ai-agents', '#markdown-for-any-page', '#llmstxt', '#openapijson', '#well-knownapi-catalog', '#crawler-access', '#analytics-integration', '#related'],\n  textEditing: ['#edit-inline', '#committing', '#inline-toolbar', '#rich-text', '#the-text-attribute', '#text-field-read-only', '#remove-formatting', '#line-breaks', '#bindings-in-text', '#limits', '#wrapped-outlines', '#related'],\n} as const satisfies Partial<Record<BesignerDocsKey, readonly `#${string}`[]>>\n\ntype BesignerAnchorMap = typeof BESIGNER_DOCS_ANCHORS\n\n/** Valid heading anchors for a besigner docs page (`never` when none). */\nexport type BesignerDocsAnchor<K extends BesignerDocsKey> =\n  K extends keyof BesignerAnchorMap ? BesignerAnchorMap[K][number] : never\n"],"names":["BESIGNER_DOCS","besigner","bindings","dragDropHierarchy","elementCatalog","interactions","layouts","repeat","responsiveStyling","reusableComponents","seo","textEditing","BESIGNER_DOCS_ANCHORS"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD,iDAAiD;AACjD,8CAA8C;AAC9C,oEAAoE;AAEpE,8EAA8E;AAC9E,sDAAsD;AAEtD,OAAO,MAAMA,gBAAgB;IAC3BC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,SAAS;IACTC,QAAQ;IACRC,mBAAmB;IACnBC,oBAAoB;IACpBC,KAAK;IACLC,aAAa;AACf,EAA2C;AAI3C,OAAO,MAAMC,wBAAwB;IACnCX,UAAU;QAAC;QAAsB;QAAoB;QAAe;QAAoB;QAAkB;QAAyB;QAAwB;QAAqB;QAAqB;KAAW;IAChNC,UAAU;QAAC;QAAmB;QAA0B;QAAsB;QAAgB;QAA8B;QAAiB;QAAoB;QAAsB;QAAoC;QAA6B;QAAuB;QAAc;KAAW;IACxSC,mBAAmB;QAAC;QAAuB;QAAqB;QAA+B;QAAgC;QAA+B;QAAwD;QAAyB;QAA4B;QAAuC;QAAe;QAAS;KAAW;IACrVC,gBAAgB;QAAC;QAAuB;QAAmB;QAAmB;QAAW;QAA4B;QAA8C;QAAuC;QAA2C;QAAS;QAAY;QAAc;QAAe;QAAuB;QAAoC;QAAmB;QAAS;QAAmC;QAAe;QAAS;QAAiB;QAAU;QAAe;QAAiC;KAAW;IAC/gBC,cAAc;QAAC;QAAwB;QAAgD;QAAsB;QAAgC;QAAyB;QAA2B;QAAoB;QAAyB;QAAyB;QAA+B;QAA6B;QAAsB;KAAW;IACpWC,SAAS;QAAC;QAAqB;QAAmB;QAAsB;QAAc;QAAoC;QAAY;QAAmC;KAAW;IACpLC,QAAQ;QAAC;QAAe;QAAgD;QAAsB;QAAoC;QAAuB;QAA+B;QAAqB;QAA6B;KAAW;IACrPC,mBAAmB;QAAC;QAAyB;QAAiB;QAAuB;QAA6C;QAA0C;QAAmC;QAAgB;QAAgB;QAAuB;QAAkB;QAAkB;QAA2B;QAAY;QAAa;QAAY;QAAiB;QAAY;QAAkB;QAAwB;QAAiB;QAAwB;QAAmB;QAAyB;QAA+B;QAAyB;QAAmB;QAAkB;QAAkC;KAA6B;IAClqBC,oBAAoB;QAAC;QAAY;QAAqB;QAAe;QAAiB;QAAgC;QAAa;QAAsB;QAA0B;QAAyB;QAA0C;QAAiC;QAAW;QAAY;QAAY;QAAW;QAAc;QAAuC;QAAS;KAAW;IAC9YC,KAAK;QAAC;QAAmB;QAA8B;QAAyD;QAAuB;QAA0C;QAA6B;QAAmB;QAAkB;QAAoB;QAAmC;QAAiB;QAAiC;QAAoB;QAAc;QAA0B;QAAY;QAAgB;QAA0B;QAAmB;QAA0B;KAAW;IACtgBC,aAAa;QAAC;QAAgB;QAAe;QAAmB;QAAc;QAAuB;QAAyB;QAAsB;QAAgB;QAAqB;QAAW;QAAqB;KAAW;AACtO,EAA8E"}

package/src/lib/utils/docs-help.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ // BESIGNER_DOCS + anchor types are GENERATED from the docs site — see
+// docs/DOCS_HELP_REGISTRY.md. This lib can't import the console constants, so
+// it carries its own subset. Regenerate with:
+//   node tools/scripts/generate-docs-help.mjs
+import { BESIGNER_DOCS } from "./docs-help.generated.js";
+export { BESIGNER_DOCS } from "./docs-help.generated.js";
+// Same env override + fallback as the console's constants/docs-links.ts —
+// this lib can't import app code, so the base URL is resolved here too.
+const DOCS_BASE_URL = // Dot notation (AGL-2037): this is a designer lib that ships in the client
+// bundle, and the bracket form is never substituted there — so every help
+// link pointed at Aglyn's docs regardless of what an operator configured.
+//
+// Canonical name first, older name as a fallback (AGL-2186) — see
+// apps/console/constants/docs-links.ts for why there were two.
+(process.env.NEXT_PUBLIC_DOCS_ORIGIN || process.env.NEXT_PUBLIC_AGLYN_DOCS_URL || 'https://docs.aglyn.com').replace(/\/+$/, '');
+/** Absolute docs URL for a besigner docs page, with an optional heading anchor
+ * constrained to that page's real headings (e.g.
+ * `besignerDocsUrl('responsiveStyling', '#box-stylers')`). */ export function besignerDocsUrl(page, anchor) {
+    return `${DOCS_BASE_URL}${BESIGNER_DOCS[page]}${anchor != null ? anchor : ''}`;
+}
+
+//# sourceMappingURL=docs-help.js.map

package/src/lib/utils/docs-help.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/docs-help.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// BESIGNER_DOCS + anchor types are GENERATED from the docs site — see\n// docs/DOCS_HELP_REGISTRY.md. This lib can't import the console constants, so\n// it carries its own subset. Regenerate with:\n//   node tools/scripts/generate-docs-help.mjs\nimport {\n  BESIGNER_DOCS,\n  type BesignerDocsAnchor,\n  type BesignerDocsKey,\n} from './docs-help.generated'\n\nexport {\n  BESIGNER_DOCS,\n  type BesignerDocsAnchor,\n  type BesignerDocsKey,\n} from './docs-help.generated'\n\n// Same env override + fallback as the console's constants/docs-links.ts —\n// this lib can't import app code, so the base URL is resolved here too.\nconst DOCS_BASE_URL = (\n  // Dot notation (AGL-2037): this is a designer lib that ships in the client\n  // bundle, and the bracket form is never substituted there — so every help\n  // link pointed at Aglyn's docs regardless of what an operator configured.\n  //\n  // Canonical name first, older name as a fallback (AGL-2186) — see\n  // apps/console/constants/docs-links.ts for why there were two.\n  process.env.NEXT_PUBLIC_DOCS_ORIGIN ||\n  process.env.NEXT_PUBLIC_AGLYN_DOCS_URL ||\n  'https://docs.aglyn.com'\n).replace(/\\/+$/, '')\n\n/** Absolute docs URL for a besigner docs page, with an optional heading anchor\n * constrained to that page's real headings (e.g.\n * `besignerDocsUrl('responsiveStyling', '#box-stylers')`). */\nexport function besignerDocsUrl<K extends BesignerDocsKey>(\n  page: K,\n  anchor?: BesignerDocsAnchor<K>,\n): string {\n  return `${DOCS_BASE_URL}${BESIGNER_DOCS[page]}${anchor ?? ''}`\n}\n"],"names":["BESIGNER_DOCS","DOCS_BASE_URL","process","env","NEXT_PUBLIC_DOCS_ORIGIN","NEXT_PUBLIC_AGLYN_DOCS_URL","replace","besignerDocsUrl","page","anchor"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,sEAAsE;AACtE,8EAA8E;AAC9E,8CAA8C;AAC9C,8CAA8C;AAC9C,SACEA,aAAa,QAGR,2BAAuB;AAE9B,SACEA,aAAa,QAGR,2BAAuB;AAE9B,0EAA0E;AAC1E,wEAAwE;AACxE,MAAMC,gBAAgB,AACpB,2EAA2E;AAC3E,0EAA0E;AAC1E,0EAA0E;AAC1E,EAAE;AACF,kEAAkE;AAClE,+DAA+D;AAC/DC,CAAAA,QAAQC,GAAG,CAACC,uBAAuB,IACnCF,QAAQC,GAAG,CAACE,0BAA0B,IACtC,wBAAuB,EACvBC,OAAO,CAAC,QAAQ;AAElB;;4DAE4D,GAC5D,OAAO,SAASC,gBACdC,IAAO,EACPC,MAA8B;IAE9B,OAAO,GAAGR,gBAAgBD,aAAa,CAACQ,KAAK,GAAGC,iBAAAA,SAAU,IAAI;AAChE"}