@sevenfold/setto-client 0.6.1 → 0.6.2

package/README.md

@@ -387,3 +387,7 @@ Produces `dist/setto-client.js` and `.d.ts` via Vite library mode. Only needed b
 - Section colour toolbar only offers `brandColors` — no custom hex/rgba input.
 - CTA card colours and nested component colours are not section-themeable yet.
 - Single editor per site (no concurrent-edit conflict handling).
+
+## Knowledge base
+
+`.wiki/` is this repo's LLM-maintained knowledge bundle (Karpathy LLM-wiki pattern, OKF core): one page per component, edit-mode feature, block-tree module, store and workflow, each with code citations, contracts, failure modes and doc-drift notes. Start at [`.wiki/index.md`](.wiki/index.md) (catalog) or [`.wiki/overview.md`](.wiki/overview.md) (the one page to read first). Keep it in sync with code changes as described in [`.wiki/AGENTS.md`](.wiki/AGENTS.md).

package/dist/SettoRepeater.d.ts

@@ -12,5 +12,22 @@ export interface SettoRepeaterProps {
 /**
  * Renders a dynamic list from i18n. In edit mode, editors can add items (button
  * at the end of the list) and remove items (round × revealed on hover).
+ *
+ * The published site gets no per-item wrapper — only the editor does.
+ *
+ * The wrapper exists to give the remove button something to be absolutely
+ * positioned against, which is edit chrome and has no business in the output.
+ * Leaving it in cost real layout: an item styled `border-b py-7 first:pt-0` is
+ * the *only* child of its own wrapper, so `:first-child` matched every item and
+ * `pt-0` won on all of them — every row in a repeated list sat flush on the
+ * rule above it instead of clearing it by 28px. The same trap catches `last:`,
+ * `odd:`, `even:` and `:not(:last-child)`; `last:border-b-0` would have erased
+ * every divider on the page.
+ *
+ * Worse, it was invisible while authoring: in edit mode the remove button is
+ * rendered before the children, so the item is not `:first-child` there and the
+ * padding appears. The editor showed the correct layout and the published site
+ * shipped the broken one. Dropping the wrapper from the published output is
+ * what brings the two back into agreement.
  */
 export declare function SettoRepeater({ itemsKey, defaultItem, itemLabel, children, className, }: SettoRepeaterProps): import("react/jsx-runtime").JSX.Element;

package/dist/SettoSection.d.ts

@@ -7,5 +7,13 @@ export interface SettoSectionProps extends ComponentPropsWithoutRef<'section'> {
  * Wraps a page section with theme-driven background colour and edit-mode
  * selection. Click the section chrome (not editable text or nested blocks)
  * to open the colour toolbar.
+ *
+ * The section also carries `id={sectionId}`, which is what makes a header's
+ * `href="#produkter"` land anywhere. Every generated site so far wrote that nav
+ * and shipped it dead: the only handle on the element was
+ * `data-setto-section`, an attribute no fragment identifier can address, and a
+ * menu that silently does nothing looks exactly like a menu that works until
+ * somebody taps it. An explicit `id` prop still wins — it is spread after this
+ * one — so a page that needs a different anchor can say so.
  */
 export declare const SettoSection: import("react").ForwardRefExoticComponent<SettoSectionProps & import("react").RefAttributes<HTMLElement>>;

package/dist/edit-mode/mount.d.ts

@@ -3,12 +3,17 @@ import type { ThemeStore } from '../lib/theme-store';
 interface EditModeShellProps {
     children: ReactNode;
     themeStore: ThemeStore | null;
+    /** When false, children render unchanged — no portals or document layout. */
+    active: boolean;
 }
 /**
  * Edit mode: full-width page with a floating Setto FAB anchored bottom-right.
  * Text is edited inline via contentEditable on `<T>` — no sidebar.
+ *
+ * Always mounted around the host app so toggling edit mode does not remount
+ * page content (which would replay GSAP / scroll-driven animations).
  */
-export declare function EditModeShell({ children, themeStore }: EditModeShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditModeShell({ children, themeStore, active }: EditModeShellProps): import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use EditModeShell */
 export declare const EditModeMount: typeof EditModeShell;
 export {};

package/dist/setto-client.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useSyncExternalStore, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, forwardRef } from "react";
+import { useState, useRef, useEffect, useSyncExternalStore, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, forwardRef, Fragment as Fragment$1 } from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
 function __rest(s, e) {
@@ -21175,21 +21175,38 @@ const EMPTY = {
 };
 function useSiteAccess(supabase, session, siteId) {
   const [state, setState] = useState(EMPTY);
+  const cachedUserIdRef = useRef(null);
   useEffect(() => {
     if (!session) {
+      cachedUserIdRef.current = null;
       setState({ sites: null, currentSite: null, loading: false, error: null });
       return;
     }
+    const userId = session.user.id;
+    const sameUser = cachedUserIdRef.current === userId;
     let cancelled = false;
-    setState((prev) => ({ ...prev, loading: true, error: null }));
+    setState((prev) => {
+      if (sameUser && prev.sites !== null && !prev.loading) {
+        return prev;
+      }
+      return {
+        ...prev,
+        loading: true,
+        error: null,
+        sites: sameUser ? prev.sites : null,
+        currentSite: sameUser ? prev.currentSite : null
+      };
+    });
     supabase.from("sites").select("*").then(({ data, error }) => {
       if (cancelled) return;
       if (error) {
+        cachedUserIdRef.current = userId;
         setState({ sites: [], currentSite: null, loading: false, error: error.message });
         return;
       }
       const rows = data ?? [];
       const current = rows.find((s) => s.id === siteId) ?? null;
+      cachedUserIdRef.current = userId;
       setState({ sites: rows, currentSite: current, loading: false, error: null });
     });
     return () => {
@@ -21217,6 +21234,7 @@ const STYLE_ID$1 = "setto-edit-layout";
 const HTML_CLASS = "setto-edit-mode";
 function useSettoDocumentLayout(active) {
   useEffect(() => {
+    if (!active) return;
     const html = document.documentElement;
     html.classList.add(HTML_CLASS);
     html.style.setProperty("--setto-fab-size", `${FAB_SIZE}px`);
@@ -22765,12 +22783,18 @@ function UndoIcon() {
     /* @__PURE__ */ jsx("path", { d: "M21 17a9 9 0 0 0-15-6.7L3 13" })
   ] });
 }
-function EditModeShell({ children, themeStore }) {
-  useSettoDocumentLayout(true);
+function EditModeShell({ children, themeStore, active }) {
+  useSettoDocumentLayout(active);
   const [toolbarRoot, setToolbarRoot] = useState(null);
   const [hintRoot, setHintRoot] = useState(null);
   const [sectionToolbarRoot, setSectionToolbarRoot] = useState(null);
   useEffect(() => {
+    if (!active) {
+      setToolbarRoot(null);
+      setHintRoot(null);
+      setSectionToolbarRoot(null);
+      return;
+    }
     const toolbar = document.createElement("div");
     toolbar.id = "setto-toolbar-root";
     document.body.appendChild(toolbar);
@@ -22790,12 +22814,12 @@ function EditModeShell({ children, themeStore }) {
       hint.remove();
       sectionBar.remove();
     };
-  }, []);
+  }, [active]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
-    toolbarRoot ? createPortal(/* @__PURE__ */ jsx(EditToolbar, {}), toolbarRoot) : null,
-    hintRoot ? createPortal(/* @__PURE__ */ jsx(EditLinkHint, {}), hintRoot) : null,
-    sectionToolbarRoot && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), sectionToolbarRoot) : null
+    active && toolbarRoot ? createPortal(/* @__PURE__ */ jsx(EditToolbar, {}), toolbarRoot) : null,
+    active && hintRoot ? createPortal(/* @__PURE__ */ jsx(EditLinkHint, {}), hintRoot) : null,
+    active && sectionToolbarRoot && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), sectionToolbarRoot) : null
   ] });
 }
 const SettoContext = createContext(null);
