@sevenfold/setto-client 0.3.4 → 0.4.0

package/README.md

@@ -67,7 +67,9 @@ createRoot(document.getElementById('root')!).render(
 );
 ```
 
-### 2. Mount the admin route
+### 2. Mount the Setto route
+
+Editors reach edit mode by visiting `sitenavn.no/setto`.
 
 ```tsx
 // App.tsx
@@ -75,7 +77,7 @@ import { SettoAdminApp } from '@setto/client';
 
 <Routes>
   <Route path="/" element={<Home />} />
-  <Route path="/admin/*" element={<SettoAdminApp />} />
+  <Route path="/setto/*" element={<SettoAdminApp />} />
 </Routes>
 ```
 
@@ -129,7 +131,7 @@ Edit mode activates when **both** are true:
 1. Authenticated Supabase session.
 2. URL contains `?setto=edit`.
 
-The `/admin` dashboard does **not** activate edit mode. Use **Begynn å redigere**, which navigates to `/?setto=edit`.
+The `/setto` dashboard does **not** activate edit mode. Use **Begynn å redigere**, which navigates to `/?setto=edit`.
 
 ### What editors see
 
@@ -272,25 +274,35 @@ Click a block's background to edit **that block's** colours. Click the section p
 
 ## Server setup (setto-server)
 
-Each site row in Supabase needs:
+Site configuration is split in two:
+
+**1. Supabase `sites` row — control plane (where + routing).** Set once when the site is registered (platform admin → **Ny side**):
 
 | Column | Example |
 |--------|---------|
-| `id` | `carryon-no` |
+| `id` | `carryon-no` (must match `siteId` in `SettoProvider`) |
 | `repo_owner` / `repo_name` / `branch` | GitHub target |
-| `content_paths` | Whitelist of publishable file paths |
+| `vercel_project_id` | `prj_…` (used to route Vercel webhooks) |
 
-Example `content_paths`:
+**2. `setto.config.json` in the site repo root — content shape.** setto-server reads this from GitHub (cached, with a DB fallback):
 
-```
-src/i18n/locales/no.json
-src/i18n/locales/en.json
-src/theme/sections.json
+```json
+{
+  "displayName": "Carry On",
+  "contentPaths": [
+    "src/i18n/locales/no.json",
+    "src/i18n/locales/en.json",
+    "src/theme/sections.json",
+    "public/images/setto/"
+  ],
+  "allowedOrigins": ["https://carryon.no", "http://localhost:3000"]
+}
 ```
 
-Only paths in this list can be committed. Add new content files here before publishing them.
+- `contentPaths` is the publish whitelist — only these paths can be committed. Add new content files here before publishing them. `setto.config.json` itself is intentionally not in the list, so editors can never widen their own access.
+- `allowedOrigins` is the CORS allow-list; the first entry is also used as the editor-invite activation domain.
 
-Register allowed origins for CORS (`allowed_origins`).
+Keeping this in the repo means content shape lives with the code that defines it, and no DB change is needed when you add a content file — just commit the config. The legacy `content_paths` / `allowed_origins` / `display_name` DB columns remain as a fallback for sites without the file.
 
 ---
 
@@ -308,9 +320,9 @@ Drafts are cleared after a successful publish.
 
 ## Admin app (`SettoAdminApp`)
 
-Route: `/admin/*`
+Route: `/setto/*`
 
-Provides Supabase email/password login (invite-only — no self-service sign-up), password reset, and a dashboard with a link to start editing (`/?setto=edit`). Invite links from Supabase land on `/admin` to set a password. Does not render the inline editor itself.
+Provides Supabase email/password login (invite-only — no self-service sign-up), password reset, and a dashboard with a link to start editing (`/?setto=edit`). Invite links from Supabase land on `/setto` to set a password. Does not render the inline editor itself.
 
 ---
 
@@ -353,7 +365,7 @@ Produces `dist/setto-client.js` and `.d.ts` via Vite library mode. Only needed b
 | `SettoSection` | Section wrapper + edit selection |
 | `SettoBlock` | Nested card/panel with its own colour toolbar |
 | `useSectionTheme` | Read section colour tokens |
-| `SettoAdminApp` | `/admin` login + dashboard |
+| `SettoAdminApp` | `/setto` login + dashboard |
 | `AuthGate` | Standalone login wrapper |
 | `BrandColor`, `SectionSchema`, `SettoConfig` | Types for host config |
 

package/dist/SettoRepeater.d.ts

