storyloco 2.9.0 → 2.11.0

package/README.md

@@ -17,6 +17,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **⏰ Time** - Simple time input field with step control
 - **💷 Currency** - Amount input with a currency selector; configure allowed codes via the `currencies` and `default_currency` options
 - **📅 Dates** - List of dates, each with an optional time, end date and end time, plus a timezone picker; configure via the `min`, `max` and `auto_sort` options
+- **⛪ ChurchSuite Categories** - Multi-select of ChurchSuite calendar categories, read from your site's endpoint via the `endpoint` option
 
 ### Vite Plugins
 
@@ -114,6 +115,19 @@ API methods await it, so you never call it on the server. `components` takes the
 `import.meta.glob`: Vite has to see the literal pattern to rewrite it, so the glob has to stay
 at your call site rather than move into the client.
 
+`api` goes to the SDK as its `apiOptions`. To keep the token off the browser, read through a
+proxy of your own that adds it, and give the client a stand-in:
+
+```typescript
+export const client = new StoryblokClient({
+	token: 'proxy',
+	// the SDK wants a whole URL
+	api: { endpoint: `${browser ? location.origin : 'http://localhost'}/api/storyblok` }
+})
+```
+
+The editor then takes the real token from `STORYBLOK_ACCESS_TOKEN`.
+
 `client.handle_error` is on the instance, so `.catch(client.handle_error)` works without
 wrapping anything.
 
@@ -270,6 +284,110 @@ await client.get('cdn/datasource_entries', { version })
 
 Errors go through `client.handle_error`, so a missing story is a 404 and anything else a 500, shaped by the client's `error` option.
 