@@ -22855,7 +22879,8 @@ function SettoProvider({ config, children }) {
     themeStore: storeReady ? themeStoreRef.current : null,
     assetStore: storeReady ? assetStoreRef.current : null
   };
-  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsx(SectionEditProvider, { children: editMode && value.store ? /* @__PURE__ */ jsx(EditModeShell, { themeStore: value.themeStore, children }) : children }) });
+  const editShellActive = editMode && !!value.store;
+  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsx(SectionEditProvider, { children: /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }) }) });
 }
 function useSetto() {
   const ctx = useContext(SettoContext);
@@ -23207,6 +23232,7 @@ const SettoSection = forwardRef(
       "section",
       {
         ref,
+        id: sectionId,
         "data-setto-section": sectionId,
         className,
         style: mergedStyle,
@@ -23716,25 +23742,27 @@ function SettoRepeater({
   };
   const canRemove = keys.length > 1;
   return /* @__PURE__ */ jsxs("div", { className, "data-setto-repeater": true, children: [
-    keys.map((itemKey, index) => /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
-      editable && canRemove ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "data-setto-ui": true,
-          className: "setto-repeater-remove",
-          "aria-label": `Fjern ${itemLabel}`,
-          title: `Fjern ${itemLabel}`,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemove(itemKey);
-          },
-          style: removeBtnStyle,
-          children: "×"
-        }
-      ) : null,
-      children(itemKey, index)
-    ] }, itemKey)),
+    keys.map(
+      (itemKey, index) => editable ? /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
+        canRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-setto-ui": true,
+            className: "setto-repeater-remove",
+            "aria-label": `Fjern ${itemLabel}`,
+            title: `Fjern ${itemLabel}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleRemove(itemKey);
+            },
+            style: removeBtnStyle,
+            children: "×"
+          }
+        ) : null,
+        children(itemKey, index)
+      ] }, itemKey) : /* @__PURE__ */ jsx(Fragment$1, { children: children(itemKey, index) }, itemKey)
+    ),
     editable ? /* @__PURE__ */ jsx(
       "div",
       {