{"version":3,"file":"storybook.es.mjs","names":[],"sources":["../src/storybook/unsafe-html.ts","../src/storybook/story-html.ts","../src/storybook/story-svg.ts","../src/storybook/helpers.ts"],"sourcesContent":["/**\n * `unsafeHtml()` — opt-in sanitizer bypass marker for {@link storyHtml}.\n *\n * @module bquery/storybook\n */\n\n/** @internal */\nexport const UNSAFE_HTML_PLACEHOLDER_PREFIX = '\\u0001BQ_UNSAFE_HTML_';\n/** @internal */\nexport const UNSAFE_HTML_PLACEHOLDER_SUFFIX = '_END\\u0001';\n\n/** @internal */\nconst UNSAFE_HTML_BRAND: unique symbol = Symbol('bquery.storybook.unsafeHtml');\n\n/**\n * Marker returned by {@link unsafeHtml}. Identifies an interpolated story\n * value that should bypass the {@link storyHtml} sanitizer.\n */\nexport interface UnsafeHtmlMarker {\n /** @internal */\n readonly [UNSAFE_HTML_BRAND]: true;\n /** The raw HTML that will be re-inserted after sanitization. */\n readonly value: string;\n}\n\nlet warnedOnce = false;\n\n/** @internal */\nexport const createUnsafeHtmlMarker = (value: string): UnsafeHtmlMarker => ({\n [UNSAFE_HTML_BRAND]: true,\n value,\n});\n\nconst emitDevWarning = (): void => {\n if (warnedOnce) return;\n warnedOnce = true;\n if (typeof console === 'undefined' || typeof console.warn !== 'function') return;\n console.warn(\n '[bquery/storybook] unsafeHtml() bypasses sanitization for the wrapped value. ' +\n 'Only use it with trusted, author-controlled markup.'\n );\n};\n\n/**\n * Wraps an HTML fragment so {@link storyHtml} re-inserts it verbatim after\n * sanitizing the surrounding template. The wrapped value is **not** sanitized.\n *\n * @remarks\n * Mirrors `lit-html`'s `unsafeHTML` directive. Only use with trusted,\n * author-controlled markup — never with user-supplied input.\n *\n * @param value - The HTML fragment to insert verbatim\n * @returns An opaque marker recognised by {@link storyHtml}\n *\n * @example\n * ```ts\n * import { storyHtml, unsafeHtml } from '@bquery/bquery/storybook';\n *\n * const trustedSvg = '';\n * storyHtml`${unsafeHtml(trustedSvg)}`;\n * ```\n */\nexport const unsafeHtml = (value: string): UnsafeHtmlMarker => {\n emitDevWarning();\n return createUnsafeHtmlMarker(value);\n};\n\n/**\n * Type guard for {@link UnsafeHtmlMarker}.\n * @internal\n */\nexport const isUnsafeHtmlMarker = (value: unknown): value is UnsafeHtmlMarker => {\n if (value === null || typeof value !== 'object') return false;\n return (value as { [UNSAFE_HTML_BRAND]?: true })[UNSAFE_HTML_BRAND] === true;\n};\n","/**\n * Storybook template helpers for authoring bQuery component stories.\n *\n * `storyHtml` mirrors bQuery's string-based `html` tag while adding support for\n * Storybook-friendly boolean attribute shorthand (`?disabled=${true}`).\n *\n * @module bquery/storybook\n */\n\nimport { sanitizeHtml } from '../security/sanitize';\nimport { isUnsafeHtmlMarker, UNSAFE_HTML_PLACEHOLDER_PREFIX, UNSAFE_HTML_PLACEHOLDER_SUFFIX } from './unsafe-html';\nimport type { UnsafeHtmlMarker } from './unsafe-html';\n\n/**\n * A value that can be interpolated into a {@link storyHtml} template.\n *\n * Primitive values are coerced to strings; arrays are flattened; functions are\n * invoked and their return values are recursively resolved. {@link unsafeHtml}\n * markers bypass sanitization for the wrapped fragment.\n */\nexport type StoryValue =\n | string\n | number\n | boolean\n | null\n | undefined\n | UnsafeHtmlMarker\n | StoryValue[]\n | (() => StoryValue);\n\n/**\n * Marks template interpolation boundaries while inferring sanitizer allowlists.\n * Uses the null character because authored HTML/template strings should not\n * contain it, making it a safe internal sentinel during parsing.\n */\nconst INTERPOLATION_BOUNDARY_MARKER = '\\u0000';\n\nconst isWhitespace = (value: string): boolean => {\n return value === ' ' || value === '\\t' || value === '\\n' || value === '\\r' || value === '\\f';\n};\n\n/**\n * Detects interpolation boundaries embedded into joined template string fragments.\n */\nconst isInterpolationBoundaryMarker = (value: string): boolean =>\n value === INTERPOLATION_BOUNDARY_MARKER;\n\nconst isAttributeSeparator = (value: string): boolean => {\n return isWhitespace(value) || isInterpolationBoundaryMarker(value);\n};\n\nconst isAsciiLetter = (value: string): boolean => {\n const code = value.charCodeAt(0);\n\n return (code >= 65 && code <= 90) || (code >= 97 && code <= 122);\n};\n\nconst isAttributeNameStart = (value: string): boolean => isAsciiLetter(value);\n\nconst isAttributeNameChar = (value: string): boolean => {\n const code = value.charCodeAt(0);\n\n return (\n isAsciiLetter(value) ||\n (code >= 48 && code <= 57) ||\n value === ':' ||\n value === '.' ||\n value === '_' ||\n value === '-'\n );\n};\n\nconst isQuoteChar = (value: string): boolean => value === '\"' || value === \"'\";\n\nconst isTagNameChar = (value: string): boolean => {\n const code = value.charCodeAt(0);\n\n return (\n isAsciiLetter(value) ||\n (code >= 48 && code <= 57) ||\n value === '.' ||\n value === '_' ||\n value === '-'\n );\n};\n\nconst hasLineBreak = (value: string): boolean => {\n for (let index = 0; index < value.length; index += 1) {\n if (value[index] === '\\n' || value[index] === '\\r') {\n return true;\n }\n }\n\n return false;\n};\n\nconst getTagNameEnd = (fragment: string): number => {\n let index = 0;\n\n while (\n index < fragment.length &&\n !isAttributeSeparator(fragment[index]) &&\n fragment[index] !== '/' &&\n fragment[index] !== '>'\n ) {\n index += 1;\n }\n\n return index;\n};\n\nconst isCustomElementTagName = (tagName: string): boolean => {\n if (!tagName.includes('-') || !isAsciiLetter(tagName[0])) {\n return false;\n }\n\n const last = tagName[tagName.length - 1];\n const code = last.charCodeAt(0);\n\n return isAsciiLetter(last) || (code >= 48 && code <= 57) || last === '.' || last === '_';\n};\n\nconst isAutoAllowedStoryAttribute = (attributeName: string): boolean => {\n return attributeName !== 'style' && !attributeName.startsWith('on');\n};\n\nconst findBooleanAttributeSuffix = (\n part: string\n): { attribute: string; basePart: string; spacing: string } | null => {\n let index = part.length - 1;\n\n while (index >= 0 && isWhitespace(part[index])) {\n index -= 1;\n }\n\n if (index < 0 || part[index] !== '=') {\n return null;\n }\n\n index -= 1;\n\n while (index >= 0 && isWhitespace(part[index])) {\n index -= 1;\n }\n\n const attributeEnd = index;\n\n while (\n index >= 0 &&\n !isWhitespace(part[index]) &&\n part[index] !== '?' &&\n part[index] !== '=' &&\n part[index] !== '/' &&\n part[index] !== '>'\n ) {\n index -= 1;\n }\n\n const attributeStart = index + 1;\n\n if (attributeStart > attributeEnd || part[index] !== '?') {\n return null;\n }\n\n const questionMarkIndex = index;\n let spacingStart = questionMarkIndex;\n\n while (spacingStart > 0 && isWhitespace(part[spacingStart - 1])) {\n spacingStart -= 1;\n }\n\n return {\n attribute: part.slice(attributeStart, attributeEnd + 1),\n basePart: part.slice(0, spacingStart),\n spacing: part.slice(spacingStart, questionMarkIndex),\n };\n};\n\nconst collectOpeningTagFragments = (template: string): string[] => {\n const fragments: string[] = [];\n let index = 0;\n\n while (index < template.length) {\n if (template[index] !== '<') {\n index += 1;\n continue;\n }\n\n const next = template[index + 1];\n\n if (!next || next === '/' || next === '!' || next === '?') {\n index += 1;\n continue;\n }\n\n let cursor = index + 1;\n\n if (!isAsciiLetter(template[cursor])) {\n index += 1;\n continue;\n }\n\n while (cursor < template.length && isTagNameChar(template[cursor])) {\n cursor += 1;\n }\n\n const tagStart = index + 1;\n const tagName = template.slice(tagStart, cursor);\n\n if (!tagName) {\n index += 1;\n continue;\n }\n\n let inQuote: '\"' | \"'\" | null = null;\n let tagEnd = cursor;\n\n while (tagEnd < template.length) {\n const char = template[tagEnd];\n\n if (inQuote) {\n if (char === inQuote) {\n inQuote = null;\n }\n\n tagEnd += 1;\n continue;\n }\n\n if (char === '\"' || char === \"'\") {\n inQuote = char;\n tagEnd += 1;\n continue;\n }\n\n if (char === '>') {\n fragments.push(template.slice(index + 1, tagEnd));\n tagEnd += 1;\n break;\n }\n\n tagEnd += 1;\n }\n\n index = tagEnd;\n }\n\n return fragments;\n};\n\n/**\n * Consumes a literal HTML attribute value starting at the given index.\n *\n * Returns the position immediately after a quoted or unquoted value. When the\n * current position reaches an interpolation boundary (optionally after\n * whitespace), the returned index advances past the boundary marker so\n * interpolated attributes do not swallow following authored attributes during\n * sanitizer allowlist inference.\n *\n * @param fragment - The opening-tag fragment currently being scanned\n * @param index - The position immediately after the `=` sign\n * @returns The index after the consumed literal value, or just past an\n * interpolation boundary when no literal value should be consumed from the\n * current template fragment.\n */\nconst skipAttributeValue = (fragment: string, index: number): number => {\n if (index >= fragment.length) {\n return index;\n }\n\n let cursor = index;\n\n if (isInterpolationBoundaryMarker(fragment[cursor])) {\n return cursor + 1;\n }\n\n while (cursor < fragment.length && isWhitespace(fragment[cursor])) {\n cursor += 1;\n }\n\n if (cursor >= fragment.length) {\n return cursor;\n }\n\n if (isInterpolationBoundaryMarker(fragment[cursor])) {\n return cursor + 1;\n }\n\n const quote = fragment[cursor];\n\n if (isQuoteChar(quote)) {\n cursor += 1;\n\n while (cursor < fragment.length) {\n if (fragment[cursor] === quote) {\n return cursor + 1;\n }\n\n cursor += 1;\n }\n\n return cursor;\n }\n\n while (\n cursor < fragment.length &&\n !isAttributeSeparator(fragment[cursor]) &&\n fragment[cursor] !== '/' &&\n fragment[cursor] !== '>'\n ) {\n cursor += 1;\n }\n\n if (cursor < fragment.length && isInterpolationBoundaryMarker(fragment[cursor])) {\n return cursor + 1;\n }\n\n return cursor;\n};\n\nconst collectAttributesFromTagFragment = (\n fragment: string,\n allowAttributes: Set,\n autoAllowAttributes: boolean\n): void => {\n let index = 0;\n\n while (index < fragment.length && !isAttributeSeparator(fragment[index])) {\n index += 1;\n }\n\n while (index < fragment.length) {\n while (index < fragment.length && isAttributeSeparator(fragment[index])) {\n index += 1;\n }\n\n if (index >= fragment.length || fragment[index] === '/') {\n return;\n }\n\n // Skip standalone colons (e.g. namespace prefixes or framework-specific bindings)\n if (fragment[index] === ':') {\n index += 1;\n continue;\n }\n\n const hasBooleanPrefix = fragment[index] === '?';\n\n if (hasBooleanPrefix) {\n index += 1;\n }\n\n if (index >= fragment.length || !isAttributeNameStart(fragment[index])) {\n // Skip unrecognised character to avoid an infinite loop\n index += 1;\n continue;\n }\n\n const nameStart = index;\n\n index += 1;\n\n while (index < fragment.length && isAttributeNameChar(fragment[index])) {\n index += 1;\n }\n\n const attributeName = fragment.slice(nameStart, index).toLowerCase();\n\n while (index < fragment.length && isAttributeSeparator(fragment[index])) {\n index += 1;\n }\n\n if (index < fragment.length && fragment[index] === '=') {\n if (autoAllowAttributes && isAutoAllowedStoryAttribute(attributeName)) {\n allowAttributes.add(attributeName);\n }\n index = skipAttributeValue(fragment, index + 1);\n continue;\n }\n\n if (hasBooleanPrefix && autoAllowAttributes && isAutoAllowedStoryAttribute(attributeName)) {\n allowAttributes.add(attributeName);\n }\n }\n};\n\nconst collectTemplateSanitizeOptions = (strings: TemplateStringsArray) => {\n const template = strings.join(INTERPOLATION_BOUNDARY_MARKER);\n const allowTags = new Set();\n const allowAttributes = new Set();\n\n for (const fragment of collectOpeningTagFragments(template)) {\n const tagName = fragment.slice(0, getTagNameEnd(fragment)).toLowerCase();\n const isCustomElement = isCustomElementTagName(tagName);\n\n if (isCustomElement) {\n allowTags.add(tagName);\n }\n\n collectAttributesFromTagFragment(fragment, allowAttributes, isCustomElement);\n }\n\n return {\n allowTags: Array.from(allowTags),\n allowAttributes: Array.from(allowAttributes),\n };\n};\n\nconst resolveStoryValue = (value: StoryValue, unsafeFragments?: string[]): string => {\n if (value == null) {\n return '';\n }\n\n if (isUnsafeHtmlMarker(value)) {\n if (!unsafeFragments) {\n // Outside of storyHtml (e.g. in `when()`), resolve to the raw value so\n // callers can compose unsafe markers freely. The marker only carries\n // semantic weight when consumed by storyHtml itself.\n return value.value;\n }\n const placeholder = `${UNSAFE_HTML_PLACEHOLDER_PREFIX}${unsafeFragments.length}${UNSAFE_HTML_PLACEHOLDER_SUFFIX}`;\n unsafeFragments.push(value.value);\n return placeholder;\n }\n\n if (Array.isArray(value)) {\n return value.map((item) => resolveStoryValue(item, unsafeFragments)).join('');\n }\n\n if (typeof value === 'function') {\n return resolveStoryValue(value(), unsafeFragments);\n }\n\n return String(value);\n};\n\nconst resolveBooleanStoryValue = (value: StoryValue): boolean => {\n if (value == null) {\n return false;\n }\n\n if (isUnsafeHtmlMarker(value)) {\n return Boolean(value.value);\n }\n\n if (typeof value === 'function') {\n return resolveBooleanStoryValue(value());\n }\n\n if (Array.isArray(value)) {\n return Boolean(resolveStoryValue(value));\n }\n\n if (typeof value === 'boolean') {\n return value;\n }\n\n return Boolean(value);\n};\n\n/**\n * Tagged template literal for Storybook render functions.\n *\n * Supports boolean attribute shorthand compatible with Storybook's string\n * renderer:\n *\n * ```ts\n * storyHtml`Save`;\n * // => 'Save'\n * ```\n *\n * @param strings - Template literal string parts\n * @param values - Interpolated values\n * @returns HTML string compatible with `@storybook/web-components`\n */\nexport const storyHtml = (strings: TemplateStringsArray, ...values: StoryValue[]): string => {\n const unsafeFragments: string[] = [];\n const rendered = strings.reduce((acc, part, index) => {\n if (index >= values.length) {\n return `${acc}${part}`;\n }\n\n const booleanAttributeMatch = findBooleanAttributeSuffix(part);\n\n if (booleanAttributeMatch) {\n const { attribute, basePart, spacing } = booleanAttributeMatch;\n const preservedSpacing = hasLineBreak(spacing) ? spacing : '';\n const isEnabled = resolveBooleanStoryValue(values[index]);\n\n return `${acc}${basePart}${isEnabled ? `${spacing}${attribute}` : preservedSpacing}`;\n }\n\n return `${acc}${part}${resolveStoryValue(values[index], unsafeFragments)}`;\n }, '');\n\n const sanitized = sanitizeHtml(rendered, collectTemplateSanitizeOptions(strings));\n\n if (unsafeFragments.length === 0) {\n return sanitized;\n }\n\n // Re-insert `unsafeHtml()` fragments verbatim after sanitization. Callers\n // explicitly opted out of sanitization for these values; their security is\n // their responsibility.\n return sanitized.replace(\n new RegExp(\n `${escapeRegExp(UNSAFE_HTML_PLACEHOLDER_PREFIX)}(\\\\d+)${escapeRegExp(UNSAFE_HTML_PLACEHOLDER_SUFFIX)}`,\n 'g'\n ),\n (_match, indexStr: string) => {\n const fragmentIndex = Number.parseInt(indexStr, 10);\n return unsafeFragments[fragmentIndex] ?? '';\n }\n );\n};\n\nconst escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\n/**\n * Conditionally render a value or template fragment.\n *\n * @param condition - Condition that controls rendering\n * @param truthyValue - Value or callback rendered when the condition is truthy\n * @param falsyValue - Optional value or callback rendered when the condition is falsy\n * @returns Rendered string fragment, or an empty string when the condition is\n * falsy and no fallback is provided\n */\nexport const when = (\n condition: unknown,\n truthyValue: StoryValue,\n falsyValue?: StoryValue\n): string => {\n return resolveStoryValue(condition ? truthyValue : falsyValue);\n};\n","/**\n * `storySvg` — sibling of {@link storyHtml} for authoring SVG-rooted stories.\n *\n * @module bquery/storybook\n */\n\nimport { escapeHtml } from '../security/sanitize';\nimport type { StoryValue } from './story-html';\nimport { isUnsafeHtmlMarker } from './unsafe-html';\n\nconst resolveSvgValue = (value: StoryValue): string => {\n if (value === null || value === undefined) return '';\n if (isUnsafeHtmlMarker(value)) {\n // `unsafeHtml()` is an explicit opt-in to bypass escaping. Authors take\n // responsibility for the contents of the marker.\n return value.value;\n }\n if (Array.isArray(value)) return value.map(resolveSvgValue).join('');\n if (typeof value === 'function') return resolveSvgValue(value());\n return escapeHtml(String(value));\n};\n\n/**\n * Tagged template literal for authoring SVG-rooted Storybook stories.\n *\n * @remarks\n * Unlike {@link storyHtml}, `storySvg` does not run the SVG output through the\n * HTML sanitizer (the HTML sanitizer blocks `