@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/token-text-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/token-text-field.component.tsx"],"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 {\n  FormFieldGrid,\n  type FormFieldGridProps,\n  useFieldApi,\n  validationError,\n  type ExtendedFieldMeta,\n} from '@aglyn/shared-ui-jsx-forms'\nimport { mdiImageSearch } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  Box,\n  IconButton,\n  InputAdornment,\n  TextField as MuiTextField,\n} from '@mui/material'\nimport { useContext, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type ClipboardEvent, type FocusEvent, type FormEvent, type KeyboardEvent, type MouseEvent, type MutableRefObject, type ReactNode } from 'react'\n\nimport MediaPickerContext from '../contexts/media-picker-context'\nimport type { BindingOption } from '../contexts/binding-picker-context'\nimport {\n  readTokenSegmentsFromDom,\n  selectionUnitsWithin,\n  setSelectionUnits,\n  TOKEN_PILL_ATTR,\n} from '../utils/token-editable-dom'\nimport {\n  hasUnmaterializedTokens,\n  parseTokenSegments,\n  serializeTokenSegments,\n  spliceSegmentsAtUnits,\n  textSegment,\n  tokenSegment,\n  resolveTokenLabel,\n  type TokenLabelContext,\n  type TokenSegment,\n} from '../utils/token-segments'\nimport {\n  InsertTokenAdornment,\n  InsertTokenMenu,\n} from './insert-token-menu.component'\nimport {\n  TokenPill,\n  TokenPillPopover,\n  tokenPillContainerSx,\n} from './token-pill.component'\n\n/**\n * TokenTextField (AGL-586): the attributes-panel editor for token-capable\n * free-text attributes. A contentEditable surface styled as a MUI\n * TextField renders the value as plain text plus atomic {@link TokenPill}\n * badges — users see resolved NAMES while the serialized value (what\n * react-final-form holds and the node stores) keeps the raw id-based\n * `{{...}}` grammar. Typing edits text natively; pills are clickable to\n * replace or remove; the {x} adornment inserts at the caret (AGL-583).\n *\n * Model/DOM contract (mirrors the AGL-582 markdown editor): the segment\n * model is source of truth ONLY at version bumps. Between bumps the\n * browser owns the DOM — every `input` event silently syncs the model and\n * emits through `input.onChange`, so the AGL-567 debounced commit treats\n * pill edits exactly like keystrokes. Structural edits (insert/replace/\n * remove pill, paste, Enter-newline) re-render from the model and restore\n * the selection from unit offsets (text char = 1 unit, pill = 1 unit).\n *\n * Raw `{{...}}` typed by hand materializes into a pill on BLUR, not per\n * keystroke: materializing mid-typing would re-render under the caret and\n * fight the IME/undo stack, while on blur there is no caret to disturb.\n *\n * Undo: native browser undo survives for plain typing runs (no re-render\n * happens between keystrokes), but any pill materialization/insert/remove\n * re-renders the surface and truncates the native undo stack — the same\n * trade the markdown editor makes, without its custom history (the canvas\n * model keeps its own undo at commit granularity, AGL-567).\n */\n\n/** Mapper key for the attributes form (editor-internal, never persisted). */\nexport const TOKEN_TEXT_FIELD_COMPONENT = 'aglyn-token-text-field'\n\n/** Imperative surface ops the field chrome (menus) drives. */\nexport interface TokenEditableHandle {\n  /** Current selection in unit offsets, or null when unfocused/outside. */\n  captureSelection(): { start: number; end: number } | null\n  /** Splices a token at the captured units (null capture appends). */\n  insertToken(token: string, capture: { start: number; end: number } | null): void\n  /** Swaps the nth token segment for a new token, in place. */\n  replaceTokenAt(tokenIndex: number, token: string): void\n  /** Deletes the nth token segment from the value. */\n  removeTokenAt(tokenIndex: number): void\n}\n\ninterface TokenEditableInputProps {\n  /** Serialized field value (raw token grammar). */\n  /** Typed loosely on purpose: a schema `initialValue` can be a number. */\n  tokenValue: string | number | null\n  onTokenValueChange: (next: string) => void\n  multiline?: boolean\n  labelContextRef: MutableRefObject<TokenLabelContext>\n  handleRef: MutableRefObject<TokenEditableHandle | null>\n  onPillClick: (anchor: HTMLElement, tokenIndex: number, token: string) => void\n  // Injected by MUI InputBase:\n  className?: string\n  disabled?: boolean\n  placeholder?: string\n  onFocus?: (event: FocusEvent<HTMLDivElement>) => void\n  onBlur?: (event: FocusEvent<HTMLDivElement>) => void\n  'aria-invalid'?: boolean\n  'aria-describedby'?: string\n}\n\nconst renderSegments = (\n  segments: TokenSegment[],\n  labelContext: TokenLabelContext,\n): ReactNode =>\n  segments.map((segment, index) =>\n    segment.type === 'token' ? (\n      <TokenPill\n        key={index}\n        token={segment.token ?? segment.value}\n        resolved={resolveTokenLabel(segment.token ?? segment.value, labelContext)}\n      />\n    ) : (\n      segment.value\n    ),\n  )\n\n/**\n * The contentEditable input rendered INSIDE MUI's InputBase (via\n * `inputComponent`), so the border, label notch, focus ring and disabled\n * styling all come from the real TextField machinery.\n */\n/**\n * Exported for the AGL-2486 regression test only — a numeric model value must\n * not spin this into \"Maximum update depth exceeded\". `TokenTextField` needs a\n * `<Form>` context (`useFieldApi`), so the loop cannot be reached through it\n * without standing up react-form-renderer around a bug that lives entirely in\n * this inner component.\n */\nexport const TokenEditableInput = memo(\n  forwardRef<unknown, TokenEditableInputProps>(function TokenEditableInput(\n    props,\n    ref,\n  ) {\n    const {\n      tokenValue: rawTokenValue,\n      onTokenValueChange,\n      multiline,\n      labelContextRef,\n      handleRef,\n      onPillClick,\n      className,\n      disabled,\n      placeholder,\n      onFocus,\n      onBlur,\n      ...rest\n    } = props\n    /**\n     * The model value as TEXT, whatever the schema actually stored.\n     *\n     * `tokenValue` is typed `string`, but `strictNullChecks` is off repo-wide\n     * and a schema's `initialValue` reaches this untouched — so a numeric\n     * default arrives as a NUMBER. That was not hypothetical: the element\n     * animation fields (AGL-2486) declare `TEXT_FIELD` with\n     * `ANIMATION_DEFAULT_DURATION_MS = 600` and `ANIMATION_DEFAULT_DELAY_MS =\n     * 0`, and the attributes memo rewrites TEXT_FIELD to this editor.\n     *\n     * The damage was an INFINITE RENDER LOOP, not a mis-render. `emit`\n     * serializes segments and stores a STRING in `lastEmittedRef`, and the\n     * sync effect below skips on `tokenValue === lastEmittedRef.current`.\n     * `600 === '600'` is false, so the guard never held: every render\n     * re-parsed the model and bumped `version`, and React eventually threw\n     * \"Maximum update depth exceeded\".\n     *\n     * Coerced at the boundary rather than fixed at the one call site, because\n     * the next numeric default would reintroduce it. `null`/`undefined`\n     * become `''` explicitly — `String(null)` is the string \"null\", which\n     * would render the word in the box, and `0` must survive as \"0\" rather\n     * than being swallowed as falsy.\n     */\n    const tokenValue =\n      typeof rawTokenValue === 'string'\n        ? rawTokenValue\n        : rawTokenValue === null || rawTokenValue === undefined\n          ? ''\n          : String(rawTokenValue)\n\n    const editableRef = useRef<HTMLDivElement | null>(null)\n    const segmentsRef = useRef<TokenSegment[] | null>(null)\n    if (segmentsRef.current == null) {\n      segmentsRef.current = parseTokenSegments(tokenValue)\n    }\n    const lastEmittedRef = useRef(tokenValue)\n    const pendingSelectionRef = useRef<{ start: number; end: number } | null>(\n      null,\n    )\n    const [version, setVersion] = useState(0)\n\n    // MUI focuses the input through `inputRef` on label clicks; `.value`\n    // keeps InputBase's filled-state probe from reading `undefined`.\n    useImperativeHandle(ref, () => ({\n      focus: () => editableRef.current?.focus(),\n      get value() {\n        return lastEmittedRef.current\n      },\n      node: editableRef.current,\n    }))\n\n    // External value changes (form reset, AI rewrite, undo at canvas\n    // level): anything this surface didn't just emit re-parses the model.\n    useEffect(() => {\n      if (tokenValue === lastEmittedRef.current) return\n      segmentsRef.current = parseTokenSegments(tokenValue)\n      lastEmittedRef.current = tokenValue\n      pendingSelectionRef.current = null\n      setVersion((current) => current + 1)\n    }, [tokenValue])\n\n    const emit = useCallback(\n      (segments: TokenSegment[]) => {\n        segmentsRef.current = segments\n        let serialized = serializeTokenSegments(segments)\n        // An emptied contentEditable leaves a stray <br> behind in most\n        // browsers — a value that is exactly one newline means \"empty\".\n        if (serialized === '\\n') serialized = ''\n        lastEmittedRef.current = serialized\n        onTokenValueChange(serialized)\n        return serialized\n      },\n      [onTokenValueChange],\n    )\n\n    /** Structural edit: re-render from the model + restore the caret. */\n    const commitStructural = useCallback(\n      (\n        segments: TokenSegment[],\n        selection: { start: number; end: number } | null,\n      ) => {\n        emit(segments)\n        pendingSelectionRef.current = selection\n        setVersion((current) => current + 1)\n      },\n      [emit],\n    )\n\n    useLayoutEffect(() => {\n      const pending = pendingSelectionRef.current\n      if (!pending || !editableRef.current) return\n      pendingSelectionRef.current = null\n      editableRef.current.focus()\n      setSelectionUnits(editableRef.current, pending.start, pending.end)\n    }, [version])\n\n    // Plain typing: silent model sync — no re-render, the DOM is already\n    // correct and the caret must not move (AGL-582 pattern).\n    const handleInput = useCallback(\n      (_event: FormEvent<HTMLDivElement>) => {\n        if (!editableRef.current) return\n        emit(readTokenSegmentsFromDom(editableRef.current))\n      },\n      [emit],\n    )\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.key !== 'Enter' || event.nativeEvent.isComposing) return\n        // Single-line surfaces swallow Enter (a contentEditable would\n        // otherwise fork the DOM into divs); multiline inserts a literal\n        // newline as a model edit so the DOM stays flat text + pills.\n        event.preventDefault()\n        if (!multiline || !editableRef.current) return\n        const current = readTokenSegmentsFromDom(editableRef.current)\n        const selection = selectionUnitsWithin(editableRef.current)\n        const { segments, caretUnit } = spliceSegmentsAtUnits(\n          current,\n          [textSegment('\\n')],\n          selection?.start ?? null,\n          selection?.end ?? null,\n        )\n        commitStructural(segments, { start: caretUnit, end: caretUnit })\n      },\n      [commitStructural, multiline],\n    )\n\n    // Paste is plain-text only; pasted `{{...}}` materializes immediately\n    // (the paste is already a structural, selection-restoring edit).\n    const handlePaste = useCallback(\n      (event: ClipboardEvent<HTMLDivElement>) => {\n        event.preventDefault()\n        if (!editableRef.current) return\n        const raw = event.clipboardData?.getData('text/plain') ?? ''\n        if (!raw) return\n        const text = multiline ? raw : raw.replace(/\\s*\\n+\\s*/g, ' ')\n        const current = readTokenSegmentsFromDom(editableRef.current)\n        const selection = selectionUnitsWithin(editableRef.current)\n        const { segments, caretUnit } = spliceSegmentsAtUnits(\n          current,\n          parseTokenSegments(text),\n          selection?.start ?? null,\n          selection?.end ?? null,\n        )\n        commitStructural(segments, { start: caretUnit, end: caretUnit })\n      },\n      [commitStructural, multiline],\n    )\n\n    // Raw `{{...}}` typed by hand becomes a pill when focus leaves — the\n    // least caret-disruptive point (see the component doc block).\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onBlur?.(event)\n        const segments = segmentsRef.current ?? []\n        if (!hasUnmaterializedTokens(segments)) return\n        commitStructural(\n          parseTokenSegments(serializeTokenSegments(segments)),\n          null,\n        )\n      },\n      [commitStructural, onBlur],\n    )\n\n    // Pill clicks bubble to the surface (delegation keeps pills dumb).\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        const pill = (event.target as HTMLElement).closest?.(\n          `[${TOKEN_PILL_ATTR}]`,\n        ) as HTMLElement | null\n        if (!pill || !editableRef.current?.contains(pill)) return\n        const pills = Array.from(\n          editableRef.current.querySelectorAll(`[${TOKEN_PILL_ATTR}]`),\n        )\n        onPillClick(\n          pill,\n          pills.indexOf(pill),\n          pill.getAttribute(TOKEN_PILL_ATTR) ?? '',\n        )\n      },\n      [onPillClick],\n    )\n\n    /** Index (within segments) of the nth token segment. */\n    const segmentIndexOfToken = (tokenIndex: number): number => {\n      const segments = segmentsRef.current ?? []\n      let seen = -1\n      for (let index = 0; index < segments.length; index++) {\n        if (segments[index]?.type === 'token' && ++seen === tokenIndex) {\n          return index\n        }\n      }\n      return -1\n    }\n\n    useImperativeHandle(\n      handleRef,\n      (): TokenEditableHandle => ({\n        captureSelection: () =>\n          editableRef.current ? selectionUnitsWithin(editableRef.current) : null,\n        insertToken: (token, capture) => {\n          const { segments, caretUnit } = spliceSegmentsAtUnits(\n            segmentsRef.current ?? [],\n            [tokenSegment(token)],\n            capture?.start ?? null,\n            capture?.end ?? null,\n          )\n          commitStructural(segments, { start: caretUnit, end: caretUnit })\n        },\n        replaceTokenAt: (tokenIndex, token) => {\n          const index = segmentIndexOfToken(tokenIndex)\n          if (index < 0) return\n          const segments = [...(segmentsRef.current ?? [])]\n          segments[index] = tokenSegment(token)\n          commitStructural(segments, null)\n        },\n        removeTokenAt: (tokenIndex) => {\n          const index = segmentIndexOfToken(tokenIndex)\n          if (index < 0) return\n          const segments = [...(segmentsRef.current ?? [])]\n          segments.splice(index, 1)\n          commitStructural(segments, null)\n        },\n      }),\n      [commitStructural],\n    )\n\n    // Children are FROZEN per version (AGL-582 pattern): parent re-renders\n    // (form state changes every keystroke) receive identical element\n    // references, so React never touches the browser-managed DOM. A\n    // version bump swaps the key, remounting cleanly from the model.\n    // Label context is read at render time; renamed variables re-label on\n    // the next structural edit rather than yanking the caret mid-typing.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const children = useMemo(\n      () => renderSegments(segmentsRef.current ?? [], labelContextRef.current),\n      [version],\n    )\n\n    return (\n      <Box\n        key={version}\n        ref={editableRef}\n        component=\"div\"\n        contentEditable={!disabled}\n        suppressContentEditableWarning\n        role=\"textbox\"\n        aria-multiline={Boolean(multiline)}\n        data-placeholder={placeholder ?? ''}\n        data-testid=\"token-text-field\"\n        className={className}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        onFocus={onFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        {...rest}\n        sx={{\n          outline: 'none',\n          width: '100%',\n          whiteSpace: 'pre-wrap',\n          wordBreak: 'break-word',\n          minHeight: multiline ? '4.5em' : undefined,\n          '&:empty::before': {\n            content: 'attr(data-placeholder)',\n            color: 'text.disabled',\n          },\n          ...tokenPillContainerSx,\n        }}\n      >\n        {children}\n      </Box>\n    )\n  }),\n)\n\nexport interface TokenTextFieldProps {\n  [key: string]: unknown\n  placeholder?: string\n  multiline?: boolean\n  tokenOptions?: BindingOption[]\n  tokenLabelContext?: TokenLabelContext\n  FormFieldGridProps?: FormFieldGridProps\n  /**\n   * Opens the host app's media browser for THIS field (AGL-2236). Supplied\n   * by the attributes panel for media-bearing attributes only, so a field\n   * that cannot hold an asset never grows a control that would write one.\n   */\n  onBrowseMedia?: () => void\n}\n\n/**\n * The \"Browse media\" end adornment (AGL-2236).\n *\n * The control every `src` field's helper text has named since AGL-1215 —\n * \"Pick from your media library with 'Browse media'\" — and which, until now,\n * lived at the BOTTOM of the Attributes panel, below the Save Element\n * button, separated from the field it fills by every other attribute the\n * element declares. On the Image element that is six fields and a submit\n * button of scroll, and with a single media attribute the button read only\n * \"Browse media\", naming no field. Authors reported it as missing, which for\n * a no-code product it effectively was: the documented way to change an\n * image was to hand-type a `media:org:…/…` reference.\n *\n * Mousedown is prevented so the field keeps focus while the dialog opens —\n * the same reason {@link InsertTokenAdornment} does it. Losing focus here\n * would flush the AGL-567 debounce and commit a half-typed value on the way\n * to picking a different one.\n */\nexport function BrowseMediaAdornment(props: { onBrowse: () => void }) {\n  const { onBrowse } = props\n  return (\n    <InputAdornment position=\"end\">\n      <IconButton\n        aria-label=\"Browse media\"\n        title=\"Browse media\"\n        size=\"small\"\n        edge=\"end\"\n        onMouseDown={(event) => event.preventDefault()}\n        onClick={() => onBrowse()}\n      >\n        <MdiIcon path={mdiImageSearch.path} fontSize=\"small\" />\n      </IconButton>\n    </InputAdornment>\n  )\n}\nBrowseMediaAdornment.displayName = 'BrowseMediaAdornment'\n\n/**\n * The data-driven-forms field (registered as\n * {@link TOKEN_TEXT_FIELD_COMPONENT} in the attributes mapper). The\n * serialized string flows through react-final-form exactly like the plain\n * TextField it replaces — the AGL-567 debounced autosave sees ordinary\n * value changes and commits through the existing path.\n */\nexport const TokenTextField = (props: TokenTextFieldProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    placeholder,\n    isRequired,\n    label,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    multiline,\n    tokenOptions = [],\n    tokenLabelContext = {},\n    FormFieldGridProps = {},\n    // Destructured, never spread onto the input: it is a function, and\n    // `...rest` lands on a DOM element.\n    onBrowseMedia,\n    // Swallowed: htmlInput props from legacy schemas don't apply to a\n    // contentEditable surface.\n    inputProps: _inputProps,\n    ...rest\n  } = useFieldApi(props as never) as Record<string, any>\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n  // The site's approved image hosts, for the media warning below. Read from\n  // the SAME context that supplies \"Browse media\", so a designer mounted\n  // without a media provider simply has no list and warns about nothing.\n  const { approvedImageHosts } = useContext(MediaPickerContext)\n\n  const handleRef = useRef<TokenEditableHandle | null>(null)\n  // Ref so the frozen editable children read fresh labels at render time\n  // without re-rendering on every context identity change.\n  const labelContextRef = useRef<TokenLabelContext>(tokenLabelContext)\n  labelContextRef.current = tokenLabelContext\n\n  const [insertMenu, setInsertMenu] = useState<{\n    anchorEl: HTMLElement\n    capture: { start: number; end: number } | null\n    replaceIndex: number | null\n  } | null>(null)\n  const [pillMenu, setPillMenu] = useState<{\n    anchorEl: HTMLElement\n    tokenIndex: number\n    token: string\n  } | null>(null)\n\n  const value =\n    typeof input.value === 'string'\n      ? input.value\n      : input.value == null\n        ? ''\n        : String(input.value)\n\n  const handleOpenInsert = useCallback((anchor: HTMLElement) => {\n    // The adornment's mousedown is prevented (AGL-583), so the surface\n    // selection is still live here — capture it in unit offsets.\n    setInsertMenu({\n      anchorEl: anchor,\n      capture: handleRef.current?.captureSelection() ?? null,\n      replaceIndex: null,\n    })\n  }, [])\n\n  const handleInsert = useCallback(\n    (token: string) => {\n      if (insertMenu?.replaceIndex != null) {\n        handleRef.current?.replaceTokenAt(insertMenu.replaceIndex, token)\n      } else {\n        handleRef.current?.insertToken(token, insertMenu?.capture ?? null)\n      }\n      setInsertMenu(null)\n    },\n    [insertMenu],\n  )\n\n  const handlePillClick = useCallback(\n    (anchorEl: HTMLElement, tokenIndex: number, token: string) => {\n      setPillMenu({ anchorEl, tokenIndex, token })\n    },\n    [],\n  )\n\n  const handlePillReplace = useCallback(() => {\n    if (pillMenu) {\n      setInsertMenu({\n        anchorEl: pillMenu.anchorEl,\n        capture: null,\n        replaceIndex: pillMenu.tokenIndex,\n      })\n    }\n    setPillMenu(null)\n  }, [pillMenu])\n\n  const handlePillRemove = useCallback(() => {\n    if (pillMenu) handleRef.current?.removeTokenAt(pillMenu.tokenIndex)\n    setPillMenu(null)\n  }, [pillMenu])\n\n  /**\n   * \"This image will be blocked on the published page\" (AGL-1152).\n   *\n   * The published site's `img-src` is built from the owner's approved-host\n   * list, so an external URL from a host they have not approved renders as a\n   * broken image for every visitor — and the author is the last person who\n   * would find out, because the besigner canvas has no such policy. Saying it\n   * HERE, at the moment the URL is typed, is the whole reason enforcing the\n   * policy is safe to do at all.\n   *\n   * Deliberately a WARNING, not a validation error: the value is legitimate,\n   * the author may be about to approve the host, and refusing the keystroke\n   * would make the picker unusable while they do. It also never fires on:\n   *\n   *   - a non-media field (`onBrowseMedia` is the discriminator the panel\n   *     already uses for \"this attribute holds media\");\n   *   - a relative path, a `media:` reference, a `data:`/`blob:` URL, or\n   *     anything unparseable — none of those reach an external host;\n   *   - a token-bearing value, because `{{...}}` resolves at render and the\n   *     host is not knowable here;\n   *   - ANY value when the list is not known (see the context docs), because a\n   *     warning that fires on everything is one authors learn to ignore.\n   */\n  const externalHostWarning = useMemo(() => {\n    if (!onBrowseMedia) return null\n    if (!approvedImageHosts) return null\n    const raw = typeof value === 'string' ? value.trim() : ''\n    if (!raw || raw.includes('{{')) return null\n    if (!/^https?:\\/\\//i.test(raw)) return null\n    let hostname = ''\n    try {\n      hostname = new URL(raw).hostname.toLowerCase()\n    } catch {\n      return null\n    }\n    if (!hostname) return null\n    // Same-origin and the pinned Storage host are always served.\n    if (hostname === 'firebasestorage.googleapis.com') return null\n    const approved = approvedImageHosts.some((entry) => {\n      const candidate = String(entry ?? '').trim().toLowerCase()\n      if (!candidate) return false\n      if (candidate.startsWith('*.')) {\n        const suffix = candidate.slice(1) // \".example.com\"\n        return hostname.endsWith(suffix)\n      }\n      return hostname === candidate\n    })\n    if (approved) return null\n    return `${hostname} is not an approved image host for this site, so this image will not load for visitors. Add it under Setup → Approved image hosts.`\n  }, [onBrowseMedia, approvedImageHosts, value])\n\n  return (\n    <FormFieldGrid {...FormFieldGridProps}>\n      <MuiTextField\n        fullWidth\n        error={!!invalid}\n        helperText={\n          invalid ||\n          ((meta.touched || validateOnMount) && meta.warning) ||\n          externalHostWarning ||\n          helperText ||\n          description\n        }\n        disabled={isDisabled}\n        label={label}\n        required={isRequired}\n        onFocus={input.onFocus}\n        onBlur={input.onBlur}\n        slotProps={{\n          // The surface holds pills, not text MUI can measure — keep the\n          // label out of the way permanently.\n          inputLabel: { shrink: true },\n          input: {\n            readOnly: isReadOnly,\n            // The surface is a contentEditable that WRAPS, but MUI's\n            // single-line input root is a fixed-height flex row (AGL-1214).\n            // A long unbroken value — a media URL is the common case —\n            // painted straight through the outline and over the next\n            // field's label. Let the root grow, and keep the token-insert\n            // adornment pinned to the first line rather than centred\n            // against a now-tall box.\n            sx: {\n              height: 'auto',\n              alignItems: 'flex-start',\n              // The contentEditable IS `.MuiInputBase-input`, and MUI pins\n              // that to one line's height for a non-multiline field. The\n              // surface wraps regardless, so the content just painted\n              // outside the outline. Cap it and scroll instead of letting a\n              // long URL push the panel around.\n              '& .MuiInputBase-input': {\n                height: 'auto',\n                maxHeight: '8.5em',\n                overflowY: 'auto',\n              },\n              '& .MuiInputAdornment-root': { mt: '4px' },\n            },\n            inputComponent: TokenEditableInput as never,\n            inputProps: {\n              tokenValue: value,\n              onTokenValueChange: input.onChange,\n              multiline: Boolean(multiline),\n              labelContextRef,\n              handleRef,\n              onPillClick: handlePillClick,\n              placeholder,\n              disabled: isDisabled || isReadOnly,\n            },\n            endAdornment: (\n              <>\n                {/* Media-bearing attributes only (AGL-2236) — the control\n                    the field's own helper text names, on the field. */}\n                {onBrowseMedia ? (\n                  <BrowseMediaAdornment onBrowse={onBrowseMedia} />\n                ) : null}\n                <InsertTokenAdornment\n                  onOpen={(anchor) => handleOpenInsert(anchor)}\n                />\n              </>\n            ),\n          },\n        }}\n        {...rest}\n      />\n      <InsertTokenMenu\n        anchorEl={insertMenu?.anchorEl ?? null}\n        open={Boolean(insertMenu)}\n        onClose={() => setInsertMenu(null)}\n        options={tokenOptions}\n        onInsert={handleInsert}\n      />\n      <TokenPillPopover\n        anchorEl={pillMenu?.anchorEl ?? null}\n        token={pillMenu?.token ?? ''}\n        onClose={() => setPillMenu(null)}\n        onReplace={handlePillReplace}\n        onRemove={handlePillRemove}\n      />\n    </FormFieldGrid>\n  )\n}\nTokenTextField.displayName = 'TokenTextField'\n\nexport default TokenTextField\n"],"names":["FormFieldGrid","useFieldApi","validationError","mdiImageSearch","MdiIcon","Box","IconButton","InputAdornment","TextField","MuiTextField","useContext","forwardRef","memo","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","MediaPickerContext","readTokenSegmentsFromDom","selectionUnitsWithin","setSelectionUnits","TOKEN_PILL_ATTR","hasUnmaterializedTokens","parseTokenSegments","serializeTokenSegments","spliceSegmentsAtUnits","textSegment","tokenSegment","resolveTokenLabel","InsertTokenAdornment","InsertTokenMenu","TokenPill","TokenPillPopover","tokenPillContainerSx","TOKEN_TEXT_FIELD_COMPONENT","renderSegments","segments","labelContext","map","segment","index","type","token","value","resolved","TokenEditableInput","props","ref","tokenValue","rawTokenValue","onTokenValueChange","multiline","labelContextRef","handleRef","onPillClick","className","disabled","placeholder","onFocus","onBlur","rest","undefined","String","editableRef","segmentsRef","current","lastEmittedRef","pendingSelectionRef","version","setVersion","focus","node","emit","serialized","commitStructural","selection","pending","start","end","handleInput","_event","handleKeyDown","event","key","nativeEvent","isComposing","preventDefault","caretUnit","handlePaste","raw","clipboardData","getData","text","replace","handleBlur","handleClick","pill","target","closest","contains","pills","Array","from","querySelectorAll","indexOf","getAttribute","segmentIndexOfToken","tokenIndex","seen","length","captureSelection","insertToken","capture","replaceTokenAt","removeTokenAt","splice","children","component","contentEditable","suppressContentEditableWarning","role","aria-multiline","Boolean","data-placeholder","data-testid","onInput","onKeyDown","onPaste","onClick","sx","outline","width","whiteSpace","wordBreak","minHeight","content","color","BrowseMediaAdornment","onBrowse","position","aria-label","title","size","edge","onMouseDown","path","fontSize","displayName","TokenTextField","input","isReadOnly","isDisabled","isRequired","label","helperText","description","validateOnMount","meta","tokenOptions","tokenLabelContext","FormFieldGridProps","onBrowseMedia","inputProps","_inputProps","invalid","approvedImageHosts","insertMenu","setInsertMenu","pillMenu","setPillMenu","handleOpenInsert","anchor","anchorEl","replaceIndex","handleInsert","handlePillClick","handlePillReplace","handlePillRemove","externalHostWarning","trim","includes","test","hostname","URL","toLowerCase","approved","some","entry","candidate","startsWith","suffix","slice","endsWith","fullWidth","error","touched","warning","required","slotProps","inputLabel","shrink","readOnly","height","alignItems","maxHeight","overflowY","mt","inputComponent","onChange","endAdornment","onOpen","open","onClose","options","onInsert","onReplace","onRemove"],"mappings":"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"}

package/src/lib/components/tree/tree-list.d.ts

@@ -0,0 +1,6 @@
+import { type ListProps } from '@mui/material';
+export interface TreeListProps<T> extends ListProps {
+    items: T[];
+}
+export declare const TreeList: import("react").FunctionComponent<Omit<TreeListProps<unknown>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export default TreeList;

package/src/lib/components/tree/tree-list.js

@@ -0,0 +1,108 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 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 { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { List as MuiList, listItemButtonClasses, listItemClasses } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { forwardRef } from "react";
+const classKey = generateComponentClassKeys('TreeList', [
+    'root',
+    'subTreeView',
+    'treeItem',
+    'treeListItem',
+    'dragHandle',
+    'itemSelected',
+    'itemHovered',
+    'itemIsDragging',
+    'itemIsDragOver'
+]);
+const List = styled(MuiList)(({ theme })=>({
+        alignItems: 'stretch',
+        flexDirection: 'column',
+        width: 'fit-content',
+        minWidth: '100%',
+        [`& .${listItemButtonClasses.root}`]: {
+            zIndex: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            // paddingLeft: 0,
+            borderTopLeftRadius: 4,
+            borderBottomLeftRadius: 4,
+            [[
+                `&:hover`,
+                `&.${listItemButtonClasses.focusVisible}`,
+                `&.${listItemButtonClasses.selected}`,
+                `&.${classKey.itemSelected}`
+            ].join(',')]: {
+                backgroundColor: 'transparent'
+            }
+        },
+        [`& .${listItemClasses.root}`]: {
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            borderTopLeftRadius: 4,
+            borderBottomLeftRadius: 4,
+            [`> .${classKey.treeListItem}`]: {
+                borderTopLeftRadius: 4,
+                borderBottomLeftRadius: 4,
+                [`& .${classKey.dragHandle}`]: {
+                    visibility: 'hidden'
+                },
+                [`&:hover, &.${classKey.itemHovered}`]: {
+                    [`& .${classKey.dragHandle}`]: {
+                        visibility: 'visible'
+                    },
+                    backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.hoverOpacity} + 0.2))`,
+                    [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.focusOpacity} + 0.3))`
+                    }
+                },
+                [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                    backgroundColor: `rgba(${theme.vars.palette.primary.darkChannel} / calc(${theme.vars.palette.action.focusOpacity} + 0.2))`
+                }
+            },
+            [`&.${classKey.itemSelected}`]: {
+                [`> .${classKey.treeListItem}`]: {
+                    backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`,
+                    [`&:hover, &.${classKey.itemHovered}`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + 0.2))`,
+                        [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                            backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + 0.2))`
+                        }
+                    },
+                    [`&:has(> .${listItemButtonClasses.focusVisible})`]: {
+                        backgroundColor: `rgba(${theme.vars.palette.secondary.mainChannel} / ${theme.vars.palette.action.activatedOpacity})`
+                    }
+                }
+            }
+        }
+    }));
+List.displayName = 'List';
+export const TreeList = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, items } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "items"
+    ]);
+    return /*#__PURE__*/ _jsx(List, _extends({
+        ref: ref
+    }, rest));
+}));
+TreeList.displayName = 'TreeList';
+export default TreeList;
+
+//# sourceMappingURL=tree-list.js.map

package/src/lib/components/tree/tree-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/tree/tree-list.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 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 */\nimport { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport {\n  List as MuiList,\n  listItemButtonClasses,\n  listItemClasses,\n  type ListProps,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, RefObject } from 'react'\n\nconst classKey = generateComponentClassKeys('TreeList', [\n  'root',\n  'subTreeView',\n  'treeItem',\n  'treeListItem',\n  'dragHandle',\n  'itemSelected',\n  'itemHovered',\n  'itemIsDragging',\n  'itemIsDragOver',\n])\n\nconst List = styled(MuiList)<ListProps>(({ theme }) => ({\n  alignItems: 'stretch',\n  flexDirection: 'column',\n  width: 'fit-content',\n  minWidth: '100%',\n\n  [`& .${listItemButtonClasses.root}`]: {\n    zIndex: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n    // paddingLeft: 0,\n    borderTopLeftRadius: 4,\n    borderBottomLeftRadius: 4,\n    [[\n      `&:hover`,\n      `&.${listItemButtonClasses.focusVisible}`,\n      `&.${listItemButtonClasses.selected}`,\n      `&.${classKey.itemSelected}`,\n    ].join(',')]: {\n      backgroundColor: 'transparent',\n    },\n  },\n\n  [`& .${listItemClasses.root}`]: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n\n    borderTopLeftRadius: 4,\n    borderBottomLeftRadius: 4,\n\n    [`> .${classKey.treeListItem}`]: {\n      borderTopLeftRadius: 4,\n      borderBottomLeftRadius: 4,\n      [`& .${classKey.dragHandle}`]: {\n        visibility: 'hidden',\n      },\n\n      [`&:hover, &.${classKey.itemHovered}`]: {\n        [`& .${classKey.dragHandle}`]: {\n          visibility: 'visible',\n        },\n        backgroundColor: `rgba(${(theme as any).vars.palette.primary.darkChannel} / calc(${(theme as any).vars.palette.action.hoverOpacity} + 0.2))`,\n        [`&:has(> .${listItemButtonClasses.focusVisible})`]: {\n          backgroundColor: `rgba(${(theme as any).vars.palette.primary.darkChannel} / calc(${(theme as any).vars.palette.action.focusOpacity} + 0.3))`,\n        },\n      },\n      [`&:has(> .${listItemButtonClasses.focusVisible})`]: {\n        backgroundColor: `rgba(${(theme as any).vars.palette.primary.darkChannel} / calc(${(theme as any).vars.palette.action.focusOpacity} + 0.2))`,\n      },\n    },\n    [`&.${classKey.itemSelected}`]: {\n      [`> .${classKey.treeListItem}`]: {\n        backgroundColor: `rgba(${(theme as any).vars.palette.secondary.mainChannel} / ${(theme as any).vars.palette.action.selectedOpacity})`,\n\n        [`&:hover, &.${classKey.itemHovered}`]: {\n          backgroundColor: `rgba(${(theme as any).vars.palette.secondary.mainChannel} / calc(${(theme as any).vars.palette.action.selectedOpacity} + 0.2))`,\n\n          [`&:has(> .${listItemButtonClasses.focusVisible})`]: {\n            backgroundColor: `rgba(${(theme as any).vars.palette.secondary.mainChannel} / calc(${(theme as any).vars.palette.action.selectedOpacity} + 0.2))`,\n          },\n        },\n        [`&:has(> .${listItemButtonClasses.focusVisible})`]: {\n          backgroundColor: `rgba(${(theme as any).vars.palette.secondary.mainChannel} / ${(theme as any).vars.palette.action.activatedOpacity})`,\n        },\n      },\n    },\n  },\n}))\nList.displayName = 'List'\n\nexport interface TreeListProps<T> extends ListProps {\n  items: T[]\n}\n\nexport const TreeList = observer(\n  forwardRef(\n    <T,>(props: TreeListProps<T>, ref: RefObject<HTMLUListElement>) => {\n      const { children, items, ...rest } = props\n      return <List ref={ref} {...rest}></List>\n    },\n  ),\n)\nTreeList.displayName = 'TreeList'\n\nexport default TreeList\n"],"names":["generateComponentClassKeys","styled","List","MuiList","listItemButtonClasses","listItemClasses","observer","forwardRef","classKey","theme","alignItems","flexDirection","width","minWidth","root","zIndex","paddingTop","paddingBottom","borderTopLeftRadius","borderBottomLeftRadius","focusVisible","selected","itemSelected","join","backgroundColor","treeListItem","dragHandle","visibility","itemHovered","vars","palette","primary","darkChannel","action","hoverOpacity","focusOpacity","secondary","mainChannel","selectedOpacity","activatedOpacity","displayName","TreeList","props","ref","children","items","rest"],"mappings":"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"}

package/src/lib/components/viewport-canvas.component.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 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 { ComponentProps, type Ref } from 'react';
+declare const ViewportCanvas: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ViewportCanvasComponentProps extends ComponentProps<typeof ViewportCanvas> {
+    pannerRef?: Ref<any>;
+}
+export declare const ViewportCanvasComponent: import("react").ForwardRefExoticComponent<Omit<ViewportCanvasComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default ViewportCanvasComponent;

package/src/lib/components/viewport-canvas.component.js

@@ -0,0 +1,128 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 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 Besigner from "@aglyn/besigner";
+import { BesignerDeviceFlag, DEVICE_PREVIEW_XS_WIDTH } from "@aglyn/besigner";
+import { LOADING_OVERLAY_ELEMENT } from "@aglyn/shared-ui-jsx/const/prebuilt-components";
+import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import clsx from "clsx";
+import dynamic from "next/dynamic";
+// import {ZoomablePanningComponent} from '@aglyn/shared-ui-jsx'
+import { forwardRef } from "react";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+const canvasArtboardClassKeys = generateComponentClassKeys('AglynCanvasArtboard', [
+    'responsive',
+    'deviceXs',
+    'deviceSm',
+    'deviceMd',
+    'deviceLg',
+    'deviceXl'
+]);
+const ViewportCanvas = styled('div', {
+    name: 'AglynViewportCanvas'
+})({
+    flexGrow: 1,
+    // minHeight: '100%',
+    width: '100%',
+    overflowY: 'auto',
+    overflowX: 'auto',
+    // display: 'flex',
+    // Bound-content marker (AGL-97): elements whose props carry binding
+    // tokens get a subtle dotted underline so editors can
+    // spot dynamic content whether tokens are shown raw or resolved.
+    '& [data-aglyn-bound]': {
+        textDecorationLine: 'underline',
+        textDecorationStyle: 'dotted',
+        textDecorationColor: 'rgba(123, 31, 162, 0.55)',
+        textUnderlineOffset: 3
+    }
+});
+const ViewportArtboard = styled('div', {
+    name: 'AglynViewportArtboard'
+})(({ theme })=>({
+        overflow: 'hidden',
+        minHeight: '100%',
+        padding: theme.spacing(3),
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: theme.transitions.create([
+            'width'
+        ], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+        }),
+        [`&, &.${canvasArtboardClassKeys.responsive}`]: {
+            width: '100%'
+        },
+        [`&.${canvasArtboardClassKeys.deviceXs}`]: {
+            width: DEVICE_PREVIEW_XS_WIDTH
+        },
+        [`&.${canvasArtboardClassKeys.deviceSm}`]: {
+            width: theme.breakpoints.values.sm
+        },
+        [`&.${canvasArtboardClassKeys.deviceMd}`]: {
+            width: theme.breakpoints.values.md
+        },
+        [`&.${canvasArtboardClassKeys.deviceLg}`]: {
+            width: theme.breakpoints.values.lg
+        },
+        [`&.${canvasArtboardClassKeys.deviceXl}`]: {
+            width: theme.breakpoints.values.xl
+        }
+    }));
+const ViewportFrameComponent = dynamic(()=>import("./viewport-frame.component.js").then((mod)=>mod.ViewportFrameComponent), {
+    ssr: false,
+    loading: ()=>LOADING_OVERLAY_ELEMENT
+});
+export const ViewportCanvasComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const {} = props, rest = _extends({}, props);
+    const [devicePreview] = useAglynBesignerFlag('devicePreview');
+    const artboardClass = clsx({
+        [canvasArtboardClassKeys.responsive]: BesignerDeviceFlag.RESPONSIVE === devicePreview,
+        [canvasArtboardClassKeys.deviceXs]: BesignerDeviceFlag.XS === devicePreview,
+        [canvasArtboardClassKeys.deviceSm]: BesignerDeviceFlag.SM === devicePreview,
+        [canvasArtboardClassKeys.deviceMd]: BesignerDeviceFlag.MD === devicePreview,
+        [canvasArtboardClassKeys.deviceLg]: BesignerDeviceFlag.LG === devicePreview,
+        [canvasArtboardClassKeys.deviceXl]: BesignerDeviceFlag.XL === devicePreview
+    });
+    return /*#__PURE__*/ _jsx(ViewportCanvas, _extends({
+        ref: ref,
+        id: "aglyn:viewport-canvas",
+        onMouseDown: (event)=>{
+            // Clicking empty canvas — the panning surface or the artboard's own
+            // background (node clicks stop propagation in DraggableDroppable) —
+            // deselects all (AGL-12).
+            const target = event.target;
+            if (target === event.currentTarget || target.id === 'aglyn:viewport-artboard') {
+                Besigner.focus.clearSelection();
+            }
+        }
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(ViewportArtboard, {
+            id: "aglyn:viewport-artboard",
+            className: artboardClass,
+            children: /*#__PURE__*/ _jsx(ViewportFrameComponent, {})
+        })
+    }));
+});
+ViewportCanvasComponent.displayName = 'ViewportCanvasComponent';
+ViewportCanvasComponent.aglyn = true;
+export default ViewportCanvasComponent;
+
+//# sourceMappingURL=viewport-canvas.component.js.map

package/src/lib/components/viewport-canvas.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/viewport-canvas.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 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 * as Besigner from '@aglyn/besigner'\nimport { BesignerDeviceFlag, DEVICE_PREVIEW_XS_WIDTH } from '@aglyn/besigner'\nimport { LOADING_OVERLAY_ELEMENT } from '@aglyn/shared-ui-jsx/const/prebuilt-components'\nimport { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport clsx from 'clsx'\nimport dynamic from 'next/dynamic'\n// import {ZoomablePanningComponent} from '@aglyn/shared-ui-jsx'\nimport { ComponentProps, forwardRef, type Ref } from 'react'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\nimport type { ViewportFrameComponentProps } from './viewport-frame.component'\n\nconst canvasArtboardClassKeys = generateComponentClassKeys(\n  'AglynCanvasArtboard',\n  ['responsive', 'deviceXs', 'deviceSm', 'deviceMd', 'deviceLg', 'deviceXl'],\n)\n\nconst ViewportCanvas = styled('div', {\n  name: 'AglynViewportCanvas',\n})({\n  flexGrow: 1,\n  // minHeight: '100%',\n  width: '100%',\n  overflowY: 'auto',\n  overflowX: 'auto',\n  // display: 'flex',\n  // Bound-content marker (AGL-97): elements whose props carry binding\n  // tokens get a subtle dotted underline so editors can\n  // spot dynamic content whether tokens are shown raw or resolved.\n  '& [data-aglyn-bound]': {\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'dotted',\n    textDecorationColor: 'rgba(123, 31, 162, 0.55)',\n    textUnderlineOffset: 3,\n  },\n})\n\nconst ViewportArtboard = styled('div', {\n  name: 'AglynViewportArtboard',\n})(({ theme }) => ({\n  overflow: 'hidden',\n  minHeight: '100%',\n  padding: theme.spacing(3),\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n  transition: theme.transitions.create(['width'], {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.leavingScreen,\n  }),\n  [`&, &.${canvasArtboardClassKeys.responsive}`]: { width: '100%' },\n  [`&.${canvasArtboardClassKeys.deviceXs}`]: {\n    width: DEVICE_PREVIEW_XS_WIDTH,\n  },\n  [`&.${canvasArtboardClassKeys.deviceSm}`]: {\n    width: theme.breakpoints.values.sm,\n  },\n  [`&.${canvasArtboardClassKeys.deviceMd}`]: {\n    width: theme.breakpoints.values.md,\n  },\n  [`&.${canvasArtboardClassKeys.deviceLg}`]: {\n    width: theme.breakpoints.values.lg,\n  },\n  [`&.${canvasArtboardClassKeys.deviceXl}`]: {\n    width: theme.breakpoints.values.xl,\n  },\n}))\n\nconst ViewportFrameComponent = dynamic<ViewportFrameComponentProps>(\n  () =>\n    import('./viewport-frame.component').then(\n      (mod) => mod.ViewportFrameComponent,\n    ),\n  { ssr: false, loading: () => LOADING_OVERLAY_ELEMENT },\n)\n\nexport interface ViewportCanvasComponentProps\n  extends ComponentProps<typeof ViewportCanvas> {\n  pannerRef?: Ref<any>\n}\n\nexport const ViewportCanvasComponent = forwardRef<\n  any,\n  ViewportCanvasComponentProps\n>((props, ref) => {\n  const { ...rest } = props\n\n  const [devicePreview] = useAglynBesignerFlag('devicePreview')\n  const artboardClass = clsx({\n    [canvasArtboardClassKeys.responsive]:\n      BesignerDeviceFlag.RESPONSIVE === devicePreview,\n    [canvasArtboardClassKeys.deviceXs]: BesignerDeviceFlag.XS === devicePreview,\n    [canvasArtboardClassKeys.deviceSm]: BesignerDeviceFlag.SM === devicePreview,\n    [canvasArtboardClassKeys.deviceMd]: BesignerDeviceFlag.MD === devicePreview,\n    [canvasArtboardClassKeys.deviceLg]: BesignerDeviceFlag.LG === devicePreview,\n    [canvasArtboardClassKeys.deviceXl]: BesignerDeviceFlag.XL === devicePreview,\n  })\n\n  return (\n    <ViewportCanvas\n      ref={ref}\n      id=\"aglyn:viewport-canvas\"\n      onMouseDown={(event) => {\n        // Clicking empty canvas — the panning surface or the artboard's own\n        // background (node clicks stop propagation in DraggableDroppable) —\n        // deselects all (AGL-12).\n        const target = event.target as HTMLElement\n        if (\n          target === event.currentTarget ||\n          target.id === 'aglyn:viewport-artboard'\n        ) {\n          Besigner.focus.clearSelection()\n        }\n      }}\n      {...rest}\n    >\n      <ViewportArtboard id=\"aglyn:viewport-artboard\" className={artboardClass}>\n        <ViewportFrameComponent />\n      </ViewportArtboard>\n    </ViewportCanvas>\n  )\n})\n\nViewportCanvasComponent.displayName = 'ViewportCanvasComponent'\nViewportCanvasComponent.aglyn = true\n\nexport default ViewportCanvasComponent\n"],"names":["Besigner","BesignerDeviceFlag","DEVICE_PREVIEW_XS_WIDTH","LOADING_OVERLAY_ELEMENT","generateComponentClassKeys","styled","clsx","dynamic","forwardRef","useAglynBesignerFlag","canvasArtboardClassKeys","ViewportCanvas","name","flexGrow","width","overflowY","overflowX","textDecorationLine","textDecorationStyle","textDecorationColor","textUnderlineOffset","ViewportArtboard","theme","overflow","minHeight","padding","spacing","marginLeft","marginRight","display","flexDirection","transition","transitions","create","easing","sharp","duration","leavingScreen","responsive","deviceXs","deviceSm","breakpoints","values","sm","deviceMd","md","deviceLg","lg","deviceXl","xl","ViewportFrameComponent","then","mod","ssr","loading","ViewportCanvasComponent","props","ref","rest","devicePreview","artboardClass","RESPONSIVE","XS","SM","MD","LG","XL","id","onMouseDown","event","target","currentTarget","focus","clearSelection","className","displayName","aglyn"],"mappings":"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"}

package/src/lib/components/viewport-frame.component.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2024 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 ComponentProps, HTMLAttributes } from 'react';
+declare const ViewportFrame: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * What `CssBaseline` gives a published page and a closed shadow root never
+ * inherits (AGL-3146).
+ *
+ * `:host { all: initial }` cuts inheritance at the artboard, so the canvas
+ * carries the document baseline itself — `FramePaper` takes the body's
+ * typography, color and background, and the structural half belongs here,
+ * because `box-sizing` is inherited from the root element rather than set on
+ * each one. Without it every element on the canvas is `content-box` while the
+ * same element on the site is `border-box`, so a band that sets a height AND
+ * padding measures the padding twice in the editor and once on the page.
+ *
+ * The same pair CssBaseline emits, for the same reason: declared on the host
+ * and inherited by everything under it, so an author's own `box-sizing` still
+ * wins wherever they set one.
+ */
+export declare const VIEWPORT_BASELINE_STYLES: {
+    readonly ':host': {
+        readonly all: "initial";
+        readonly boxSizing: "border-box";
+    };
+    readonly '*, *::before, *::after': {
+        readonly boxSizing: "inherit";
+    };
+};
+export interface ViewportFrameComponentProps extends ComponentProps<typeof ViewportFrame> {
+}
+export declare const ViewportFrameComponent: import("react").ForwardRefExoticComponent<Omit<ViewportFrameComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default ViewportFrameComponent;