@@ -10,6 +10,7 @@ export interface SettoRepeaterProps {
     className?: string;
 }
 /**
- * Renders a dynamic list from i18n. In edit mode, editors can add and remove items.
+ * 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).
  */
 export declare function SettoRepeater({ itemsKey, defaultItem, itemLabel, children, className, }: SettoRepeaterProps): import("react/jsx-runtime").JSX.Element;

package/dist/admin/App.d.ts

@@ -1,10 +1,10 @@
 /**
- * Drop-in admin SPA. Mount under a route like `<Route path="/admin/*" .../>`.
+ * Drop-in admin SPA. Mount under a route like `<Route path="/setto/*" .../>`.
  *
  * Behaviour after login:
  *  - Redirects to `/?setto=edit` on the site home (edit mode active).
  *  - Shows the dashboard only when the user lacks access to this site, or on
- *    `/admin?deployment=…` for publish progress / history.
+ *    `/setto?deployment=…` for publish progress / history.
  *
  * Editing happens on the public site at `/?setto=edit`.
  */

package/dist/guest-edit.d.ts

@@ -5,9 +5,9 @@ interface GuestEditContextValue {
     stop: () => void;
 }
 /**
- * Lets visitors inline-edit copy on a marketing site (e.g. setto.no) without
- * auth. Changes are session-only and never published. Real Setto edit mode
- * always takes precedence.
+ * Lets visitors inline-edit a marketing site (e.g. setto.no) without auth —
+ * text, section/block colours, icons and list items. Changes are session-only
+ * and never published. Real Setto edit mode always takes precedence.
  */
 export declare function GuestEditProvider({ children }: {
     children: ReactNode;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { useSectionTheme } from './use-section-theme';
 export { SettoAdminApp } from './admin/App';
+export { SETTO_BASE } from './lib/urls';
 export { AuthGate } from './edit-mode/auth-gate';
 export type { SettoConfig, BrandColor, DeploymentRow, SiteRow, ContentFile, PublishFile, PublishResult, } from './types';
 export type { SectionSchema, SectionColorField } from './section-schema';

package/dist/lib/urls.d.ts

@@ -1,6 +1,12 @@
+/**
+ * Base path where the Setto login + dashboard SPA is mounted on the host site.
+ * Editors reach edit mode by visiting `sitenavn.no/setto`. The host app must
+ * mount `<SettoAdminApp>` at this path (e.g. `<Route path="/setto/*" …>`).
+ */
+export declare const SETTO_BASE = "/setto";
 /** Site home with inline edit mode active. */
 export declare function editModeUrl(pathname?: string): string;
 export declare function isAdminRoute(): boolean;
-/** Admin deployment progress panel (`/admin?deployment=…`). */
+/** Setto deployment progress panel (`/setto?deployment=…`). */
 export declare function isAdminDeploymentView(): boolean;
 export declare function adminRedirectUrl(): string;

package/dist/provider.d.ts

@@ -34,7 +34,7 @@ export interface SettoProviderProps {
  *   1. There is an authenticated Supabase session.
  *   2. The URL contains `?setto=edit`.
  *
- * The /admin dashboard does not activate edit mode — use "Begynn å redigere"
+ * The /setto dashboard does not activate edit mode — use "Begynn å redigere"
  * which navigates to `/?setto=edit`.
  */
 export declare function SettoProvider({ config, children }: SettoProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/setto-client.js

@@ -21147,17 +21147,17 @@ class ThemeStore {
   }
 }
 const TOOLBAR_HEIGHT = 44;
-const STYLE_ID = "setto-edit-layout";
+const STYLE_ID$1 = "setto-edit-layout";
 const HTML_CLASS = "setto-edit-mode";
 function useSettoDocumentLayout(active) {
   useEffect(() => {
     const html = document.documentElement;
     html.classList.add(HTML_CLASS);
     html.style.setProperty("--setto-toolbar-height", `${TOOLBAR_HEIGHT}px`);
-    let styleEl = document.getElementById(STYLE_ID);
+    let styleEl = document.getElementById(STYLE_ID$1);
     if (!styleEl) {
       styleEl = document.createElement("style");
-      styleEl.id = STYLE_ID;
+      styleEl.id = STYLE_ID$1;
       styleEl.textContent = `
         html.setto-edit-mode {
           width: 100%;
@@ -22150,6 +22150,23 @@ function useEditBaseline() {
     };
   }, [session, store, config.siteId]);
 }
+const SETTO_BASE = "/setto";
+function editModeUrl(pathname = "/") {
+  const u = new URL(window.location.href);
+  u.pathname = pathname;
+  u.search = "";
+  u.searchParams.set("setto", "edit");
+  return u.toString();
+}
+function isAdminRoute() {
+  return window.location.pathname.startsWith(SETTO_BASE);
+}
+function isAdminDeploymentView() {
+  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
+}
+function adminRedirectUrl() {
+  return `${window.location.origin}${SETTO_BASE}`;
+}
 function EditToolbar() {
   const { store, themeStore, assetStore, api, config, supabase } = useSetto();
   const { i18n } = useTranslation();
@@ -22364,7 +22381,7 @@ function EditToolbar() {
   };
   const goToHistory = () => {
     setMenuOpen(false);
-    window.location.href = "/admin";
+    window.location.href = SETTO_BASE;
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("header", { style: barStyle, role: "toolbar", "aria-label": "Setto editor", children: [
@@ -22397,7 +22414,7 @@ function EditToolbar() {
           {
             status: deploymentRow.status,
             compact: true,
-            href: `/admin?deployment=${encodeURIComponent(activeDeployment)}`
+            href: `${SETTO_BASE}?deployment=${encodeURIComponent(activeDeployment)}`
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative" }, children: [
@@ -22699,7 +22716,8 @@ function useSetto() {
 }
 const GuestEditContext = createContext(null);
 function GuestEditProvider({ children }) {
-  const { editMode } = useSetto();
+  const { editMode, themeStore } = useSetto();
+  const { selectSection } = useSectionEdit();
   const [active, setActive] = useState(false);
   useEffect(() => {
     if (editMode && active) setActive(false);
@@ -22709,8 +22727,14 @@ function GuestEditProvider({ children }) {
     return () => document.documentElement.classList.remove("setto-guest-editing");
   }, [active]);
   const start = useCallback(() => setActive(true), []);
-  const stop = useCallback(() => setActive(false), []);
-  return /* @__PURE__ */ jsx(GuestEditContext.Provider, { value: { active, start, stop }, children });
+  const stop = useCallback(() => {
+    setActive(false);
+    selectSection(null);
+  }, [selectSection]);
+  return /* @__PURE__ */ jsxs(GuestEditContext.Provider, { value: { active, start, stop }, children: [
+    children,
+    active && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), document.body) : null
+  ] });
 }
 function useGuestEdit() {
   const ctx = useContext(GuestEditContext);
@@ -22852,9 +22876,9 @@ function T({ k }) {
   const value = store ? store.get(k, i18n.language) : t(k);
   useEffect(() => {
     const el = ref.current;
-    if (!el || focused || !editMode) return;
+    if (!el || focused || !editable) return;
     if (el.textContent !== value) el.textContent = value;
-  }, [value, focused, editMode]);
+  }, [value, focused, editable]);
   if (!editable) return /* @__PURE__ */ jsx(Fragment, { children: value });
   const handleMouseDown = (e) => {
     e.stopPropagation();
@@ -22901,7 +22925,6 @@ function T({ k }) {
     commit(e.currentTarget);
   };
   const handleInput = (e) => {
-    if (!editMode) return;
     store?.set(k, i18n.language, e.currentTarget.textContent ?? "");
   };
   const handlePaste = (e) => {
@@ -22924,7 +22947,7 @@ function T({ k }) {
         contentEditable: true,
         suppressContentEditableWarning: true,
         lang,
-        spellCheck: true,
+        spellCheck: false,
         role: "textbox",
         tabIndex: 0,
         onFocus: (e) => {
@@ -22977,9 +23000,9 @@ function isNestedThemeTarget(target, container) {
   const hit = target.closest("[data-setto-section]");
   return !!(hit && hit !== container);
 }
-function handleThemeTargetClick(e, editMode, themeId, selected, selectSection, onClick) {
+function handleThemeTargetClick(e, editable, themeId, selected, selectSection, onClick) {
   onClick?.(e);
-  if (!editMode || e.defaultPrevented) return;
+  if (!editable || e.defaultPrevented) return;
   const target = e.target;
   if (isTextEditClick(target)) return;
   if (target.closest("a[href], button, input, textarea, select")) return;
@@ -22987,11 +23010,11 @@ function handleThemeTargetClick(e, editMode, themeId, selected, selectSection, o
   e.stopPropagation();
   selectSection(selected ? null : themeId);
 }
-function themeTargetEditStyle(editMode, selected) {
-  if (!editMode) return {};
+function themeTargetEditStyle(editable, selected, accent = "#640AFF") {
+  if (!editable) return {};
   return {
     cursor: "pointer",
-    outline: selected ? "2px solid #640AFF" : void 0,
+    outline: selected ? `2px solid ${accent}` : void 0,
     outlineOffset: selected ? -2 : void 0
   };
 }
@@ -23009,23 +23032,26 @@ function useSectionTheme(sectionId) {
 const SettoSection = forwardRef(
   function SettoSection2({ sectionId, className, style, children, onClick, ...rest }, ref) {
     const { editMode } = useSetto();
+    const guest = useGuestEdit();
+    const editable = editMode || guest.active;
+    const accent = editMode ? "#640AFF" : "#C4502A";
     const { selectedId, selectSection } = useSectionEdit();
     const colors = useSectionTheme(sectionId);
     const selected = selectedId === sectionId;
     const handleClick = useCallback(
       (e) => {
-        if (editMode) {
+        if (editable) {
           const target = e.target;
           if (isNestedThemeTarget(target, e.currentTarget)) return;
         }
-        handleThemeTargetClick(e, editMode, sectionId, selected, selectSection, onClick);
+        handleThemeTargetClick(e, editable, sectionId, selected, selectSection, onClick);
       },
-      [editMode, onClick, selectSection, selected, sectionId]
+      [editable, onClick, selectSection, selected, sectionId]
     );
     const mergedStyle = {
       ...style,
       ...colors.background ? { backgroundColor: colors.background } : {},
-      ...themeTargetEditStyle(editMode, selected)
+      ...themeTargetEditStyle(editable, selected, accent)
     };
     return /* @__PURE__ */ jsx(
       "section",
@@ -23044,6 +23070,9 @@ const SettoSection = forwardRef(
 const SettoBlock = forwardRef(
   function SettoBlock2({ blockId, className, style, children, onClick, ...rest }, ref) {
     const { editMode } = useSetto();
+    const guest = useGuestEdit();
+    const editable = editMode || guest.active;
+    const accent = editMode ? "#640AFF" : "#C4502A";
     const { selectedId, selectSection } = useSectionEdit();
     const colors = useSectionTheme(blockId);
     const selected = selectedId === blockId;
@@ -23051,19 +23080,19 @@ const SettoBlock = forwardRef(
       (e) => {
         handleThemeTargetClick(
           e,
-          editMode,
+          editable,
           blockId,
           selected,
           selectSection,
           onClick
         );
       },
-      [editMode, blockId, selected, selectSection, onClick]
+      [editable, blockId, selected, selectSection, onClick]
     );
     const mergedStyle = {
       ...style,
       ...colors.background ? { backgroundColor: colors.background } : {},
-      ...themeTargetEditStyle(editMode, selected)
+      ...themeTargetEditStyle(editable, selected, accent)
     };
     return /* @__PURE__ */ jsx(
       "div",
@@ -23175,6 +23204,9 @@ function FloatingPopover({
 function SettoIcon({ k, icons, size = 24, className, style }) {
   const { t, i18n } = useTranslation();
   const { editMode, store } = useSetto();
+  const guest = useGuestEdit();
+  const editable = editMode || guest.active;
+  const accent = editMode ? "#640AFF" : "#C4502A";
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -23186,7 +23218,7 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
   const iconName = store ? store.get(k, i18n.language) : t(k);
   const Icon = icons[iconName] ?? icons[Object.keys(icons)[0] ?? ""] ?? null;
   if (!Icon) return null;
-  if (!editMode) {
+  if (!editable) {
     return /* @__PURE__ */ jsx(Icon, { size, className, style });
   }
   const handleClick = (e) => {
@@ -23217,7 +23249,7 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
         style: {
           display: "inline-flex",
           cursor: "pointer",
-          outline: open ? "2px solid #640AFF" : void 0,
+          outline: open ? `2px solid ${accent}` : void 0,
           outlineOffset: 2,
           borderRadius: 4
         },
@@ -23484,6 +23516,28 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
     )
   ] });
 }
+const STYLE_ID = "setto-repeater-styles";
+function useRepeaterStyles() {
+  useEffect(() => {
+    if (document.getElementById(STYLE_ID)) return;
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = `
+      .setto-repeater-remove {
+        opacity: 0;
+        transition: opacity 120ms ease;
+      }
+      .setto-repeater-item:hover .setto-repeater-remove,
+      .setto-repeater-remove:focus-visible {
+        opacity: 1;
+      }
+      @media (hover: none) {
+        .setto-repeater-remove { opacity: 1; }
+      }
+    `;
+    document.head.appendChild(el);
+  }, []);
+}
 function SettoRepeater({
   itemsKey,
   defaultItem,
@@ -23493,7 +23547,10 @@ function SettoRepeater({
 }) {
   const { i18n } = useTranslation();
   const { editMode, store } = useSetto();
+  const guest = useGuestEdit();
+  const editable = editMode || guest.active;
   const lng = i18n.language;
+  useRepeaterStyles();
   const [, force] = useState(0);
   useEffect(() => {
     if (!store) return;
@@ -23507,16 +23564,35 @@ function SettoRepeater({
     if (keys.length <= 1) return;
     store?.removeListItem(itemsKey, itemKey, lng);
   };
+  const canRemove = keys.length > 1;
   return /* @__PURE__ */ jsxs("div", { className, "data-setto-repeater": true, children: [
-    editMode ? /* @__PURE__ */ jsx(
+    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)),
+    editable ? /* @__PURE__ */ jsx(
       "div",
       {
         "data-setto-ui": true,
         style: {
           display: "flex",
           justifyContent: "flex-end",
-          marginBottom: 8,
-          gap: 8
+          marginTop: 8
         },
         children: /* @__PURE__ */ jsxs(
           "button",
@@ -23527,7 +23603,7 @@ function SettoRepeater({
               e.stopPropagation();
               handleAdd();
             },
-            style: controlBtnStyle,
+            style: addBtnStyle,
             children: [
               "+ Legg til ",
               itemLabel
@@ -23535,37 +23611,10 @@ function SettoRepeater({
           }
         )
       }
-    ) : null,
-    keys.map((itemKey, index) => /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
-      editMode ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "data-setto-ui": true,
-          "aria-label": `Fjern ${itemLabel}`,
-          disabled: keys.length <= 1,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemove(itemKey);
-          },
-          style: {
-            ...controlBtnStyle,
-            position: "absolute",
-            top: 0,
-            right: 0,
-            zIndex: 2,
-            padding: "4px 8px",
-            fontSize: 11,
-            opacity: keys.length <= 1 ? 0.4 : 1
-          },
-          children: "× Fjern"
-        }
-      ) : null,
-      children(itemKey, index)
-    ] }, itemKey))
+    ) : null
   ] });
 }
-const controlBtnStyle = {
+const addBtnStyle = {
   padding: "6px 10px",
   background: "#f7f7f7",
   border: "1px solid #e0e0e0",
@@ -23575,22 +23624,27 @@ const controlBtnStyle = {
   cursor: "pointer",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
 };
-function editModeUrl(pathname = "/") {
-  const u = new URL(window.location.href);
-  u.pathname = pathname;
-  u.search = "";
-  u.searchParams.set("setto", "edit");
-  return u.toString();
-}
-function isAdminRoute() {
-  return window.location.pathname.startsWith("/admin");
-}
-function isAdminDeploymentView() {
-  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
-}
-function adminRedirectUrl() {
-  return `${window.location.origin}/admin`;
-}
+const removeBtnStyle = {
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 2,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 24,
+  height: 24,
+  padding: 0,
+  background: "#ffffff",
+  border: "1px solid #e0e0e0",
+  borderRadius: "50%",
+  fontSize: 16,
+  lineHeight: 1,
+  color: "#444",
+  cursor: "pointer",
+  boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
+};
 function authCallbackType() {
   const hash = window.location.hash.replace(/^#/, "");
   if (!hash) return null;
@@ -23871,7 +23925,7 @@ const loadingStyle = {
 };
 function deploymentAdminUrl(deploymentId) {
   const u = new URL(window.location.href);
-  u.pathname = "/admin";
+  u.pathname = SETTO_BASE;
   u.search = "";
   u.searchParams.set("deployment", deploymentId);
   return u.pathname + u.search;
@@ -23984,7 +24038,7 @@ function DeploymentList({ siteId }) {
     try {
       await api.cancelDeployment(config.siteId, focusId);
       setFocusId(null);
-      window.history.replaceState(null, "", "/admin");
+      window.history.replaceState(null, "", SETTO_BASE);
     } catch (err) {
       setCancelError(err instanceof Error ? err.message : "Kunne ikke avbryte");
     } finally {
@@ -24213,6 +24267,7 @@ function depDotStyle(status) {
 export {
   AuthGate,
   GuestEditProvider,
+  SETTO_BASE,
   SettoAdminApp,
   SettoBlock,
   SettoIcon,