@layers-app/shared 0.4.8 → 0.4.10

package/dist/components/FormViewer/components/Container.js

@@ -1,27 +1,67 @@
-import { jsx as n } from "react/jsx-runtime";
-import { memo as t } from "react";
-import { useFormViewerStore as e } from "../store/formStore.js";
-import c from "../FormViewer.module.css.js";
-const u = t(
-  ({ children: r, theme: o }) => {
-    const { useStore: i } = e(), a = i((s) => s.isMobile);
-    return /* @__PURE__ */ n(
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import { memo as h, useRef as C } from "react";
+import { useFormViewerStore as x, isSameEditorTarget as w } from "../store/formStore.js";
+import { ContainerSettingsBar as B } from "./editor/ContainerSettingsBar.js";
+import { FloatingBar as E } from "./editor/FloatingBar.js";
+import { SelectionRing as M } from "./editor/SelectionRing.js";
+import g from "../FormViewer.module.css.js";
+const k = h(
+  ({
+    children: u,
+    theme: r,
+    stepId: c
+  }) => {
+    const { useStore: s, api: l } = x(), v = s((e) => e.isMobile), i = s((e) => e.editing), d = r?.container, o = d?.background ?? (d?.color ? { bgType: "color", color: d.color } : void 0), t = o?.bgType ?? (o?.video ? "video" : o?.image ? "image" : "color"), m = t === "image" && !!o?.image || t === "video" && !!o?.video, a = {
+      type: "element",
+      stepId: c,
+      elementKey: `container:${c}`
+    }, b = s(
+      (e) => w(e.editorSelection, a)
+    ), p = C(null), f = i ? (e) => {
+      e.stopPropagation(), l.setEditorSelection(a);
+    } : void 0, y = i ? (e) => {
+      e.stopPropagation(), l.setEditorHover(a);
+    } : void 0, S = i ? () => l.setEditorHover(null) : void 0;
+    return /* @__PURE__ */ $(
       "div",
       {
-        className: c.container,
-        "data-size": o?.size,
-        "data-mobile": a,
+        ref: p,
+        className: g.container,
+        "data-size": r?.size,
+        "data-mobile": v,
         style: {
-          "--border-radius": `var(--mantine-radius-${o?.borderRadius})`,
-          "--blur": `${o?.container?.blur ?? 0}px`,
-          "--color": o?.container?.color,
-          "--shadow": `0 0 ${o?.container?.shadowSize || 0}px ${o?.container?.shadowColor || "transparent"}`
+          "--blur": `${r?.container?.blur ?? 0}px`,
+          // Фон контейнера: цвет — прямо на контейнере (с прозрачностью),
+          // картинка/видео — отдельным слоем `.containerBg` под контентом.
+          "--color": t === "color" && o?.color ? o.color : "transparent",
+          "--container-bg-opacity": `${(o?.opacity ?? 1) * 100}%`,
+          "--container-bg-image": m && o?.image ? `url(${o.image})` : "none",
+          "--container-bg-filter": `brightness(${o?.brightness ?? 100}%) blur(${o?.blur ?? 0}px)`,
+          "--shadow": `0 0 ${r?.container?.shadowSize || 0}px ${r?.container?.shadowColor || "transparent"}`
         },
-        children: r
+        onClick: f,
+        onMouseOver: y,
+        onMouseLeave: S,
+        children: [
+          i && /* @__PURE__ */ n(M, { target: a, variant: "container" }),
+          i && b && /* @__PURE__ */ n(E, { reference: p.current, children: /* @__PURE__ */ n(B, { stepId: c }) }),
+          m && /* @__PURE__ */ n("div", { className: g.containerBg, "aria-hidden": !0, children: t === "video" && o?.video && /* @__PURE__ */ n(
+            "video",
+            {
+              className: g.containerBgVideo,
+              src: o.video,
+              autoPlay: !0,
+              loop: !0,
+              muted: !0,
+              playsInline: !0
+            }
+          ) }),
+          u
+        ]
       }
     );
   }
 );
 export {
-  u as Container
+  k as Container
 };

package/dist/components/FormViewer/components/{StepTitle.d.ts → ControlTitle.d.ts}

@@ -1,7 +1,7 @@
 import { Control, ThemeData } from '../types/form';
-export declare const StepTitle: ({ originalStepId, control, theme, }: {
+export declare const ControlTitle: ({ originalStepId, control, theme, }: {
     originalStepId: string;
     control: Control;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=StepTitle.d.ts.map
+//# sourceMappingURL=ControlTitle.d.ts.map

package/dist/components/FormViewer/components/ControlTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/ControlTitle.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKnD,eAAO,MAAM,YAAY,GAAI,qCAI1B;IACD,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAyFA,CAAC"}

package/dist/components/FormViewer/components/ControlTitle.js

@@ -0,0 +1,94 @@
+import { jsxs as l, Fragment as h, jsx as i } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { createPortal as u } from "react-dom";
+import { useTranslation as T } from "react-i18next";
+import { STATIC_CLASSES as n, combineClasses as S } from "../helpers/staticClasses.js";
+import { useInterpolateText as C } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as I } from "../store/formStore.js";
+import { EditableContent as v } from "./fields/EditableContent/EditableContent.js";
+import x from "../FormViewer.module.css.js";
+const A = ({
+  originalStepId: m,
+  control: o,
+  theme: r
+}) => {
+  const { t: f } = T("forms"), { useStore: s, api: c } = I(), p = s((e) => e.isMobile), a = s((e) => e.editing), t = r?.title, d = y(() => {
+    const e = t?.fontSize;
+    return {
+      "--color": t?.color || "auto",
+      "--font-size": e ? `${e}px` : `var(--font-size-${r?.size})`,
+      "--font-weight": t?.fontWeight,
+      // Кавычки обязательны: имена со спецсимволами/цифрами (напр. "Press Start
+      // 2P") без кавычек — невалидный CSS, и font-family игнорируется.
+      "--font-family": t?.fontFamily ? `"${t.fontFamily}"` : void 0,
+      "--title-lh": t?.lineHeight,
+      "--title-ls": t?.letterSpacing != null ? `${t.letterSpacing}px` : void 0,
+      // Регистр лейбла: свой токен, иначе общий, иначе none.
+      "--title-tt": "var(--form-control-title-transform, var(--form-title-transform, none))",
+      // Индивидуальное выравнивание заголовка контрола
+      "--align": t?.align ?? "start"
+    };
+  }, [
+    r?.size,
+    t?.align,
+    t?.color,
+    t?.fontFamily,
+    t?.fontSize,
+    t?.fontWeight,
+    t?.lineHeight,
+    t?.letterSpacing
+  ]), g = C(o.title, a);
+  return /* @__PURE__ */ l(h, { children: [
+    u(
+      /* @__PURE__ */ i(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css2?family=${t?.fontFamily}:wght@400;500;600;700&display=swap`
+        }
+      ),
+      document.head
+    ),
+    /* @__PURE__ */ i(
+      "h1",
+      {
+        className: S(x.stepTitle, n.BLOCK_TITLE),
+        style: d,
+        "data-mobile": p,
+        children: a ? /* @__PURE__ */ l("span", { style: { display: "inline-flex" }, children: [
+          /* @__PURE__ */ i(
+            v,
+            {
+              value: o.title,
+              placeholder: f("stepTitlePlaceholder"),
+              onChange: (e) => {
+                c.updateControl(m, o.id, { title: e });
+              }
+            }
+          ),
+          o.required && /* @__PURE__ */ i(
+            "span",
+            {
+              className: n.REQUIRED_INDICATOR,
+              style: { color: "var(--form-color-error)", marginLeft: 4 },
+              children: "*"
+            }
+          )
+        ] }) : /* @__PURE__ */ l("span", { style: { display: "inline-flex" }, children: [
+          g,
+          o.required && /* @__PURE__ */ i(
+            "span",
+            {
+              className: n.REQUIRED_INDICATOR,
+              style: { color: "var(--form-color-error)", marginLeft: 4 },
+              children: "*"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  A as ControlTitle
+};

package/dist/components/FormViewer/components/FormCopyright.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Копирайт-чип формы («made with …») — кастомный, без Mantine. Ведёт на сайт
+ * бренда; цвет текста управляется токеном `--form-copyright-color`.
+ */
+export declare const FormCopyright: ({ title }: {
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormCopyright.d.ts.map

package/dist/components/FormViewer/components/FormCopyright.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCopyright.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/FormCopyright.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4CAS1D,CAAC"}

package/dist/components/FormViewer/components/FormCopyright.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import { brand as o } from "../../../config/brand.js";
+import n from "./FormCopyright.module.css.js";
+const p = ({ title: r }) => /* @__PURE__ */ e(
+  "a",
+  {
+    className: n.copyright,
+    href: o.websiteUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: r ? /* @__PURE__ */ e("span", { children: r }) : null
+  }
+);
+export {
+  p as FormCopyright
+};

package/dist/components/FormViewer/components/FormCopyright.module.css.js

@@ -0,0 +1,7 @@
+const t = "_copyright_1lqg0_5", o = {
+  copyright: t
+};
+export {
+  t as copyright,
+  o as default
+};

package/dist/components/FormViewer/components/FormThemeScope.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+/**
+ * Оборачивает произвольный контент в дизайн-токены формы (`--form-*`) и её
+ * пользовательский CSS — ровно так же, как это делает `FormViewer` для слайдов.
+ *
+ * Нужен экранам, которые живут РЯДОМ со слайдами, но должны выглядеть частью
+ * формы: например, экран результата теста после отправки. Требует, чтобы выше
+ * по дереву был `FormStoreProvider` (токены берутся из темы формы).
+ */
+export declare const FormThemeScope: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormThemeScope.d.ts.map

package/dist/components/FormViewer/components/FormThemeScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormThemeScope.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/FormThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAO5C;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAcnE,CAAC"}

package/dist/components/FormViewer/components/FormThemeScope.js

@@ -0,0 +1,16 @@
+import { jsxs as s, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { getRandomId as l } from "../helpers/steps.js";
+import { useFormGlobalTheme as d } from "../hooks/useFormGlobalTheme.js";
+import a from "../FormViewer.module.css.js";
+const y = ({ children: o }) => {
+  const [r] = i(() => l()), { themeVarsCss: t, customStyles: m } = d({ innerId: r });
+  return /* @__PURE__ */ s(n, { children: [
+    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: t } }),
+    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: m } }),
+    /* @__PURE__ */ e("div", { id: `forms-provider-${r}`, className: a.themeProvider, children: o })
+  ] });
+};
+export {
+  y as FormThemeScope
+};

package/dist/components/FormViewer/components/NavControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavControls.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/NavControls.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,eAAO,MAAM,WAAW,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDA4DvD,CAAC"}
+{"version":3,"file":"NavControls.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/NavControls.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,eAAO,MAAM,WAAW,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAsGvD,CAAC"}

package/dist/components/FormViewer/components/NavControls.js

@@ -1,58 +1,78 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { useTranslation as d } from "react-i18next";
-import { Flex as S, Button as h } from "@mantine/core";
-import { useMediaQuery as C, useWindowEvent as g } from "@mantine/hooks";
-import { IconCornerDownLeft as w } from "@tabler/icons-react";
-import { STATIC_CLASSES as b } from "../helpers/staticClasses.js";
-import { useSteps as E } from "../hooks/useCreateFormContext.js";
-import { useInterpolateText as x } from "../hooks/useInterpolateText.js";
-import { useFormViewerStore as c } from "../store/formStore.js";
-import { EditableContent as T } from "./fields/EditableContent/EditableContent.js";
-const F = ({ data: e }) => {
-  const { t: n } = d("forms"), { handleNext: i } = E(), { api: l } = c(), s = C("(max-width: 992px)"), { useStore: m } = c(), r = m((o) => o.editing), p = m((o) => o.config.settings), f = a(
+import { jsxs as W, jsx as l } from "react/jsx-runtime";
+import { useCallback as T } from "react";
+import { useTranslation as B } from "react-i18next";
+import { useMediaQuery as j, useWindowEvent as F } from "@mantine/hooks";
+import { STATIC_CLASSES as I } from "../helpers/staticClasses.js";
+import { alignRelation as d } from "../helpers/themeUtils.js";
+import { useSteps as N } from "../hooks/useCreateFormContext.js";
+import { useInterpolateText as h } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as v } from "../store/formStore.js";
+import { FormButton as w } from "./ui/FormButton.js";
+import { EditableContent as S } from "./fields/EditableContent/EditableContent.js";
+const z = ({ data: t }) => {
+  const { t: n } = B("forms"), { handleNext: s, handlePrev: k } = N(), { api: m } = v(), a = j("(max-width: 992px)"), { useStore: y } = v(), e = y((o) => o.editing), x = T(
     (o) => {
-      r || e.isEnd || s || o.code !== "Enter" || i();
+      e || t.isEnd || a || o.code !== "Enter" || s();
     },
-    [e.isEnd, r, i, s]
+    [t.isEnd, e, s, a]
   );
-  g("keydown", f);
-  const u = x(
-    e.confirmLabel,
-    r
-  );
-  return e.isStart || e.isEnd ? null : /* @__PURE__ */ t(
-    S,
-    {
-      justify: "var(--align)",
-      gap: 8,
-      wrap: "wrap",
-      direction: e.theme?.align === "start" ? "row" : "row-reverse",
-      children: /* @__PURE__ */ t(
-        h,
-        {
-          color: e.theme?.primaryColor,
-          size: e.theme?.size,
-          radius: e.theme?.borderRadius,
-          className: b.SUBMIT_BUTTON,
-          onClick: r ? void 0 : i,
-          leftSection: p.enterIndicator && /* @__PURE__ */ t(w, { size: "1em" }),
-          children: r ? /* @__PURE__ */ t(
-            T,
-            {
-              value: e.confirmLabel?.trim() || n("continue"),
-              onChange: (o) => {
-                l.updateStep(e.id, {
-                  confirmLabel: o
-                });
-              }
+  F("keydown", x);
+  const C = h(
+    t.confirmLabel,
+    e
+  ), g = h(t.backLabel, e);
+  if (t.isStart || t.isEnd)
+    return null;
+  const u = !!t.theme?.buttonFullWidth, i = t.theme?.buttonAlign ?? "start", f = !!t.theme?.buttonShowBack, r = t.theme?.buttonLayout === "vertical", c = u && !r && f, p = u && !c, b = c ? { flex: 1, minWidth: 0 } : void 0, L = r ? void 0 : i === "between" ? "space-between" : d[i], E = r ? d[i === "between" ? "start" : i] : void 0;
+  return /* @__PURE__ */ W("div", { style: {
+    display: "flex",
+    width: "100%",
+    flexDirection: r ? "column" : "row",
+    justifyContent: L,
+    alignItems: E,
+    gap: "var(--form-button-gap)",
+    flexWrap: c ? "nowrap" : "wrap"
+  }, children: [
+    f && /* @__PURE__ */ l(
+      w,
+      {
+        variant: "default",
+        fullWidth: p,
+        style: b,
+        onClick: e ? void 0 : k,
+        children: e ? /* @__PURE__ */ l(
+          S,
+          {
+            value: t.backLabel?.trim() || n("back"),
+            onChange: (o) => {
+              m.updateStep(t.id, { backLabel: o });
             }
-          ) : u || n("continue")
-        }
-      )
-    }
-  );
+          }
+        ) : g || n("back")
+      }
+    ),
+    /* @__PURE__ */ l(
+      w,
+      {
+        fullWidth: p,
+        style: b,
+        className: I.SUBMIT_BUTTON,
+        onClick: e ? void 0 : s,
+        children: e ? /* @__PURE__ */ l(
+          S,
+          {
+            value: t.confirmLabel?.trim() || n("continue"),
+            onChange: (o) => {
+              m.updateStep(t.id, {
+                confirmLabel: o
+              });
+            }
+          }
+        ) : C || n("continue")
+      }
+    )
+  ] });
 };
 export {
-  F as NavControls
+  z as NavControls
 };

package/dist/components/FormViewer/components/OneSlideLayput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OneSlideLayput.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/OneSlideLayput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAQ,MAAM,OAAO,CAAC;AAiBhD,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4BAG5B,mBAAmB,4CAqBrB,CAAC"}
+{"version":3,"file":"OneSlideLayput.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/OneSlideLayput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAQ,MAAM,OAAO,CAAC;AAchD,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAaF,eAAO,MAAM,cAAc,GAAI,4BAG5B,mBAAmB,4CAcrB,CAAC"}