@sevenfold/setto-client 0.4.0 → 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).
-
-### Publishing a new version
+For local monorepo development the consumer's `vite.config.ts` aliases `@setto/client` to setto-client source — see [Local development](#local-development-sevenfold-monorepo).
 
-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
+### Releasing a new version
 
-Requires an `NPM_TOKEN` secret in the GitHub repo (Granular Access Token from npmjs.com with write access to `@sevenfold`).
+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.
 
-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.
 
 ---
 
@@ -69,7 +74,7 @@ createRoot(document.getElementById('root')!).render(
 
 ### 2. Mount the Setto route
 
-Editors reach edit mode by visiting `sitenavn.no/setto`.
+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
@@ -126,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 `/setto` 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.
 
 ---
 
@@ -308,7 +321,7 @@ Keeping this in the repo means content shape lives with the code that defines it
 
 ## 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.
@@ -322,7 +335,7 @@ Drafts are cleared after a successful publish.
 
 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 `/setto` 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.
 
 ---
 

package/dist/admin/App.d.ts

@@ -2,10 +2,9 @@
  * 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
  *    `/setto?deployment=…` for publish progress / history.
- *
- * Editing happens on the public site at `/?setto=edit`.
  */
 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/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,11 +1,15 @@
 /**
  * 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/*" …>`).
+ * 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 with inline edit mode active. */
-export declare function editModeUrl(pathname?: string): string;
+/**
+ * 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;
 /** Setto deployment progress panel (`/setto?deployment=…`). */
 export declare function isAdminDeploymentView(): boolean;

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 /setto 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;