@sevenfold/setto-client 0.3.4 → 0.5.0

package/README.md

@@ -8,29 +8,34 @@ Editors authenticate via Supabase, edit text inline on the live page, pick secti
 
 ## Install
 
-```bash
-bun add @setto/client@npm:@sevenfold/setto-client
+Sevenfold sites pin a git tag, not an npm version, so changes ship without an npm round-trip:
+
+```json
+"@setto/client": "github:nitech/setto-client#v0.5.0"
 ```
 
-Or add directly to `package.json`:
+Bun clones the repo on `bun install`, runs the package's `prepare` script to build `dist/`, and links it as `@setto/client`. Vercel does the same automatically when it installs build deps.
 
-```json
-"@setto/client": "npm:@sevenfold/setto-client@^0.1.0"
+The package is also still published to npm (`@sevenfold/setto-client`) for external consumers:
+
+```bash
+bun add @setto/client@npm:@sevenfold/setto-client
 ```
 
 Peer deps: `react`, `react-dom`, `react-i18next`, `i18next`.
 
-For local monorepo development alongside `carryon.no`, a `file:` link also works — see [Local development](#local-development-sevenfold-monorepo).
+For local monorepo development the consumer's `vite.config.ts` aliases `@setto/client` to setto-client source — see [Local development](#local-development-sevenfold-monorepo).
 
-### Publishing a new version
+### Releasing a new version
 
-1. Bump `version` in `package.json`
-2. Commit and push a tag: `git tag v0.1.1 && git push origin v0.1.1`
-3. GitHub Actions publishes to npm automatically
+1. Bump `version` in `package.json` following semver (patch / minor / major).
+2. Commit and tag: `git tag v0.5.1 && git push origin main --follow-tags`.
+3. In each consumer (`carryon.no`, `setto-site`):
+   - Update the tag in `package.json` (e.g. `#v0.5.0` → `#v0.5.1`).
+   - Run `bun install` to refresh the lockfile.
+   - Push — Vercel pulls the new tag on the next deploy.
 
-Requires an `NPM_TOKEN` secret in the GitHub repo (Granular Access Token from npmjs.com with write access to `@sevenfold`).
-
-Or trigger manually via **Actions → Publish to npm → Run workflow**.
+GitHub Actions still publishes to npm automatically when `package.json` lands on `main` (requires `NPM_TOKEN` secret), but Sevenfold consumers no longer wait for it.
 
 ---
 
@@ -67,7 +72,9 @@ createRoot(document.getElementById('root')!).render(
 );
 ```
 
-### 2. Mount the admin route
+### 2. Mount the Setto route
+
+Editors sign in once at `sitenavn.no/setto`. After that, every visit to the public site auto-enters edit mode for as long as the Supabase session persists.
 
 ```tsx
 // App.tsx
@@ -75,7 +82,7 @@ import { SettoAdminApp } from '@setto/client';
 
 <Routes>
   <Route path="/" element={<Home />} />
-  <Route path="/admin/*" element={<SettoAdminApp />} />
+  <Route path="/setto/*" element={<SettoAdminApp />} />
 </Routes>
 ```
 
@@ -124,24 +131,32 @@ function ValuesSection() {
 
 ## Edit mode
 
-Edit mode activates when **both** are true:
+Edit mode activates whenever **all** of these are true:
 
-1. Authenticated Supabase session.
-2. URL contains `?setto=edit`.
+1. The user has an authenticated Supabase session.
+2. The user has access to `config.siteId` (a row in the `sites` table that they can read).
+3. The current path is not `/setto` (the dashboard is rendered without inline editing).
 
-The `/admin` dashboard does **not** activate edit mode. Use **Begynn å redigere**, which navigates to `/?setto=edit`.
+Sign-in at `/setto` persists via Supabase, so subsequent visits drop straight into edit mode — no URL flag, no extra step.
 
 ### What editors see
 
+A small round Setto button floats in the bottom-right corner. While there are no unpublished changes it stays as a circle showing only the Setto mark. As soon as you edit something it grows into a pill containing **Publiser** and a **⋯** menu with:
+
+| Item | Effect |
+|------|--------|
+| **Avbryt** | Discards every unsaved draft (text, section colours, image uploads) |
+| **Logg ut** | Signs out via Supabase and exits edit mode |
+| **Historikk** | Opens the `/setto` dashboard with deployment history |
+
 | Action | How |
 |--------|-----|
 | Edit text | Click any `<T>` element — it becomes `contentEditable` |
 | Edit section colours | Click a section or block background (not text) |
 | Follow a link | Ctrl/Cmd + click (desktop) · **Naviger ↗** chip when focused (touch) |
-| Publish | Top toolbar → **Publiser** |
-| Exit | Top toolbar → **Avslutt** (removes `?setto=edit`) |
+| Publish | FAB → **Publiser** (visible once you have drafts) |
 
-A fixed toolbar sits at the top of the viewport. When you click a section or block, a compact colour toolbar appears above it, centred and sized to its contents. Click again or press Escape to dismiss.
+When you click a section or block, a compact colour toolbar appears above it. Click again or press Escape to dismiss.
 
 ---
 
@@ -272,31 +287,41 @@ 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.
 
 ---
 
 ## Publish flow
 
-1. Editor clicks **Publiser** in the top toolbar.
+1. Editor clicks **Publiser** in the floating FAB.
 2. Client serialises changed locale bundles + `sections.json` (if theme drafts exist).
 3. `POST /sites/:siteId/publish` with `{ files: [{ path, content }] }`.
 4. setto-server validates paths against `content_paths`, commits to GitHub.
@@ -308,9 +333,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. After sign-in the dashboard redirects to the site home, where edit mode auto-activates. Invite links from Supabase land on `/setto` to set a password. Does not render the inline editor itself.
 
 ---
 
@@ -353,7 +378,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,11 +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).
+ *  - Redirects to the site home `/`. Edit mode activates automatically there
+ *    via `SettoProvider` when the user has access to `config.siteId`.
  *  - Shows the dashboard only when the user lacks access to this site, or on
- *    `/admin?deployment=…` for publish progress / history.
- *
- * Editing happens on the public site at `/?setto=edit`.
+ *    `/setto?deployment=…` for publish progress / history.
  */
 export declare function SettoAdminApp(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,4 @@
-/** Height of the fixed edit toolbar (px). */
-export declare const TOOLBAR_HEIGHT = 44;
+/** Diameter of the collapsed FAB and height of the expanded pill (px). */
+export declare const FAB_SIZE = 52;
+/** Distance from the viewport edges to the FAB (px). */
+export declare const FAB_INSET = 16;

package/dist/edit-mode/document-layout.d.ts

@@ -1,5 +1,7 @@
 /**
- * Reserves space at the top of the viewport for the Setto edit toolbar.
- * The host site keeps full width — only vertical offset is applied.
+ * Applies the document-level CSS for inline edit mode. The fixed top toolbar
+ * has been replaced with a floating FAB anchored bottom-right, so the host
+ * page no longer needs vertical padding — only edit-affordance hover styles
+ * and the portal layers above the page.
  */
 export declare function useSettoDocumentLayout(active: boolean): void;

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

@@ -5,8 +5,8 @@ interface EditModeShellProps {
     themeStore: ThemeStore | null;
 }
 /**
- * Edit mode: full-width page with a fixed toolbar at the top. Text is edited
- * inline via contentEditable on `<T>` — no sidebar.
+ * Edit mode: full-width page with a floating Setto FAB anchored bottom-right.
+ * Text is edited inline via contentEditable on `<T>` — no sidebar.
  */
 export declare function EditModeShell({ children, themeStore }: EditModeShellProps): import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use EditModeShell */

package/dist/edit-mode/setto-mark.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+interface SettoMarkProps {
+    size?: number;
+    /** Color of the "S" letter. Defaults to the Setto crema tone. */
+    letterColor?: string;
+    /** Color of the accent dot. Defaults to the Setto terracotta. */
+    dotColor?: string;
+    style?: CSSProperties;
+}
+/**
+ * Setto brand mark — the foreground of the setto-site favicon (italic "S" with
+ * a terracotta dot) on a transparent background. The FAB renders the dark
+ * Blekk background itself so the mark only carries the glyphs.
+ */
+export declare function SettoMark({ size, letterColor, dotColor, style, }: SettoMarkProps): import("react/jsx-runtime").JSX.Element;
+export {};

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/theme-store.d.ts

@@ -27,6 +27,8 @@ export declare class ThemeStore {
     set(sectionId: string, field: string, value: string): void;
     /** Replace baseline from GitHub without creating drafts. */
     loadBaseline(next: SectionsTheme): void;
+    /** Resets every draft back to its original value. */
+    revertAll(): void;
     commit(): void;
     size(): number;
     serialise(): SectionsTheme;

package/dist/lib/urls.d.ts

@@ -1,6 +1,16 @@
-/** Site home with inline edit mode active. */
-export declare function editModeUrl(pathname?: string): string;
+/**
+ * Base path where the Setto login + dashboard SPA is mounted on the host site.
+ * Editors reach the dashboard 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 URL used after sign-in. Edit mode itself is now driven by the
+ * Supabase session + site access — no URL flag required — so this just sends
+ * the editor to the public site root.
+ */
+export declare function siteHomeUrl(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/lib/use-site-access.d.ts

@@ -0,0 +1,16 @@
+import type { Session, SupabaseClient } from '@supabase/supabase-js';
+import type { SiteRow } from '../types';
+export interface SiteAccessState {
+    /** All sites the current user can access. `null` until loaded. */
+    sites: SiteRow[] | null;
+    /** The site matching `siteId`, or `null` if the user has no access. */
+    currentSite: SiteRow | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Loads the sites table for the current Supabase session and resolves whether
+ * the user has access to `siteId`. Returns a stable shape across loading,
+ * success, and failure so callers can read `currentSite` directly.
+ */
+export declare function useSiteAccess(supabase: SupabaseClient, session: Session | null, siteId: string): SiteAccessState;

package/dist/provider.d.ts

@@ -4,7 +4,7 @@ import { type SettoApi } from './lib/api';
 import { I18nStore } from './lib/i18n-store';
 import { AssetStore } from './lib/asset-store';
 import { ThemeStore } from './lib/theme-store';
-import type { SettoConfig } from './types';
+import type { SettoConfig, SiteRow } from './types';
 interface SettoContextValue {
     config: SettoConfig;
     supabase: SupabaseClient;
@@ -12,8 +12,12 @@ interface SettoContextValue {
     session: Session | null;
     /** True while the initial auth state is being read from local storage. */
     authLoading: boolean;
-    /** True when inline edit mode is active (`?setto=edit` + session). */
+    /** True when inline edit mode is active (session + site access). */
     editMode: boolean;
+    /** Site row matching `config.siteId`, or `null` if the user has no access. */
+    currentSite: SiteRow | null;
+    /** All sites the user can access (loaded after sign-in). */
+    sites: SiteRow[] | null;
     /**
      * Lazily created when i18next is initialised. Components that need it
      * should `if (!store) return null;` until then.
@@ -32,10 +36,11 @@ export interface SettoProviderProps {
  *
  * Edit mode is on when ALL of:
  *   1. There is an authenticated Supabase session.
- *   2. The URL contains `?setto=edit`.
+ *   2. The user has access to `config.siteId` in the Setto sites table.
+ *   3. The current path is not the `/setto` admin SPA.
  *
- * The /admin dashboard does not activate edit mode — use "Begynn å redigere"
- * which navigates to `/?setto=edit`.
+ * Once an editor signs in via `/setto`, returning visits auto-enter edit mode
+ * for as long as the Supabase session persists.
  */
 export declare function SettoProvider({ config, children }: SettoProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSetto(): SettoContextValue;