@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/FormViewer/components/editor/FieldSettingsBar.js

@@ -0,0 +1,312 @@
+import { jsx as e, jsxs as u, Fragment as F } from "react/jsx-runtime";
+import { useState as R, useMemo as q } from "react";
+import { useTranslation as f } from "react-i18next";
+import { ThirdBracketIcon as _, TextIcon as j } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as S } from "@hugeicons/react";
+import { useField as $ } from "@mantine/form";
+import { IconChevronDown as D, IconCopy as H, IconTrash as K } from "@tabler/icons-react";
+import { EmojiPicker as X } from "../../../EmojiPicker/EmojiPicker.js";
+import { ProjectIcon as U } from "../../../ProjectIcon/ProjectIcon.js";
+import { isContentControlType as W, controlsDataMap as Y } from "../../helpers/controls.js";
+import { getRandomId as Z } from "../../helpers/steps.js";
+import { useFormViewerStore as g } from "../../store/formStore.js";
+import { controlsReselect as M, stepByControlReselect as G } from "../../store/selectors.js";
+import { FormInput as A } from "../ui/FormInput.js";
+import { FormMenu as h } from "../ui/FormMenu.js";
+import { FormText as I } from "../ui/FormText.js";
+import { BarSwitch as k } from "./BarSwitch.js";
+import { ContentSettingsBar as J } from "./ContentSettingsBars.js";
+import { fieldElementKey as Q } from "./keys.js";
+import b from "./SelectableBlock.module.css.js";
+const ee = ({ control: o, stepId: i, opened: a, onChange: r }) => {
+  const { t: n } = f("forms"), { api: l, useStore: p } = g(), c = p((t) => t.onVariableHelp), B = p(M), C = q(
+    () => B.filter((t) => t.id !== o.id).map((t) => "variableName" in t && t.variableName || t.id),
+    [B, o.id]
+  ), s = $({
+    initialValue: "variableName" in o ? o.variableName ?? "" : "",
+    validate: (t) => t && C.includes(t) ? n("errors.VARIABLE_NAME_ALREADY_EXISTS") : t && !/^[A-Za-z0-9]*$/.test(t) ? n("errors.INVALID_VARIABLE_NAME") : null,
+    validateOnChange: !0,
+    onValueChange: async (t) => {
+      await s.validate() || l.updateControl(i, o.id, { variableName: t });
+    }
+  }), { error: y, ...v } = s.getInputProps();
+  return /* @__PURE__ */ u(h, { opened: a, onChange: r, position: "bottom", width: 260, children: [
+    /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ u("button", { type: "button", className: b.barBtn, children: [
+      /* @__PURE__ */ e(S, { icon: _, size: 16 }),
+      n("fieldBar.variable"),
+      /* @__PURE__ */ e(D, { size: 14 })
+    ] }) }),
+    /* @__PURE__ */ u(h.Dropdown, { p: 12, children: [
+      /* @__PURE__ */ u(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: "nowrap",
+            marginBottom: 6
+          },
+          children: [
+            /* @__PURE__ */ e(I, { size: "xs", c: "var(--mantine-color-dimmed, #868e96)", children: n("variableName") }),
+            c && /* @__PURE__ */ e(
+              I,
+              {
+                size: "xs",
+                c: "var(--mantine-primary-color-filled, #228be6)",
+                style: { cursor: "pointer" },
+                component: "span",
+                children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    onClick: () => {
+                      r(!1), c();
+                    },
+                    children: n("howToUse")
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        A,
+        {
+          placeholder: o.id,
+          maxLength: 20,
+          ...v
+        }
+      ),
+      y ? /* @__PURE__ */ e(I, { size: "xs", c: "var(--mantine-color-red-6, #fa5252)", mt: 4, children: y }) : null
+    ] })
+  ] });
+}, oe = ({ control: o, stepId: i }) => {
+  const { t: a } = f("forms"), { api: r } = g(), n = "required" in o ? !!o.required : !1;
+  return /* @__PURE__ */ e(
+    k,
+    {
+      label: a("required"),
+      checked: n,
+      onChange: (l) => r.updateControl(i, o.id, {
+        required: l.currentTarget.checked
+      })
+    }
+  );
+}, ne = ({ control: o, stepId: i }) => {
+  const { t: a } = f("forms"), { api: r } = g(), n = "otherOption" in o ? !!o.otherOption : !1;
+  return /* @__PURE__ */ e(
+    k,
+    {
+      label: a("fieldBar.other"),
+      checked: n,
+      onChange: (l) => r.updateControl(i, o.id, {
+        otherOption: l.currentTarget.checked
+      })
+    }
+  );
+}, te = ({ control: o, stepId: i }) => {
+  const { t: a } = f("forms"), { api: r } = g(), n = "icon" in o ? o.icon : void 0;
+  return /* @__PURE__ */ e(
+    X,
+    {
+      showColors: !0,
+      showIcons: !0,
+      value: n,
+      onChange: (l) => r.updateControl(i, o.id, { icon: l }),
+      position: "bottom",
+      popoverProps: { withinPortal: !0 },
+      children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: b.barBtn,
+          "aria-label": a("fieldBar.icon"),
+          children: /* @__PURE__ */ e(
+            U,
+            {
+              icon: n,
+              fallback: Y[o.controlType]?.icon
+            }
+          )
+        }
+      )
+    }
+  );
+}, re = ({
+  control: o,
+  stepId: i,
+  opened: a,
+  onChange: r
+}) => {
+  const { t: n } = f("forms"), { api: l } = g(), p = "placeholder" in o ? o.placeholder ?? "" : "";
+  return /* @__PURE__ */ u(h, { opened: a, onChange: r, position: "bottom", width: 240, children: [
+    /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ u("button", { type: "button", className: b.barBtn, children: [
+      /* @__PURE__ */ e(S, { icon: j, size: 16 }),
+      n("placeholder"),
+      /* @__PURE__ */ e(D, { size: 14 })
+    ] }) }),
+    /* @__PURE__ */ e(h.Dropdown, { p: 12, children: /* @__PURE__ */ e(
+      A,
+      {
+        value: p,
+        onChange: (c) => l.updateControl(i, o.id, {
+          placeholder: c.currentTarget.value
+        })
+      }
+    ) })
+  ] });
+}, T = ({
+  label: o,
+  value: i,
+  onApply: a,
+  opened: r,
+  onChange: n
+}) => /* @__PURE__ */ u(h, { opened: r, onChange: n, position: "bottom", width: 140, children: [
+  /* @__PURE__ */ e(h.Target, { children: /* @__PURE__ */ u("button", { type: "button", className: b.barBtn, children: [
+    o,
+    i != null ? ` ${i}` : "",
+    /* @__PURE__ */ e(D, { size: 14 })
+  ] }) }),
+  /* @__PURE__ */ e(h.Dropdown, { p: 12, children: /* @__PURE__ */ e(
+    A,
+    {
+      type: "number",
+      step: 1,
+      value: i ?? "",
+      onChange: (l) => {
+        const p = l.currentTarget.value;
+        a(p === "" ? void 0 : Number(p));
+      }
+    }
+  ) })
+] }), ie = ({ control: o, stepId: i }) => {
+  const { t: a } = f("forms"), { api: r } = g(), n = () => {
+    const l = { ...o, id: Z(), variableName: void 0 };
+    r.addControl(i, l, o.id), r.setEditorSelection({
+      type: "element",
+      stepId: i,
+      elementKey: Q(l.id)
+    });
+  };
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: b.barBtn,
+      "aria-label": a("duplicate"),
+      onClick: n,
+      children: /* @__PURE__ */ e(H, { size: 16 })
+    }
+  );
+}, ae = ({ control: o, stepId: i }) => {
+  const { t: a } = f("forms"), { api: r } = g(), n = () => {
+    r.removeControl(i, o.id), r.clearEditorSelection();
+  };
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: `${b.barBtn} ${b.barBtnDanger}`,
+      "aria-label": a("delete"),
+      onClick: n,
+      children: /* @__PURE__ */ e(K, { size: 16 })
+    }
+  );
+}, le = {
+  text: { min: "minLength", max: "maxLength" },
+  longText: { min: "minLength", max: "maxLength" },
+  number: { min: "min", max: "max" },
+  slider: { min: "min", max: "max" },
+  scale: { min: "min", max: "max" },
+  multipleChoice: { min: "minOptions", max: "maxOptions" }
+}, Ae = ({
+  controlId: o,
+  blockEl: i
+}) => {
+  const { t: a } = f("forms"), { useStore: r, api: n } = g(), l = r(M), p = r(G), [c, B] = R(null), C = (d) => (P) => B(P ? d : null), s = l.find((d) => d.id === o), y = p[o];
+  if (!s || !y) return null;
+  if (W(s.controlType))
+    return /* @__PURE__ */ e(
+      J,
+      {
+        controlType: s.controlType,
+        controlId: s.id,
+        blockEl: i
+      }
+    );
+  const v = y.id, t = s.controlType, N = s, x = { control: s, stepId: v }, w = le[t], z = t !== "yesNo", E = t === "choice" || t === "multipleChoice", L = t === "dropdown", V = [
+    "dropdown",
+    "number",
+    "email",
+    "phone",
+    "location",
+    "text",
+    "longText"
+  ].includes(t), O = t === "rating", m = [];
+  return z && (m.push(
+    /* @__PURE__ */ e(
+      ee,
+      {
+        ...x,
+        opened: c === "variable",
+        onChange: C("variable")
+      },
+      "variable"
+    )
+  ), m.push(/* @__PURE__ */ e("span", { className: b.barDivider }, "variable-divider"))), m.push(/* @__PURE__ */ e(oe, { ...x }, "required")), E && m.push(/* @__PURE__ */ e(ne, { ...x }, "other")), L && m.push(/* @__PURE__ */ e(te, { ...x }, "icon")), V && m.push(
+    /* @__PURE__ */ e(
+      re,
+      {
+        ...x,
+        opened: c === "placeholder",
+        onChange: C("placeholder")
+      },
+      "placeholder"
+    )
+  ), w && (m.push(
+    /* @__PURE__ */ e(
+      T,
+      {
+        label: a("fieldBar.min"),
+        value: N[w.min],
+        opened: c === "min",
+        onChange: C("min"),
+        onApply: (d) => n.updateControl(v, s.id, { [w.min]: d })
+      },
+      "min"
+    )
+  ), m.push(
+    /* @__PURE__ */ e(
+      T,
+      {
+        label: a("fieldBar.max"),
+        value: N[w.max],
+        opened: c === "max",
+        onChange: C("max"),
+        onApply: (d) => n.updateControl(v, s.id, { [w.max]: d })
+      },
+      "max"
+    )
+  )), O && m.push(
+    /* @__PURE__ */ e(
+      T,
+      {
+        label: a("count"),
+        value: N.count,
+        opened: c === "count",
+        onChange: C("count"),
+        onApply: (d) => n.updateControl(v, s.id, { count: d })
+      },
+      "count"
+    )
+  ), /* @__PURE__ */ u(F, { children: [
+    m,
+    /* @__PURE__ */ e("span", { className: b.barDivider }),
+    /* @__PURE__ */ e(ie, { ...x }),
+    /* @__PURE__ */ e(ae, { ...x })
+  ] });
+};
+export {
+  Ae as FieldSettingsBar
+};

