@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/custom-css-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/custom-css-form.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 type * as Aglyn from '@aglyn/aglyn'\nimport {\n  canvas,\n  collectThirdPartyAuthorCssUrlHosts,\n  collectThirdPartyAuthorSxUrlHosts,\n} from '@aglyn/aglyn'\nimport { mdiClose, mdiPlus } from '@aglyn/shared-data-mdi'\nimport {\n  canonicalSxProperties,\n  expandSxAliases,\n  isAtomicSxValue,\n} from '@aglyn/shared-data-enums'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { FIELD_MUTED_STYLES, FieldMuteButton } from '@aglyn/shared-ui-jsx-forms'\nimport {\n  Autocomplete,\n  Button,\n  IconButton,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\nimport { buildStyleMute, toggleMutedStyle } from '../utils/muted-styles'\nimport type { SxBreakpoint } from '../utils/responsive-sx'\nimport { readSxValue } from '../utils/responsive-sx'\nimport { applyStylePartialToSx } from '../utils/style-field-groups'\nimport { getNodeStyleTarget } from '../utils/style-target'\n\n/**\n * Curated, grouped suggestions for the builder's property picker\n * (freeSolo, so any CSS/sx property still works).\n */\nconst CSS_PROPERTY_SUGGESTIONS: Array<{ group: string; name: string }> = [\n  ...[\n    'width',\n    'height',\n    'minWidth',\n    'maxWidth',\n    'minHeight',\n    'maxHeight',\n    'overflow',\n    'position',\n    'top',\n    'right',\n    'bottom',\n    'left',\n    'zIndex',\n  ].map((name) => ({ group: 'Layout', name })),\n  ...['margin', 'padding', 'gap', 'rowGap', 'columnGap'].map((name) => ({\n    group: 'Spacing',\n    name,\n  })),\n  ...[\n    'fontSize',\n    'fontWeight',\n    'fontFamily',\n    'lineHeight',\n    'letterSpacing',\n    'textTransform',\n    'textDecoration',\n    'whiteSpace',\n  ].map((name) => ({ group: 'Typography', name })),\n  ...[\n    'color',\n    'backgroundColor',\n    'background',\n    'backgroundImage',\n    'backgroundSize',\n    'backgroundPosition',\n    'opacity',\n  ].map((name) => ({ group: 'Background & color', name })),\n  ...[\n    'border',\n    'borderRadius',\n    'borderColor',\n    'borderWidth',\n    'borderStyle',\n    'outline',\n  ].map((name) => ({ group: 'Border', name })),\n  ...[\n    'boxShadow',\n    'transform',\n    'transition',\n    'filter',\n    'cursor',\n    'objectFit',\n    'aspectRatio',\n  ].map((name) => ({ group: 'Effects', name })),\n]\n\nconst kebabToCamel = (name: string) =>\n  name.replace(/-([a-z])/g, (match, letter: string) => letter.toUpperCase())\nconst camelToKebab = (name: string) =>\n  name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)\n\n/** Parses `prop: value;` CSS declarations into a JSS record (AGL-332). */\nexport function parseCssDeclarations(css: string): Record<string, string> {\n  const result: Record<string, string> = {}\n  for (const raw of css.split(';')) {\n    const declaration = raw.trim()\n    if (!declaration) continue\n    const colon = declaration.indexOf(':')\n    if (colon <= 0) continue\n    const property = kebabToCamel(declaration.slice(0, colon).trim())\n    const value = declaration.slice(colon + 1).trim()\n    if (property && value) result[property] = value\n  }\n  return result\n}\n\n/**\n * The scalar declarations the Builder rows and the CSS tab show for `sx`,\n * named in the Styles panel's own spelling (AGL-2390).\n *\n * MUI honours two names for the same declaration, and every other control\n * in this panel is named for the CSS longhand (AGL-2207). Listing the raw\n * keys made this form the one place that said `bgcolor` where the Colors\n * group said `backgroundColor` and BoxStyler said `paddingTop` — the same\n * node, two vocabularies, and the author with no way to tell that the two\n * rows were one declaration. The expansion is a pure renaming of what\n * already renders (order preserved, non-atomic values left alone), and it\n * is what makes the row's × and the CSS tab's clear reach the key that is\n * actually painting.\n *\n * The JSS tab deliberately does NOT go through here: it edits the stored\n * document verbatim, which is the escape hatch for everything the named\n * controls cannot express.\n */\nexport function customCssDeclarations(\n  sx: Record<string, any> | undefined,\n  breakpoint: SxBreakpoint | null,\n): Array<{ property: string; value: string }> {\n  const source = expandSxAliases((sx ?? {}) as Record<string, any>, {\n    deep: true,\n  })\n  const out: Array<{ property: string; value: string }> = []\n  for (const property of Object.keys(source)) {\n    const value = readSxValue(source, property, breakpoint)\n    if (value === undefined || value === null) continue\n    if (typeof value === 'object') continue // selectors/nested — JSON tab\n    out.push({ property, value: String(value) })\n  }\n  return out\n}\n\n/** Serializes scalar sx entries into CSS declarations for the CSS tab. */\nexport function serializeCssDeclarations(\n  sx: Record<string, any> | undefined,\n  breakpoint: SxBreakpoint | null,\n): string {\n  return customCssDeclarations(sx, breakpoint)\n    .map(({ property, value }) => `${camelToKebab(property)}: ${value};`)\n    .join('\\n')\n}\n\n/**\n * The declaration(s) one named property writes, in the panel's spelling.\n *\n * The property field is free-solo and the CSS tab takes any declaration, so\n * an author can type `bgcolor` or `py` at any time — this form is the one\n * seam in the product where a fresh alias can still enter a document. It\n * resolves the name the same way {@link expandSxAliases} resolves a stored\n * one, so what the author typed and what the panel reads back agree.\n *\n * A value the expansion cannot carry per-side — `p: '10px 20px'`, the CSS\n * shorthand's own syntax — keeps the name the author gave it rather than\n * being copied onto four longhands CSS would drop. Clearing always expands,\n * because a cleared alias has to take every longhand it was painting with\n * it.\n */\nexport function canonicalCssPartial(\n  property: string,\n  value: string | undefined,\n): Record<string, unknown> {\n  const canonical = canonicalSxProperties(property)\n  const expandable =\n    canonical.length === 1 || value === undefined || isAtomicSxValue(value)\n  if (!canonical.length || !expandable) return { [property]: value }\n  return Object.fromEntries(canonical.map((name) => [name, value]))\n}\n\n/**\n * Applies custom-CSS edits to `sx` — the write both the Builder rows and\n * the CSS tab's Apply go through (AGL-2390).\n *\n * Routed through the Styles panel's own write seam so this form cannot\n * drift from it again: {@link applyStylePartialToSx} expands the alias keys\n * the edit COLLIDES with before writing, which is what makes clearing a\n * declaration actually clear (deleting `backgroundColor` while a `bgcolor`\n * underneath keeps painting is AGL-2207's sharper failure) and what stops a\n * write leaving two spellings of one declaration in the record.\n *\n * Scheme-agnostic (`null`): this form has always written the base slice,\n * and the dark-preview scoping belongs to the named color fields.\n */\nexport function applyCustomCssEdits(\n  sx: Record<string, any> | undefined,\n  edits: Record<string, string | undefined>,\n  breakpoint: SxBreakpoint | null,\n): Record<string, any> {\n  const partial: Record<string, unknown> = {}\n  for (const [property, value] of Object.entries(edits)) {\n    if (!property) continue\n    Object.assign(\n      partial,\n      canonicalCssPartial(property, value === '' ? undefined : value),\n    )\n  }\n  return applyStylePartialToSx(sx, partial, breakpoint, null)\n}\n\n/**\n * Un-applied CSS / JSS text, held ACROSS an unmount of this form (AGL-2486).\n *\n * The JSS tab is the one control in the Styles panel whose work lives only\n * in React state until Apply — and this form is mounted under\n * `withLastSelectedNode`, which renders \"Select an element\" the instant the\n * canvas selection empties. Anything that clears the selection therefore\n * UNMOUNTS the editor, and a `useState('')` buffer takes the author's\n * half-typed sx document with it. Measured on a live besigner: a selection\n * held with no keyboard or pointer input at all lost the editor 46s in, so\n * this is not something the author can avoid by typing carefully — it is\n * why the wipe reads as random, and why it gets blamed on whichever key was\n * pressed last.\n *\n * Keyed by node AND style target, so a component instance's root and its\n * leaves each keep their own pending text, and re-selecting the element\n * hands the author back exactly what they had typed. An entry lives only\n * while the text DIFFERS from the stored document: applying it, or typing\n * it back to what sx already says, drops the entry, so this never resurrects\n * a draft the author has already resolved.\n *\n * Deliberately not persisted beyond the page: it is un-applied text, not a\n * document, and the crash-recovery draft store is the thing that owns\n * surviving a reload.\n */\nconst pendingDrafts = new Map<string, string>()\n\nconst draftKey = (\n  nodeId: string,\n  overrideKey: string,\n  mode: 'css' | 'json',\n): string => [nodeId, overrideKey, mode].join('\\x00')\n\n/** Drops every pending draft — test seam, and a hard reset for the canvas. */\nexport function resetPendingCustomCssDrafts(): void {\n  pendingDrafts.clear()\n}\n\n/**\n * Why a JSS buffer cannot be applied, or `null` when it is ready\n * (AGL-2486). Rendered live as the author types, so \"nothing happened when\n * I pressed Apply\" is never the first sign that the text does not parse.\n *\n * Mid-edit JSON is TRANSIENTLY invalid by nature — `{\"a\": 1,` is what every\n * new property looks like a keystroke before it is finished — so this is a\n * hint, never a block on typing and never a reason to touch the document.\n *\n * An empty buffer is called out rather than treated as `{}`: `JSON.parse`\n * would need a fallback to accept it at all, and silently reading \"\" as\n * \"delete every style on this element\" is the most destructive thing this\n * panel could do with an accidental Select-All. Clearing all styles stays\n * available, spelled `{}`, which nobody types by accident.\n */\nexport function jsonDraftProblem(text: string): string | null {\n  const trimmed = (text ?? '').trim()\n  if (!trimmed) {\n    return 'Empty — type {} to clear every style on this element.'\n  }\n  let parsed: unknown\n  try {\n    parsed = JSON.parse(trimmed)\n  } catch {\n    return 'Not valid JSON yet — Apply will not change anything until it parses.'\n  }\n  // Explicit `=== null` and an array check: `strictNullChecks` is off\n  // repo-wide, so `!parsed` would fold `null`, `0` and `\"\"` together, and\n  // `typeof null` is `'object'`.\n  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {\n    return 'The sx value must be a JSON object.'\n  }\n  return null\n}\n\nexport interface CustomCssFormProps {\n  node?: Aglyn.NodeSchema\n  /** Active artboard breakpoint; builder/CSS edits scope to it (AGL-333). */\n  breakpoint: SxBreakpoint | null\n  /**\n   * Which `styleOverrides` slice to edit on a component instance\n   * (AGL-1332) — the Styles panel's current style target. Ignored for a\n   * plain node; defaults to the component root.\n   */\n  overrideKey?: string\n}\n\ntype BuilderRow = { property: string; value: string }\n\n/**\n * Custom CSS for the selected element's `sx` (AGL-332): a friendly\n * builder (property + value rows), a raw CSS mode, and a raw JSS/JSON\n * mode. Builder and CSS edits respect the active breakpoint scope; the\n * JSON mode edits the full sx document (including responsive objects and\n * nested selectors) verbatim.\n */\nexport const CustomCssForm = observer((props: CustomCssFormProps) => {\n  const { node, breakpoint, overrideKey } = props\n  // Same target the rest of the Styles panel writes (AGL-1306/1332): a\n  // plain node's own sx, or the instance override slice the panel's style\n  // target names — root, or one leaf inside the component.\n  const target = useMemo(\n    () => getNodeStyleTarget(node, overrideKey),\n    [node, overrideKey],\n  )\n  const nodeSx = (target.sx ?? {}) as Record<string, any>\n  const [mode, setMode] = useState<'builder' | 'css' | 'json'>('builder')\n  const [cssDraft, setCssDraft] = useState('')\n  const [jsonDraft, setJsonDraft] = useState('')\n  const [error, setError] = useState<string | null>(null)\n\n  const rows = useMemo<BuilderRow[]>(\n    () => customCssDeclarations(nodeSx, breakpoint),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(nodeSx), breakpoint],\n  )\n  const [draftRow, setDraftRow] = useState<BuilderRow>({\n    property: '',\n    value: '',\n  })\n\n  // Declarations switched off for comparison (AGL-2486). Canvas only, and\n  // the same flag every other row in the panel writes, so a property muted\n  // here and the same property muted from its typed field are one state.\n  // The builder lists BASE scalar declarations only — a state slice is a\n  // nested object it skips — so these mutes carry no state scope.\n  const [mutedStyles, setMutedStyles] = useAglynBesignerFlag('mutedStyles')\n  const rowMute = useCallback(\n    (property: string) =>\n      buildStyleMute(property, property, {\n        nodeId: node?.$id,\n        state: null,\n        breakpoint,\n        // Every row the builder lists is, by construction, declared.\n        scopeValues: { [property]: true },\n        mutedStyles,\n        onToggle: (target) =>\n          setMutedStyles((current) => toggleMutedStyle(current, target)),\n      }),\n    [node, breakpoint, mutedStyles, setMutedStyles],\n  )\n\n  const nodeId = node?.$id ?? ''\n  /** What the STORED document says, in each tab's spelling. */\n  const storedCss = useMemo(\n    () => serializeCssDeclarations(nodeSx, breakpoint),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(nodeSx), breakpoint],\n  )\n  const storedJson = useMemo(\n    () => JSON.stringify(nodeSx, null, 2),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(nodeSx)],\n  )\n\n  /**\n   * Records (or drops) the author's un-applied text for one tab, so an\n   * unmount cannot take it (AGL-2486). Text equal to the stored document is\n   * not a draft at all, so it clears the entry rather than pinning a value\n   * that would then shadow a later change from elsewhere in the panel.\n   */\n  const rememberDraft = useCallback(\n    (draftMode: 'css' | 'json', value: string, stored: string) => {\n      const key = draftKey(nodeId, target.overrideKey, draftMode)\n      if (value === stored) pendingDrafts.delete(key)\n      else pendingDrafts.set(key, value)\n    },\n    [nodeId, target.overrideKey],\n  )\n\n  useEffect(() => {\n    // A pending draft wins over the stored document — that is the whole\n    // point of keeping it. `!== undefined` rather than a truthiness test:\n    // `''` is a legitimate buffer the author emptied on purpose, and with\n    // `strictNullChecks` off `if (!pending)` would silently discard it.\n    const pendingCss = pendingDrafts.get(\n      draftKey(nodeId, target.overrideKey, 'css'),\n    )\n    const pendingJson = pendingDrafts.get(\n      draftKey(nodeId, target.overrideKey, 'json'),\n    )\n    setCssDraft(pendingCss !== undefined ? pendingCss : storedCss)\n    setJsonDraft(pendingJson !== undefined ? pendingJson : storedJson)\n    setError(null)\n    // Re-seeded on the override target too (AGL-1332): switching from the\n    // component root to a leaf must reload the drafts, or a stale CSS\n    // buffer would be written back onto the newly picked target.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [mode, nodeId, target.overrideKey])\n\n  /**\n   * Live \"is this appliable yet\" verdict for the JSS tab (AGL-2486) — a\n   * caption only. Nothing here writes, so a buffer that stops parsing\n   * mid-property changes the hint and leaves the document alone.\n   */\n  const jsonProblem = useMemo(\n    () => (mode === 'json' ? jsonDraftProblem(jsonDraft) : null),\n    [mode, jsonDraft],\n  )\n\n  // Passive off-site url() hint (AGL-1737) — the \"warn\" half of AGL-1725's\n  // warn-and-disclose, for the panel with no per-field description to carry\n  // it. Names the hosts a url() in the CURRENT value would make every\n  // visitor's browser contact: the live draft in the CSS and JSON modes\n  // (ahead of Apply, so the author reads it while typing), the committed sx\n  // in the builder (whose rows write live). A caption and nothing more — it\n  // never blocks a value, and it deliberately does not touch how or when\n  // this form commits (an attribute panel edit commits on blur, and that\n  // behavior is load-bearing).\n  const thirdPartyHosts = useMemo<string[]>(() => {\n    if (mode === 'css') return collectThirdPartyAuthorCssUrlHosts(cssDraft)\n    if (mode === 'json') {\n      try {\n        return collectThirdPartyAuthorSxUrlHosts(JSON.parse(jsonDraft || '{}'))\n      } catch {\n        // Mid-edit JSON — scan the raw text so the hint tracks typing.\n        return collectThirdPartyAuthorCssUrlHosts(jsonDraft)\n      }\n    }\n    return collectThirdPartyAuthorSxUrlHosts(nodeSx)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [mode, cssDraft, jsonDraft, JSON.stringify(nodeSx)])\n\n  const writeProperty = useCallback(\n    (property: string, value: string | undefined) => {\n      if (!node || !property) return\n      // Coalesced per property (AGL-1204): the builder rows write on every\n      // keystroke, so typing one value is one undo step, and editing a\n      // different property starts another. The write goes through the style\n      // target (AGL-1306), so this is undoable on an instance's override\n      // layer exactly as on a plain node's own sx.\n      canvas.transact(\n        () => {\n          target.setSx(\n            applyCustomCssEdits(\n              (target.sx ?? {}) as Record<string, any>,\n              { [property]: value },\n              breakpoint,\n            ),\n          )\n        },\n        ['sx', node.$id, breakpoint ?? 'base', property].join(':'),\n      )\n    },\n    [node, target, breakpoint],\n  )\n\n  const applyCss = useCallback(() => {\n    if (!node) return\n    const parsed = parseCssDeclarations(cssDraft)\n    // Uncoalesced: pressing Apply is one deliberate commit, however many\n    // declarations it carries (AGL-1204).\n    canvas.transact(() => {\n      // One edit map, applied once: declarations no longer in the draft\n      // clear, the rest write. Both halves resolve their spelling through\n      // `applyCustomCssEdits`, so a row the author deleted takes the alias\n      // that was painting it with it, and a declaration they typed under\n      // MUI's spelling lands where every other control can read it.\n      const edits: Record<string, string | undefined> = {}\n      for (const row of rows) {\n        if (!(row.property in parsed)) edits[row.property] = undefined\n      }\n      Object.assign(edits, parsed)\n      target.setSx(\n        applyCustomCssEdits(\n          (target.sx ?? {}) as Record<string, any>,\n          edits,\n          breakpoint,\n        ),\n      )\n    })\n    setError(null)\n    // Applied text is no longer un-applied.\n    pendingDrafts.delete(draftKey(nodeId, target.overrideKey, 'css'))\n  }, [node, target, cssDraft, rows, breakpoint, nodeId])\n\n  /**\n   * Commits the JSS buffer — the ONLY path from this tab to the document\n   * (AGL-2486).\n   *\n   * A buffer that does not parse to a JSON object is a NON-COMMIT: it sets\n   * the inline error and returns, leaving both the document and the text\n   * exactly as they are, so the author can keep editing from where they\n   * were. There is no blur, change or unmount handler anywhere in this form\n   * that reaches the document — Apply is the whole seam, which is what\n   * makes a transiently invalid buffer harmless.\n   */\n  const applyJson = useCallback(() => {\n    if (!node) return\n    const problem = jsonDraftProblem(jsonDraft)\n    if (problem !== null) {\n      setError(problem)\n      return\n    }\n    // Re-parsed rather than carried out of the guard: `jsonDraftProblem`\n    // owns the verdict, and one function deciding while another commits is\n    // how \"valid enough to pass, wrong shape to store\" gets in.\n    const parsed = JSON.parse(jsonDraft.trim())\n    // Replacing sx wholesale is the single most destructive edit this panel\n    // offers, so it is the one that most needs to be undoable (AGL-1204).\n    canvas.transact(() => {\n      target.setSx(parsed)\n    })\n    setError(null)\n    pendingDrafts.delete(draftKey(nodeId, target.overrideKey, 'json'))\n  }, [node, target, jsonDraft, nodeId])\n\n  return (\n    <Stack spacing={1.5}>\n      <ToggleButtonGroup\n        size=\"small\"\n        exclusive\n        fullWidth\n        value={mode}\n        onChange={(event, value) => value && setMode(value)}\n      >\n        <ToggleButton value=\"builder\">{'Builder'}</ToggleButton>\n        <ToggleButton value=\"css\">{'CSS'}</ToggleButton>\n        <ToggleButton value=\"json\">{'JSS (sx)'}</ToggleButton>\n      </ToggleButtonGroup>\n\n      {mode === 'builder' ? (\n        <Stack spacing={1}>\n          {rows.map((row) => {\n            const mute = rowMute(row.property)\n            return (\n              <Stack\n                key={row.property}\n                direction=\"row\"\n                spacing={1}\n                sx={[\n                  { alignItems: 'center' },\n                  mute?.muted ? FIELD_MUTED_STYLES : null,\n                ]}\n              >\n                <TextField\n                  size=\"small\"\n                  value={row.property}\n                  disabled\n                  sx={{ flex: 1 }}\n                />\n                <TextField\n                  size=\"small\"\n                  value={row.value}\n                  onChange={(event) =>\n                    writeProperty(row.property, event.target.value)\n                  }\n                  sx={{ flex: 1 }}\n                />\n                {/* The eye stops the declaration applying and keeps its\n                    value; the ✕ beside it is still the only thing that\n                    takes the declaration off the element. */}\n                <FieldMuteButton mute={mute} />\n                <IconButton\n                  size=\"small\"\n                  aria-label={`Remove ${row.property}`}\n                  onClick={() => writeProperty(row.property, undefined)}\n                >\n                  <MdiIcon path={mdiClose.path} size={0.7} />\n                </IconButton>\n              </Stack>\n            )\n          })}\n          <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n            <Autocomplete\n              freeSolo\n              size=\"small\"\n              options={CSS_PROPERTY_SUGGESTIONS}\n              groupBy={(option) =>\n                typeof option === 'string' ? '' : option.group\n              }\n              getOptionLabel={(option) =>\n                typeof option === 'string' ? option : option.name\n              }\n              inputValue={draftRow.property}\n              onInputChange={(event, value) =>\n                setDraftRow((prev) => ({ ...prev, property: value }))\n              }\n              renderInput={(params) => (\n                <TextField {...params} placeholder=\"property\" />\n              )}\n              sx={{ flex: 1 }}\n            />\n            <TextField\n              size=\"small\"\n              placeholder=\"value\"\n              value={draftRow.value}\n              onChange={(event) =>\n                setDraftRow((prev) => ({ ...prev, value: event.target.value }))\n              }\n              sx={{ flex: 1 }}\n            />\n            <IconButton\n              size=\"small\"\n              aria-label=\"Add property\"\n              disabled={!draftRow.property.trim() || !draftRow.value.trim()}\n              onClick={() => {\n                writeProperty(\n                  kebabToCamel(draftRow.property.trim()),\n                  draftRow.value.trim(),\n                )\n                setDraftRow({ property: '', value: '' })\n              }}\n            >\n              <MdiIcon path={mdiPlus.path} size={0.8} />\n            </IconButton>\n          </Stack>\n        </Stack>\n      ) : null}\n\n      {mode === 'css' ? (\n        <Stack spacing={1}>\n          <TextField\n            multiline\n            minRows={5}\n            value={cssDraft}\n            onChange={(event) => {\n              setCssDraft(event.target.value)\n              rememberDraft('css', event.target.value, storedCss)\n            }}\n            placeholder={\n              'border-radius: 8px;\\nbox-shadow: 0 2px 8px rgba(0,0,0,0.2);'\n            }\n            slotProps={{\n              htmlInput: {\n                style: { fontFamily: 'monospace', fontSize: 12 },\n              },\n            }}\n          />\n          <Button size=\"small\" variant=\"outlined\" onClick={applyCss}>\n            {'Apply CSS'}\n          </Button>\n        </Stack>\n      ) : null}\n\n      {mode === 'json' ? (\n        <Stack spacing={1}>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {'Full sx document — supports responsive objects ' +\n              '({ xs, sm, … }) and nested selectors (\"&:hover\").'}\n          </Typography>\n          <TextField\n            multiline\n            minRows={6}\n            value={jsonDraft}\n            onChange={(event) => {\n              setJsonDraft(event.target.value)\n              rememberDraft('json', event.target.value, storedJson)\n              // A keystroke that fixes the JSON clears a stale Apply error;\n              // it never raises one, so typing is not nagged mid-property.\n              if (error && jsonDraftProblem(event.target.value) === null) {\n                setError(null)\n              }\n            }}\n            error={Boolean(error)}\n            helperText={error ?? jsonProblem ?? undefined}\n            slotProps={{\n              htmlInput: {\n                style: { fontFamily: 'monospace', fontSize: 12 },\n              },\n            }}\n          />\n          <Button size=\"small\" variant=\"outlined\" onClick={applyJson}>\n            {'Apply JSS'}\n          </Button>\n        </Stack>\n      ) : null}\n\n      {thirdPartyHosts.length ? (\n        // Same voice as the Custom HTML `css` description (AGL-1737), with\n        // the host named back so the consequence is attached to the value\n        // the author typed rather than left as general prose.\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'A url() here points off your site — every visitor’s browser ' +\n            `will contact ${thirdPartyHosts.join(', ')}, disclosing their ` +\n            'IP address and which page they are on. Insecure http:// URLs ' +\n            'are not loaded.'}\n        </Typography>\n      ) : null}\n    </Stack>\n  )\n})\nCustomCssForm.displayName = 'CustomCssForm'\n\nexport default CustomCssForm\n"],"names":["canvas","collectThirdPartyAuthorCssUrlHosts","collectThirdPartyAuthorSxUrlHosts","mdiClose","mdiPlus","canonicalSxProperties","expandSxAliases","isAtomicSxValue","MdiIcon","FIELD_MUTED_STYLES","FieldMuteButton","Autocomplete","Button","IconButton","Stack","TextField","ToggleButton","ToggleButtonGroup","Typography","observer","useCallback","useEffect","useMemo","useState","useAglynBesignerFlag","buildStyleMute","toggleMutedStyle","readSxValue","applyStylePartialToSx","getNodeStyleTarget","CSS_PROPERTY_SUGGESTIONS","map","name","group","kebabToCamel","replace","match","letter","toUpperCase","camelToKebab","toLowerCase","parseCssDeclarations","css","result","raw","split","declaration","trim","colon","indexOf","property","slice","value","customCssDeclarations","sx","breakpoint","source","deep","out","Object","keys","undefined","push","String","serializeCssDeclarations","join","canonicalCssPartial","canonical","expandable","length","fromEntries","applyCustomCssEdits","edits","partial","entries","assign","pendingDrafts","Map","draftKey","nodeId","overrideKey","mode","resetPendingCustomCssDrafts","clear","jsonDraftProblem","text","trimmed","parsed","JSON","parse","Array","isArray","CustomCssForm","props","target","error","node","nodeSx","setMode","cssDraft","setCssDraft","jsonDraft","setJsonDraft","setError","rows","stringify","draftRow","setDraftRow","mutedStyles","setMutedStyles","rowMute","$id","state","scopeValues","onToggle","current","storedCss","storedJson","rememberDraft","draftMode","stored","key","delete","set","pendingCss","get","pendingJson","jsonProblem","thirdPartyHosts","writeProperty","transact","setSx","applyCss","row","applyJson","problem","spacing","size","exclusive","fullWidth","onChange","event","mute","direction","alignItems","muted","disabled","flex","aria-label","onClick","path","freeSolo","options","groupBy","option","getOptionLabel","inputValue","onInputChange","prev","renderInput","params","placeholder","multiline","minRows","slotProps","htmlInput","style","fontFamily","fontSize","variant","color","Boolean","helperText","displayName"],"mappings":"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"}

package/src/lib/components/device-preview-controls.component.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 { MenuProps } from '@aglyn/shared-ui-jsx';
+export interface DevicePreviewControlsProps extends Partial<MenuProps> {
+}
+declare const DevicePreviewControlsComponent: import("react").ForwardRefExoticComponent<Omit<DevicePreviewControlsProps, "ref"> & import("react").RefAttributes<any>>;
+export { DevicePreviewControlsComponent };
+export default DevicePreviewControlsComponent;

package/src/lib/components/device-preview-controls.component.js

@@ -0,0 +1,150 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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 { BesignerDeviceFlag } from "@aglyn/besigner";
+import { ICON_VARIANT_FLUID_RESPONSIVE, ICON_VARIANT_LAPTOP, ICON_VARIANT_MENU_DOWN, ICON_VARIANT_MOBILE, ICON_VARIANT_MONITOR_LARGE, ICON_VARIANT_MONITOR_SMALL, ICON_VARIANT_SYMBOL_CONFIRMED, ICON_VARIANT_TABLET } from "@aglyn/shared-data-enums";
+import { MdiIcon, Menu } from "@aglyn/shared-ui-jsx";
+import { Button as MuiButton, ButtonGroup as MuiButtonGroup, Tooltip as MuiTooltip } from "@mui/material";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+const devicePreviewOptions = [
+    {
+        children: 'Fluid Responsive',
+        value: BesignerDeviceFlag.RESPONSIVE,
+        icon: {
+            path: ICON_VARIANT_FLUID_RESPONSIVE.path
+        }
+    },
+    {
+        children: 'XS - Mobile',
+        value: BesignerDeviceFlag.XS,
+        icon: {
+            path: ICON_VARIANT_MOBILE.path
+        }
+    },
+    {
+        children: 'SM - Tablet',
+        value: BesignerDeviceFlag.SM,
+        icon: {
+            path: ICON_VARIANT_TABLET.path
+        }
+    },
+    {
+        children: 'MD - Laptop',
+        value: BesignerDeviceFlag.MD,
+        icon: {
+            path: ICON_VARIANT_LAPTOP.path
+        }
+    },
+    {
+        children: 'LG - Desktop',
+        value: BesignerDeviceFlag.LG,
+        icon: {
+            path: ICON_VARIANT_MONITOR_SMALL.path
+        }
+    },
+    {
+        children: 'XL - Widescreen',
+        value: BesignerDeviceFlag.XL,
+        icon: {
+            path: ICON_VARIANT_MONITOR_LARGE.path
+        }
+    }
+];
+const DevicePreviewControlsComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const {} = props, rest = _extends({}, props);
+    const [devicePreview, setDevicePreview] = useAglynBesignerFlag('devicePreview');
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [devicesMenuOpen, setDevicesMenuOpen] = useState(false);
+    const activeDevice = useMemo(()=>devicePreviewOptions.find((i)=>i.value === devicePreview) || devicePreviewOptions[0], [
+        devicePreview
+    ]);
+    const handleMenuClose = useCallback((event)=>{
+        setDevicesMenuOpen(false);
+    }, []);
+    const handleOpenMenu = useCallback((event)=>{
+        setDevicesMenuOpen(true);
+    }, []);
+    const handleMenuClick = (device)=>(event)=>{
+            setDevicePreview(device);
+            setDevicesMenuOpen(false);
+        };
+    return /*#__PURE__*/ _jsx(Menu, _extends({
+        ref: ref,
+        id: "aglyn:device-preview",
+        onClick: handleMenuClose,
+        horizontalOrigin: "right",
+        items: [
+            {
+                type: 'subheader',
+                children: 'Artboard preview mode',
+                sx: {
+                    lineHeight: (theme)=>theme.typography.pxToRem(32)
+                }
+            },
+            ...devicePreviewOptions.map((item)=>_extends({
+                    key: item.value,
+                    selected: item.value === activeDevice.value,
+                    disabled: item.value === activeDevice.value,
+                    onClick: handleMenuClick(item.value),
+                    endIcon: item.value !== activeDevice.value ? undefined : {
+                        path: ICON_VARIANT_SYMBOL_CONFIRMED.path
+                    }
+                }, item))
+        ]
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(MuiButtonGroup, {
+            size: "small",
+            variant: "outlined",
+            color: "inherit",
+            children: /*#__PURE__*/ _jsx(MuiTooltip, {
+                title: 'Device preview mode',
+                children: /*#__PURE__*/ _jsx(MuiButton, {
+                    "aria-label": "device preview mode",
+                    "aria-haspopup": "menu",
+                    "aria-controls": devicesMenuOpen ? 'aglyn:device-preview' : undefined,
+                    "aria-expanded": devicesMenuOpen ? 'true' : undefined,
+                    ref: setAnchorEl,
+                    onClick: handleOpenMenu,
+                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, _extends({
+                        fontSize: "inherit"
+                    }, activeDevice.icon)),
+                    endIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        fontSize: "inherit",
+                        path: ICON_VARIANT_MENU_DOWN.path
+                    }),
+                    sx: {
+                        borderColor: 'divider',
+                        '& .MuiButton-endIcon': {
+                            ml: 0.15
+                        },
+                        '& .MuiButton-startIcon': {
+                            mr: 0.85
+                        }
+                    },
+                    children: activeDevice.children
+                })
+            })
+        })
+    }));
+});
+DevicePreviewControlsComponent.displayName = 'DevicePreviewControlsComponent';
+DevicePreviewControlsComponent.aglyn = true;
+export { DevicePreviewControlsComponent };
+export default DevicePreviewControlsComponent;
+
+//# sourceMappingURL=device-preview-controls.component.js.map