+### Edit on the Site
+
+Anyone with a role in the space can edit the real site in place, signed in with their own
+Storyblok account, so their permissions apply and every change is credited to them. Changes
+save as drafts; Publish in the corner badge lists what will go live, block by block, first.
+
+It needs the **Site Editor** app installed in the space (Storyblok › Apps), with the site's
+origin allowed on the app's page. `localhost` always is, and a pattern like
+`https://*-team.vercel.app` covers every preview. Then three lines:
+
+```typescript
+// hooks.server.ts
+import { editor } from 'storyloco/editor/server'
+
+export const handle = sequence(editor, version /* , ...the rest */)
+```
+
+```svelte
+<!-- +layout.svelte -->
+<script lang="ts">
+	import { EditBar } from 'storyloco/editor'
+</script>
+
+<EditBar />
+```
+
+```typescript
+// app.d.ts
+interface Locals {
+	editor?: import('storyloco/editor/server').Editor
+}
+```
+
+A site with a Content Security Policy needs `wss://moxy.uilo.co` in its `connect-src`, for the
+multiplayer socket, and `'self'` in its `frame-ancestors`, for the phone and tablet preview.
+
+A site that picks its own content version rather than using `version` asks `editor_version(event)`
+first: draft for editors and guests, published for the live view. A site that caches pages at
+its CDN (`s-maxage`) needs editors, and guests (`sl_guest…`), on a cache key of their own, or
+whoever signs in on the live site is handed the cached visitor page, with no edit bar. The CDN
+answers before the hook runs and won't vary on cookies, so it takes Routing Middleware: when a
+request carries an `sl_editor…` cookie, rewrite it onto a `?_storyloco=1` URL, and never cache
+responses there.
+
+No secrets: sign-in runs through moxy, and the space comes from `STORYBLOK_SPACE_ID` or the
+site's public token. Blocks that spread `attrs(blok)` are editable as they are; nothing marks
+fields up. With edit mode on (the badge's switch, or **E**):
+
+- **Text** edits where it is, matched to its field by what it shows. Body copy edits in place
+  as rich text, with the site's own styles.
+- **Images** offer Replace: the space's library or an upload, with alt text and a focus point.
+- **Blocks** get a toolbar on hover to move, duplicate, add after or delete (with Undo), and a
+  click opens every field of the block from its schema, nested blocks included. Drag a block
+  by its name in the toolbar to put it anywhere in its list.
+- **AI** suggests an image's alt text in the image picker, and rewrites a selection or
+  paragraph of rich text shorter, friendlier, clearer, or with its spelling fixed.
+- **Other stories** shown on the page, like cards listing the latest articles, edit as those
+  stories: their text and images where they show, and a click opens them.
+- **Video** uploads to Mux when the space has the Mux app connected.
+- **Undo** takes back any change made from the page, and Redo makes it again: **⌘Z** and
+  **⇧⌘Z** (Ctrl+Z and Ctrl+Y) outside a field, or the badge's arrows.
+- **Someone else** saving the page in Storyblok while it's open shows a note with Refresh.
+- **⌘K** (Ctrl+K), or the badge's ⌘ button, finds a page, a block on this one, or something
+  to do: make a new page, ask someone to review this one, or preview it at phone or tablet size.
+- **History** goes back through the page's saves on a timeline, the page showing itself as it
+  was at each one, and restores any of them as the draft (with Undo). Pages that `connect()`
+  their story show it in place; others list what restoring would change.
+- **Compare with live** (⌘K, or from Publish) flips the page between the draft and what
+  visitors see now, scrolled to the same place (**L**), with the blocks that aren't live yet
+  marked on the draft.
+- **Share** the draft, like a Google Doc, with people who don't edit in Storyblok: invite them
+  by email (they sign in from the link, once), or let anyone with the link look. Guests see the
+  draft and, if they can comment, comment; someone from the link confirms their email with a
+  code first, so no comment is anonymous. Guests never edit, resolve, or get a Storyblok token,
+  and their pages aren't cached or indexed.
+
+Everyone editing a site at once sees each other. Each person has a colour: their pointer and
+name move over the page, what they've selected is outlined, and their avatars sit by the
+badge. Text and rich text type together, letters merging as they're typed with everyone's
+caret showing, and saves to the same story take turns, so no one's change is lost.
+
+- **Follow** someone by clicking their avatar: the page goes where they go and scrolls with
+  them. Scroll yourself, or press Escape, to stop.
+- **Say something** by your pointer with **/**; the others see it as it's typed.
+- **Comment** with **C**, or the badge's speech bubble, then click where it goes. Threads take
+  replies, @mentions and Resolve. Anyone in one, or mentioned, finds it under the badge's bell,
+  its unread count on the badge, and gets a browser notification too once they've chosen
+  Notify me. A review request lands there too, and anything left unread for 15 minutes is
+  emailed, guests' included.
+
+Visitors never see any of it. On the live site, press **⌘⇧E** (Ctrl+Shift+E) or add `?edit` to
+any address to sign in; once signed in, the badge shows on every page, and ⌘⇧E or **E** turns
+edit mode on and off. In development the badge is always there.
+
+Links inside content don't navigate in edit mode; hold ⌘ or Ctrl to follow one. Match the
+editor to a site with `--editor-bg`, `-ink`, `-muted`, `-line`, `-shadow`, `-font`,
+`--editor-accent` (and `-accent-ink`), `--editor-good`, `--editor-danger`, and `--editor-pill`
+for the toast and the format bar, or build a bar of your own from `editor`, `set_editing`,
+`publish`, `signin` and `signout`.
+
+`bun run smoke <site url>…` (in `packages/vite`) checks each site loads and, signed in, that a
+click on a block opens its settings. Sign in once per site with `--signin`, which opens a
+window; later runs reuse it without one.
+
 ### Use Shared Components
 
 ```typescript
@@ -565,6 +683,13 @@ MIT License - feel free to use this however you want, you absolute legend! 🎯
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+### Releasing
+
+A release is a merge. Label a PR `release:patch`, `release:minor` or `release:major` before merging
+it, and the Release workflow bumps the version, checks and builds it, commits "Release X.Y.Z: <the
+PR's title>" to main with its tag, and publishes it to npm through trusted publishing, with no
+token or login. To release main as it stands, run Actions → Release → Run workflow.
+
 ---
 
 Built with ❤️ and a lot of swearing by the Storyloco team

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "storyloco",
-	"version": "2.9.0",
+	"version": "2.11.0",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",
@@ -36,7 +36,8 @@
 		"packages/seo/types.ts",
 		"packages/hubspot_form/types.ts",
 		"packages/currency/types.ts",
-		"packages/dates/types.ts"
+		"packages/dates/types.ts",
+		"packages/churchsuite_categories/types.ts"
 	],
 	"exports": {
 		".": {
@@ -83,6 +84,19 @@
 			"types": "./packages/vite/dist/server.d.ts",
 			"import": "./packages/vite/dist/server.js"
 		},
+		"./editor": {
+			"types": "./packages/vite/dist/editor/index.d.ts",
+			"svelte": "./packages/vite/dist/editor/index.js",
+			"import": "./packages/vite/dist/editor/index.js"
+		},
+		"./middleware": {
+			"types": "./packages/vite/dist/middleware.d.ts",
+			"import": "./packages/vite/dist/middleware.js"
+		},
+		"./editor/server": {
+			"types": "./packages/vite/dist/editor/server.d.ts",
+			"import": "./packages/vite/dist/editor/server.js"
+		},
 		"./time": {
 			"types": "./packages/time/types.ts",
 			"svelte": "./packages/time/src/app.svelte.ts"
@@ -105,22 +119,25 @@
 		"./dates": {
 			"types": "./packages/dates/types.ts",
 			"svelte": "./packages/dates/src/app.svelte.ts"
+		},
+		"./churchsuite_categories": {
+			"types": "./packages/churchsuite_categories/types.ts"
 		}
 	},
 	"devDependencies": {
-		"@types/node": "26.1.1",
-		"@typescript-eslint/eslint-plugin": "8.65.0",
-		"@typescript-eslint/parser": "8.65.0",
-		"kitto": "1.6.0",
-		"oxfmt": "0.59.0",
+		"@types/node": "26.6.5",
+		"@typescript-eslint/eslint-plugin": "8.72.0",
+		"@typescript-eslint/parser": "8.72.0",
+		"kitto": "1.16.1",
+		"oxfmt": "0.74.0",
 		"typescript": "6.0.3",
-		"vite": "7.2.2"
+		"vite": "8.3.5"
 	},
 	"peerDependencies": {
 		"@storyblok/svelte": "7.2.2",
 		"@storyblok/field-plugin": "^1.7.1",
 		"svelte": "^5.0.0",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.0.0 || ^3.0.0",
 		"storyblok-js-client": "^7.0.0"
 	},
 	"scripts": {
@@ -134,7 +151,34 @@
 		"packages/*"
 	],
 	"dependencies": {
+		"@tiptap/core": "^3.32.0",
+		"@tiptap/extension-blockquote": "^3.32.0",
+		"@tiptap/extension-bold": "^3.32.0",
+		"@tiptap/extension-code": "^3.32.0",
+		"@tiptap/extension-code-block": "^3.32.0",
+		"@tiptap/extension-collaboration": "^3.32.0",
+		"@tiptap/extension-collaboration-caret": "^3.32.0",
+		"@tiptap/extension-document": "^3.32.0",
+		"@tiptap/extension-hard-break": "^3.32.0",
+		"@tiptap/extension-heading": "^3.32.0",
+		"@tiptap/extension-highlight": "^3.32.0",
+		"@tiptap/extension-horizontal-rule": "^3.32.0",
+		"@tiptap/extension-image": "^3.32.0",
+		"@tiptap/extension-italic": "^3.32.0",
+		"@tiptap/extension-link": "^3.32.0",
+		"@tiptap/extension-list": "^3.32.0",
+		"@tiptap/extension-paragraph": "^3.32.0",
+		"@tiptap/extension-strike": "^3.32.0",
+		"@tiptap/extension-subscript": "^3.32.0",
+		"@tiptap/extension-superscript": "^3.32.0",
+		"@tiptap/extension-table": "^3.32.0",
+		"@tiptap/extension-text": "^3.32.0",
+		"@tiptap/extension-underline": "^3.32.0",
+		"@tiptap/pm": "^3.32.0",
+		"@tiptap/y-tiptap": "^3.0.10",
 		"ora": "9.4.1",
-		"path-to-regexp": "8.4.2"
+		"path-to-regexp": "9.0.0",
+		"y-protocols": "^1.0.7",
+		"yjs": "^13.6.33"
 	}
 }

package/packages/churchsuite_categories/types.ts

@@ -0,0 +1,9 @@
+export interface ChurchsuiteCategory {
+	id: number
+	name: string
+	colour?: string
+}
+
+// the chosen ChurchSuite calendar category ids; the same shape the legacy
+// churchsuite-event-categories plugin saved, so old values load as they are
+export type ChurchsuiteCategories = Array<number>

package/packages/shared/dist/components/ui/button/button.svelte.d.ts

@@ -1,52 +1,52 @@
 import { type WithElementRef } from '../../../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
-export declare const variants: import("tailwind-variants").TVReturnType<{
+export declare const variants: import("tailwind-variants/dist/types.cjs").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 border";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-secondary-foreground/10";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 relative cursor-pointer", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 border";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-secondary-foreground/10";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants/dist/types.cjs").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/90";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 border";
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-secondary-foreground/10";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
+        icon: "size-9";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 relative cursor-pointer", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof variants>['variant'];
 export type ButtonSize = VariantProps<typeof variants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/packages/shared/dist/components/ui/select/select-group.svelte

@@ -4,4 +4,4 @@
 	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props()
 </script>
 
-<SelectPrimitive.Group data-slot="select-group" {...restProps} />
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />

package/packages/shared/dist/components/ui/textarea/textarea.svelte

@@ -18,5 +18,4 @@
 		className
 	)}
 	bind:value
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>

package/packages/vite/dist/editor/anchor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Where a comment's pin sits inside its block, finer than a fraction of the block: the element it's on, by
+ * its place under the block, and the character when it's on text. A block reflows at another width, its
+ * text rewrapping, and the pin follows the word it was put on.
+ */
+export type Anchor = {
+    /** Child indexes from the block down to the element */
+    path: Array<number>;
+    tag: string;
+    /** Where on the element, or on the character, as a fraction of its box */
+    fx: number;
+    fy: number;
+    /** The character, as an offset into the element's text, and the text from there to find it again by */
+    at?: number;
+    near?: string;
+};
+/** The anchor for a point on an element inside a block; null when it isn't inside */
+export declare function anchor_at(block: Element, under: Element, x: number, y: number): Anchor | null;
+/** Where an anchor is on screen now; null when the block's changed so it isn't there any more */
+export declare function anchored(block: Element, anchor: Anchor): {
+    x: number;
+    y: number;
+} | null;

package/packages/vite/dist/editor/anchor.js

@@ -0,0 +1,92 @@
+const NEAR = 16;
+const within = (box, x, y) => x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+/** The character under a point among an element's text, as its text node and offset */
+function character_at(el, x, y) {
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    const range = document.createRange();
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        range.selectNodeContents(node);
+        if (![...range.getClientRects()].some((box) => within(box, x, y)))
+            continue;
+        for (let i = 0; i < node.length; i++) {
+            range.setStart(node, i);
+            range.setEnd(node, i + 1);
+            const box = [...range.getClientRects()].find((b) => within(b, x, y));
+            if (box)
+                return { node, i, box };
+        }
+    }
+    return null;
+}
+/** The anchor for a point on an element inside a block; null when it isn't inside */
+export function anchor_at(block, under, x, y) {
+    if (!block.contains(under))
+        return null;
+    const hit = character_at(under, x, y);
+    const el = hit?.node.parentElement ?? under;
+    const path = [];
+    for (let at = el; at !== block; at = at.parentElement)
+        path.unshift([...at.parentElement.children].indexOf(at));
+    let on = null;
+    if (hit) {
+        const before = document.createRange();
+        before.setStart(el, 0);
+        before.setEnd(hit.node, hit.i);
+        const at = before.toString().length;
+        const near = (el.textContent ?? "").slice(at, at + NEAR);
+        // all space is nothing to find it by
+        if (near.trim())
+            on = { at, near };
+    }
+    const box = on ? hit.box : el.getBoundingClientRect();
+    return {
+        path,
+        tag: el.localName,
+        fx: box.width ? (x - box.left) / box.width : 0,
+        fy: box.height ? (y - box.top) / box.height : 0,
+        ...on,
+    };
+}
+/** Where an anchor is on screen now; null when the block's changed so it isn't there any more */
+export function anchored(block, anchor) {
+    let el = block;
+    for (const i of anchor.path)
+        el = el?.children[i];
+    if (!el || el.localName !== anchor.tag)
+        return null;
+    if (anchor.at === undefined || !anchor.near) {
+        const box = el.getBoundingClientRect();
+        if (!box.width && !box.height)
+            return null;
+        return { x: box.left + anchor.fx * box.width, y: box.top + anchor.fy * box.height };
+    }
+    // the same words, where they were or as near there as they've moved to with an edit
+    const text = el.textContent ?? "";
+    const after = text.indexOf(anchor.near, anchor.at);
+    const before = text.lastIndexOf(anchor.near, anchor.at);
+    const at = after < 0
+        ? before
+        : before < 0
+            ? after
+            : after - anchor.at < anchor.at - before
+                ? after
+                : before;
+    if (at < 0)
+        return null;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let left = at;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (left >= node.length) {
+            left -= node.length;
+            continue;
+        }
+        const range = document.createRange();
+        range.setStart(node, left);
+        range.setEnd(node, left + 1);
+        const box = range.getClientRects()[0];
+        if (!box)
+            return null;
+        return { x: box.left + anchor.fx * box.width, y: box.top + anchor.fy * box.height };
+    }
+    return null;
+}