package/dist/components/FormViewer/components/editor/FloatingBar.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+type FloatingBarProps = {
+    /** DOM-элемент выделенного блока/слайда — точка привязки панели. */
+    reference: HTMLElement | null;
+    /** Наполнение панели (зависит от типа выделения). */
+    children: ReactNode;
+};
+/**
+ * Плавающая панель настроек (как в FigJam), всплывающая над выделенным
+ * элементом/слайдом. Позиционируется через floating-ui и монтируется в портал,
+ * поэтому не зависит от overflow/transform родителей и следует за целью при
+ * скролле и ресайзе. Наполнение передаётся как `children`.
+ */
+export declare const FloatingBar: ({ reference, children }: FloatingBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FloatingBar.d.ts.map

package/dist/components/FormViewer/components/editor/FloatingBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/FloatingBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAU,MAAM,OAAO,CAAC;AAcrE,KAAK,gBAAgB,GAAG;IACtB,oEAAoE;IACpE,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,yBAAyB,gBAAgB,4CAmDpE,CAAC"}

package/dist/components/FormViewer/components/editor/FloatingBar.js

@@ -0,0 +1,57 @@
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { useRef as w } from "react";
+import { useFloating as h, FloatingPortal as x } from "../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import l from "./SelectableBlock.module.css.js";
+import { autoUpdate as y } from "../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as b, flip as v, shift as F, arrow as R } from "../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const S = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, E = ({ reference: s, children: a }) => {
+  const t = w(null), { refs: n, floatingStyles: p, middlewareData: m, placement: f, isPositioned: d } = h({
+    open: !0,
+    strategy: "fixed",
+    placement: "top",
+    elements: { reference: s },
+    whileElementsMounted: y,
+    middleware: [
+      b(12),
+      v({ padding: 8 }),
+      F({ padding: 8 }),
+      R({ element: t })
+    ]
+  }), o = (g) => g.stopPropagation(), c = f.split("-")[0], e = m.arrow?.x, r = {
+    left: e != null ? `${e}px` : void 0
+  };
+  return r[S[c]] = "-5px", /* @__PURE__ */ i(x, { children: /* @__PURE__ */ u(
+    "div",
+    {
+      ref: n.setFloating,
+      role: "toolbar",
+      className: l.floatingBar,
+      style: {
+        ...p,
+        visibility: d ? "visible" : "hidden"
+      },
+      onClick: o,
+      onMouseDown: o,
+      children: [
+        /* @__PURE__ */ i(
+          "span",
+          {
+            ref: t,
+            "aria-hidden": !0,
+            className: l.floatingBarArrow,
+            style: r
+          }
+        ),
+        a
+      ]
+    }
+  ) });
+};
+export {
+  E as FloatingBar
+};

package/dist/components/FormViewer/components/editor/MediaSettingsBar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Плавающая панель бокового медиа-элемента слайда (`step.media`): расположение,
+ * размер, блюр, яркость, замена и удаление. Отдельная от панели фона слайда.
+ */
+export declare const MediaSettingsBar: ({ stepId }: {
+    stepId: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MediaSettingsBar.d.ts.map

package/dist/components/FormViewer/components/editor/MediaSettingsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSettingsBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/MediaSettingsBar.tsx"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,mDAoJ9D,CAAC"}

package/dist/components/FormViewer/components/editor/MediaSettingsBar.js

@@ -0,0 +1,137 @@
+import { jsxs as s, Fragment as x, jsx as n } from "react/jsx-runtime";
+import { useState as z, useRef as M } from "react";
+import { useTranslation as N } from "react-i18next";
+import { IconLayoutAlignLeft as T, IconLayoutAlignRight as k, IconChevronDown as A, IconUpload as v, IconTrash as D } from "@tabler/icons-react";
+import { getRandomId as w } from "../../helpers/steps.js";
+import { useFormViewerStore as E } from "../../store/formStore.js";
+import { FormMenu as c } from "../ui/FormMenu.js";
+import { SliderMenu as y, ImagePicker as L } from "./barControls.js";
+import i from "./SelectableBlock.module.css.js";
+const R = [25, 30, 35, 40], B = 40, G = ({ stepId: l }) => {
+  const { t: o } = N("forms"), { useStore: u, api: d } = E(), f = u((e) => e.config.steps.find((a) => a.id === l)), b = u((e) => e.uploadFileFn), [p, S] = z(null), m = (e) => (a) => S(a ? e : null), g = M(null);
+  if (!f?.media) return null;
+  const t = f.media, r = (e) => d.updateStep(l, { media: { ...t, ...e } }), I = async (e) => {
+    const a = e?.[0];
+    if (!a || !b) return;
+    const F = {
+      id: w(),
+      file: a,
+      isError: !1,
+      isLoading: !0,
+      isSuccess: !1
+    }, h = await b(F, { stepId: l });
+    h && r({ video: h });
+  }, C = () => {
+    d.updateStep(l, { media: void 0 }), d.clearEditorSelection();
+  };
+  return /* @__PURE__ */ s(x, { children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        ref: g,
+        type: "file",
+        accept: "video/*",
+        hidden: !0,
+        onChange: (e) => {
+          I(e.currentTarget.files), e.currentTarget.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: ["left", "right"].map((e) => /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: i.barBtn,
+        "data-active": (t.layout ?? "left") === e || void 0,
+        onClick: () => r({ layout: e }),
+        children: e === "left" ? /* @__PURE__ */ n(T, { size: 16 }) : /* @__PURE__ */ n(k, { size: 16 })
+      },
+      e
+    )) }),
+    /* @__PURE__ */ s(
+      c,
+      {
+        opened: p === "size",
+        onChange: m("size"),
+        position: "bottom",
+        width: 120,
+        children: [
+          /* @__PURE__ */ n(c.Target, { children: /* @__PURE__ */ s("button", { type: "button", className: i.barBtn, children: [
+            o("slideBar.size"),
+            " ",
+            t.size ?? B,
+            "%",
+            /* @__PURE__ */ n(A, { size: 14 })
+          ] }) }),
+          /* @__PURE__ */ n(c.Dropdown, { children: R.map((e) => /* @__PURE__ */ s(
+            c.Item,
+            {
+              active: (t.size ?? B) === e,
+              onClick: () => r({ size: e }),
+              children: [
+                e,
+                "%"
+              ]
+            },
+            e
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      y,
+      {
+        label: o("slideBar.blur"),
+        opened: p === "blur",
+        onChange: m("blur"),
+        value: t.blur ?? 0,
+        min: 0,
+        max: 10,
+        suffix: "px",
+        onApply: (e) => r({ blur: e })
+      }
+    ),
+    /* @__PURE__ */ n(
+      y,
+      {
+        label: o("slideBar.brightness"),
+        opened: p === "brightness",
+        onChange: m("brightness"),
+        value: t.brightness ?? 100,
+        min: 0,
+        max: 200,
+        display: (e) => `${e - 100}`,
+        onApply: (e) => r({ brightness: e })
+      }
+    ),
+    /* @__PURE__ */ n("span", { className: i.barDivider }),
+    t.video ? /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: i.barBtn,
+        onClick: () => g.current?.click(),
+        children: [
+          /* @__PURE__ */ n(v, { size: 16 }),
+          o("slideBar.replace")
+        ]
+      }
+    ) : /* @__PURE__ */ n(L, { hasImage: !0, onApply: (e) => r({ image: e }), children: /* @__PURE__ */ s("button", { type: "button", className: i.barBtn, children: [
+      /* @__PURE__ */ n(v, { size: 16 }),
+      o("slideBar.replace")
+    ] }) }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: `${i.barBtn} ${i.barBtnDanger}`,
+        "aria-label": o("slideBar.removeMedia"),
+        onClick: C,
+        children: /* @__PURE__ */ n(D, { size: 16 })
+      }
+    )
+  ] });
+};
+export {
+  G as MediaSettingsBar
+};

package/dist/components/FormViewer/components/editor/SelectableBlock.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { EditorSelectionTarget } from '../../store/formStore';
+type SelectableBlockProps = {
+    target: EditorSelectionTarget;
+    children: ReactNode;
+    /** Растянуть обёртку на всю ширину (для полей). Заголовок/кнопка — по контенту. */
+    fullWidth?: boolean;
+};
+/**
+ * Делает элемент слайда выделяемым в режиме редактирования: рамка при наведении,
+ * выделение по клику и плавающая панель настроек над выделенным элементом.
+ *
+ * Вне режима редактирования рендерит детей как есть — публичная форма не меняется.
+ */
+export declare const SelectableBlock: ({ target, children, fullWidth, }: SelectableBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectableBlock.d.ts.map

package/dist/components/FormViewer/components/editor/SelectableBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/SelectableBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAY,MAAM,OAAO,CAAC;AAExD,OAAO,EACL,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AA6C/B,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,kCAI7B,oBAAoB,4CA2CtB,CAAC"}

package/dist/components/FormViewer/components/editor/SelectableBlock.js

@@ -0,0 +1,58 @@
+import { jsx as t, Fragment as S, jsxs as B } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { useFormViewerStore as v, isSameEditorTarget as k } from "../../store/formStore.js";
+import { ButtonSettingsBar as c } from "./ButtonSettingsBar.js";
+import { DragHandle as E } from "./DragHandle.js";
+import { FieldSettingsBar as F } from "./FieldSettingsBar.js";
+import { FloatingBar as T } from "./FloatingBar.js";
+import { SelectionRing as h } from "./SelectionRing.js";
+import { TitleSettingsBar as a } from "./TitleSettingsBar.js";
+import { getElementKind as x } from "./keys.js";
+import y from "./SelectableBlock.module.css.js";
+const b = ({
+  elementKey: e,
+  blockEl: i
+}) => {
+  const o = x(e), n = e.split(":")[1];
+  return o === "slideTitle" ? /* @__PURE__ */ t(a, { scope: "slide", blockEl: i }) : o === "controlTitle" ? /* @__PURE__ */ t(a, { scope: "control", blockEl: i }) : o === "button" ? /* @__PURE__ */ t(c, {}) : o === "startButton" ? /* @__PURE__ */ t(c, { variant: "start" }) : o === "field" ? /* @__PURE__ */ t(
+    F,
+    {
+      controlId: n,
+      blockEl: i
+    },
+    n
+  ) : null;
+}, R = ({
+  target: e,
+  children: i,
+  fullWidth: o
+}) => {
+  const { useStore: n, api: l } = v(), [s, d] = g(null), f = n((r) => r.editing), m = n(
+    (r) => k(r.editorSelection, e)
+  );
+  if (!f) return /* @__PURE__ */ t(S, { children: i });
+  const p = (r) => {
+    r.stopPropagation(), l.setEditorHover(e);
+  }, u = (r) => {
+    r.stopPropagation(), l.setEditorSelection(e);
+  };
+  return /* @__PURE__ */ B(
+    "div",
+    {
+      ref: d,
+      className: y.block,
+      "data-full": o || void 0,
+      onMouseOver: p,
+      onClick: u,
+      children: [
+        /* @__PURE__ */ t(h, { target: e, variant: "element" }),
+        m && /* @__PURE__ */ t(E, {}),
+        m && e.type === "element" && /* @__PURE__ */ t(T, { reference: s, children: /* @__PURE__ */ t(b, { elementKey: e.elementKey, blockEl: s }) }),
+        i
+      ]
+    }
+  );
+};
+export {
+  R as SelectableBlock
+};

package/dist/components/FormViewer/components/editor/SelectableBlock.module.css.js

@@ -0,0 +1,41 @@
+const a = "_block_yf3uw_3", r = "_sortable_yf3uw_39", t = "_dragHandle_yf3uw_69", _ = "_ring_yf3uw_121", n = "_floatingBar_yf3uw_213", b = "_floatingBarArrow_yf3uw_245", c = "_barDivider_yf3uw_265", o = "_barBtn_yf3uw_283", w = "_barBtnLabel_yf3uw_341", l = "_barSwitch_yf3uw_353", e = "_barSwitchLabel_yf3uw_383", i = "_barSwitchInput_yf3uw_395", f = "_barSwitchTrack_yf3uw_411", s = "_barSwitchThumb_yf3uw_439", u = "_barBtnDanger_yf3uw_471", h = "_colorSwatch_yf3uw_491", y = "_addElement_yf3uw_509", S = "_barLabel_yf3uw_565", d = {
+  block: a,
+  sortable: r,
+  dragHandle: t,
+  ring: _,
+  floatingBar: n,
+  floatingBarArrow: b,
+  barDivider: c,
+  barBtn: o,
+  barBtnLabel: w,
+  barSwitch: l,
+  barSwitchLabel: e,
+  barSwitchInput: i,
+  barSwitchTrack: f,
+  barSwitchThumb: s,
+  barBtnDanger: u,
+  colorSwatch: h,
+  addElement: y,
+  barLabel: S
+};
+export {
+  y as addElement,
+  o as barBtn,
+  u as barBtnDanger,
+  w as barBtnLabel,
+  c as barDivider,
+  S as barLabel,
+  l as barSwitch,
+  i as barSwitchInput,
+  e as barSwitchLabel,
+  s as barSwitchThumb,
+  f as barSwitchTrack,
+  a as block,
+  h as colorSwatch,
+  d as default,
+  t as dragHandle,
+  n as floatingBar,
+  b as floatingBarArrow,
+  _ as ring,
+  r as sortable
+};

package/dist/components/FormViewer/components/editor/SelectionRing.d.ts

@@ -0,0 +1,13 @@
+import { EditorSelectionTarget } from '../../store/formStore';
+type SelectionRingProps = {
+    target: EditorSelectionTarget;
+    /** slide — весь слайд, element — элемент, media — боковое медиа, container — контейнер контента */
+    variant?: 'slide' | 'element' | 'media' | 'container';
+};
+/**
+ * Рамка вокруг слайда/элемента. Видна при наведении или выделении соответствующей
+ * цели. Не перехватывает события мыши (pointer-events: none).
+ */
+export declare const SelectionRing: ({ target, variant, }: SelectionRingProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectionRing.d.ts.map

package/dist/components/FormViewer/components/editor/SelectionRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionRing.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/editor/SelectionRing.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAK/B,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;CACvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,sBAG3B,kBAAkB,4CAiBpB,CAAC"}