package/src/lib/components/device-preview-controls.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/device-preview-controls.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 { BesignerDeviceFlag } from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_FLUID_RESPONSIVE,\n  ICON_VARIANT_LAPTOP,\n  ICON_VARIANT_MENU_DOWN,\n  ICON_VARIANT_MOBILE,\n  ICON_VARIANT_MONITOR_LARGE,\n  ICON_VARIANT_MONITOR_SMALL,\n  ICON_VARIANT_SYMBOL_CONFIRMED,\n  ICON_VARIANT_TABLET,\n} from '@aglyn/shared-data-enums'\nimport { MdiIcon, Menu, MenuProps } from '@aglyn/shared-ui-jsx'\nimport {\n  Button as MuiButton,\n  ButtonGroup as MuiButtonGroup,\n  Tooltip as MuiTooltip,\n} from '@mui/material'\nimport {\n  forwardRef,\n  type MouseEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\n\nconst devicePreviewOptions = [\n  {\n    children: 'Fluid Responsive',\n    value: BesignerDeviceFlag.RESPONSIVE,\n    icon: { path: ICON_VARIANT_FLUID_RESPONSIVE.path },\n  },\n  {\n    children: 'XS - Mobile',\n    value: BesignerDeviceFlag.XS,\n    icon: { path: ICON_VARIANT_MOBILE.path },\n  },\n  {\n    children: 'SM - Tablet',\n    value: BesignerDeviceFlag.SM,\n    icon: { path: ICON_VARIANT_TABLET.path },\n  },\n  {\n    children: 'MD - Laptop',\n    value: BesignerDeviceFlag.MD,\n    icon: { path: ICON_VARIANT_LAPTOP.path },\n  },\n  {\n    children: 'LG - Desktop',\n    value: BesignerDeviceFlag.LG,\n    icon: { path: ICON_VARIANT_MONITOR_SMALL.path },\n  },\n  {\n    children: 'XL - Widescreen',\n    value: BesignerDeviceFlag.XL,\n    icon: { path: ICON_VARIANT_MONITOR_LARGE.path },\n  },\n]\n\nexport interface DevicePreviewControlsProps extends Partial<MenuProps> {}\n\nconst DevicePreviewControlsComponent = forwardRef<\n  any,\n  DevicePreviewControlsProps\n>((props, ref) => {\n  const { ...rest } = props\n\n  const [devicePreview, setDevicePreview] =\n    useAglynBesignerFlag('devicePreview')\n  const [anchorEl, setAnchorEl] = useState<Element>(null)\n  const [devicesMenuOpen, setDevicesMenuOpen] = useState(false)\n  const activeDevice = useMemo(\n    () =>\n      devicePreviewOptions.find((i) => i.value === devicePreview) ||\n      devicePreviewOptions[0],\n    [devicePreview],\n  )\n\n  const handleMenuClose = useCallback((event: MouseEvent<HTMLElement>) => {\n    setDevicesMenuOpen(false)\n  }, [])\n  const handleOpenMenu = useCallback((event: MouseEvent<HTMLElement>) => {\n    setDevicesMenuOpen(true)\n  }, [])\n  const handleMenuClick =\n    (device: BesignerDeviceFlag) => (event: MouseEvent<HTMLElement>) => {\n      setDevicePreview(device)\n      setDevicesMenuOpen(false)\n    }\n\n  return (\n    <Menu\n      ref={ref}\n      id=\"aglyn:device-preview\"\n      onClick={handleMenuClose}\n      horizontalOrigin=\"right\"\n      items={[\n        {\n          type: 'subheader',\n          children: 'Artboard preview mode',\n          sx: { lineHeight: (theme) => theme.typography.pxToRem(32) },\n        },\n        ...devicePreviewOptions.map((item) => ({\n          key: item.value,\n          selected: item.value === activeDevice.value,\n          disabled: item.value === activeDevice.value,\n          onClick: handleMenuClick(item.value),\n          endIcon:\n            item.value !== activeDevice.value\n              ? undefined\n              : {\n                  path: ICON_VARIANT_SYMBOL_CONFIRMED.path,\n                },\n          ...item,\n        })),\n      ]}\n      {...rest}\n    >\n      <MuiButtonGroup size=\"small\" variant=\"outlined\" color=\"inherit\">\n        <MuiTooltip title={'Device preview mode'}>\n          <MuiButton\n            aria-label=\"device preview mode\"\n            aria-haspopup=\"menu\"\n            aria-controls={devicesMenuOpen ? 'aglyn:device-preview' : undefined}\n            aria-expanded={devicesMenuOpen ? 'true' : undefined}\n            ref={setAnchorEl}\n            onClick={handleOpenMenu}\n            startIcon={<MdiIcon fontSize=\"inherit\" {...activeDevice.icon} />}\n            endIcon={\n              <MdiIcon fontSize=\"inherit\" path={ICON_VARIANT_MENU_DOWN.path} />\n            }\n            sx={{\n              borderColor: 'divider',\n              '& .MuiButton-endIcon': { ml: 0.15 },\n              '& .MuiButton-startIcon': { mr: 0.85 },\n            }}\n          >\n            {activeDevice.children}\n          </MuiButton>\n        </MuiTooltip>\n      </MuiButtonGroup>\n    </Menu>\n  )\n})\nDevicePreviewControlsComponent.displayName = 'DevicePreviewControlsComponent'\nDevicePreviewControlsComponent.aglyn = true\n\nexport { DevicePreviewControlsComponent }\nexport default DevicePreviewControlsComponent\n"],"names":["BesignerDeviceFlag","ICON_VARIANT_FLUID_RESPONSIVE","ICON_VARIANT_LAPTOP","ICON_VARIANT_MENU_DOWN","ICON_VARIANT_MOBILE","ICON_VARIANT_MONITOR_LARGE","ICON_VARIANT_MONITOR_SMALL","ICON_VARIANT_SYMBOL_CONFIRMED","ICON_VARIANT_TABLET","MdiIcon","Menu","Button","MuiButton","ButtonGroup","MuiButtonGroup","Tooltip","MuiTooltip","forwardRef","useCallback","useMemo","useState","useAglynBesignerFlag","devicePreviewOptions","children","value","RESPONSIVE","icon","path","XS","SM","MD","LG","XL","DevicePreviewControlsComponent","props","ref","rest","devicePreview","setDevicePreview","anchorEl","setAnchorEl","devicesMenuOpen","setDevicesMenuOpen","activeDevice","find","i","handleMenuClose","event","handleOpenMenu","handleMenuClick","device","id","onClick","horizontalOrigin","items","type","sx","lineHeight","theme","typography","pxToRem","map","item","key","selected","disabled","endIcon","undefined","size","variant","color","title","aria-label","aria-haspopup","aria-controls","aria-expanded","startIcon","fontSize","borderColor","ml","mr","displayName","aglyn"],"mappings":"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"}

package/src/lib/components/dnd/canvas-drop-indicator.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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.
+ */
+export declare const CanvasDropIndicator: (() => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default CanvasDropIndicator;

package/src/lib/components/dnd/canvas-drop-indicator.js

@@ -0,0 +1,61 @@
+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 { useDndMonitor } from "@dnd-kit/core";
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+import DropIndicator from "./drop-indicator.js";
+const DEFAULT = {
+    region: Besigner.DropRegion.CHILDREN,
+    rect: {
+        left: 0,
+        top: 0,
+        height: 0,
+        right: 0,
+        bottom: 0,
+        width: 0
+    }
+};
+export const CanvasDropIndicator = observer(()=>{
+    const [visible, setVisible] = useState(false);
+    const [rect, setRect] = useState(()=>_extends({}, DEFAULT.rect));
+    const [region, setRegion] = useState(DEFAULT.region);
+    useDndMonitor({
+        onDragStart: (event)=>setVisible(true),
+        onDragEnd: (event)=>setVisible(false),
+        onDragCancel: (event)=>setVisible(false),
+        onDragOver (event) {
+            var _event_over;
+            setVisible(Boolean(event.over));
+            if (event.over) setRect((_event_over = event.over) == null ? void 0 : _event_over.rect);
+        },
+        onDragMove: (event)=>{
+            var _event_over;
+            setRegion(((_event_over = event.over) == null ? void 0 : _event_over.data.current.region) || DEFAULT.region);
+        }
+    });
+    return /*#__PURE__*/ _jsx(DropIndicator, {
+        rect: rect,
+        visible: visible,
+        region: region
+    });
+});
+CanvasDropIndicator.displayName = 'CanvasDropIndicator';
+export default CanvasDropIndicator;
+
+//# sourceMappingURL=canvas-drop-indicator.js.map

package/src/lib/components/dnd/canvas-drop-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/dnd/canvas-drop-indicator.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 {\n  type ClientRect,\n  type DragCancelEvent,\n  type DragEndEvent,\n  type DragMoveEvent,\n  DragOverEvent,\n  type DragStartEvent,\n  useDndMonitor,\n} from '@dnd-kit/core'\nimport { observer } from 'mobx-react-lite'\nimport { useState } from 'react'\nimport DropIndicator from './drop-indicator'\n\nconst DEFAULT: { region: Besigner.DropRegion; rect: ClientRect } = {\n  region: Besigner.DropRegion.CHILDREN,\n  rect: {\n    left: 0,\n    top: 0,\n    height: 0,\n    right: 0,\n    bottom: 0,\n    width: 0,\n  },\n}\n\nexport const CanvasDropIndicator = observer(() => {\n  const [visible, setVisible] = useState(false)\n  const [rect, setRect] = useState<ClientRect>(() => ({ ...DEFAULT.rect }))\n  const [region, setRegion] = useState<Besigner.DropRegion>(DEFAULT.region)\n\n  useDndMonitor({\n    onDragStart: (event: DragStartEvent) => setVisible(true),\n    onDragEnd: (event: DragEndEvent) => setVisible(false),\n    onDragCancel: (event: DragCancelEvent) => setVisible(false),\n    onDragOver(event: DragOverEvent) {\n      setVisible(Boolean(event.over))\n      if (event.over) setRect(event.over?.rect)\n    },\n    onDragMove: (event: DragMoveEvent) => {\n      setRegion(event.over?.data.current.region || DEFAULT.region)\n    },\n  })\n\n  return <DropIndicator rect={rect} visible={visible} region={region} />\n})\nCanvasDropIndicator.displayName = 'CanvasDropIndicator'\n\nexport default CanvasDropIndicator\n"],"names":["Besigner","useDndMonitor","observer","useState","DropIndicator","DEFAULT","region","DropRegion","CHILDREN","rect","left","top","height","right","bottom","width","CanvasDropIndicator","visible","setVisible","setRect","setRegion","onDragStart","event","onDragEnd","onDragCancel","onDragOver","Boolean","over","onDragMove","data","current","displayName"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,cAAc,kBAAiB;AAC3C,SAOEC,aAAa,QACR,gBAAe;AACtB,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SAASC,QAAQ,QAAQ,QAAO;AAChC,OAAOC,mBAAmB,sBAAkB;AAE5C,MAAMC,UAA6D;IACjEC,QAAQN,SAASO,UAAU,CAACC,QAAQ;IACpCC,MAAM;QACJC,MAAM;QACNC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,OAAO,MAAMC,sBAAsBd,SAAS;IAC1C,MAAM,CAACe,SAASC,WAAW,GAAGf,SAAS;IACvC,MAAM,CAACM,MAAMU,QAAQ,GAAGhB,SAAqB,IAAO,aAAKE,QAAQI,IAAI;IACrE,MAAM,CAACH,QAAQc,UAAU,GAAGjB,SAA8BE,QAAQC,MAAM;IAExEL,cAAc;QACZoB,aAAa,CAACC,QAA0BJ,WAAW;QACnDK,WAAW,CAACD,QAAwBJ,WAAW;QAC/CM,cAAc,CAACF,QAA2BJ,WAAW;QACrDO,YAAWH,KAAoB;gBAELA;YADxBJ,WAAWQ,QAAQJ,MAAMK,IAAI;YAC7B,IAAIL,MAAMK,IAAI,EAAER,SAAQG,cAAAA,MAAMK,IAAI,qBAAVL,YAAYb,IAAI;QAC1C;QACAmB,YAAY,CAACN;gBACDA;YAAVF,UAAUE,EAAAA,cAAAA,MAAMK,IAAI,qBAAVL,YAAYO,IAAI,CAACC,OAAO,CAACxB,MAAM,KAAID,QAAQC,MAAM;QAC7D;IACF;IAEA,qBAAO,KAACF;QAAcK,MAAMA;QAAMQ,SAASA;QAASX,QAAQA;;AAC9D,GAAE;AACFU,oBAAoBe,WAAW,GAAG;AAElC,eAAef,oBAAmB"}

package/src/lib/components/dnd/draggable-droppable.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 type * as Aglyn from '@aglyn/aglyn';
+import * as Besigner from '@aglyn/besigner';
+export interface DraggableDroppableProps<T extends Aglyn.NodeSchema<any>> {
+    children: JSX.Element;
+    node: T;
+    type: Besigner.DragType;
+    accept: Besigner.DragType[];
+    disableDragging?: boolean;
+    disableDropping?: boolean;
+    idSuffix?: string;
+}
+export declare const DraggableDroppable: (<T extends Aglyn.NodeSchema<any>>(props: DraggableDroppableProps<T>) => import("react").FunctionComponentElement<any>) & {
+    displayName: string;
+};
+export default DraggableDroppable;