storyloco 2.10.0 → 2.11.0

package/README.md

@@ -115,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.
 
@@ -366,9 +379,10 @@ any address to sign in; once signed in, the badge shows on every page, and ⌘
 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 `--storyloco-bar-bg`, `-ink`, `-muted`, `-line`, `-font` and
-`--storyloco-accent`, or build a bar of your own from `editor`, `set_editing`, `publish`,
-`signin` and `signout`.
+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
@@ -669,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.10.0",
+	"version": "2.11.0",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",
@@ -89,6 +89,10 @@
 			"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"
@@ -121,19 +125,19 @@
 		}
 	},
 	"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": {
@@ -173,7 +177,7 @@
 		"@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/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/block_bar.svelte

@@ -458,13 +458,13 @@
 		/* light or dark as the person prefers, whatever scheme the site uses */
 		color-scheme: light dark;
 
-		--bg: var(--storyloco-bar-bg, #fff);
-		--ink: var(--storyloco-bar-ink, #1b243f);
-		--muted: var(--storyloco-bar-muted, #6b7280);
-		--line: var(--storyloco-bar-line, rgb(27 36 63 / 0.12));
-		--accent: var(--storyloco-accent, #05807f);
-		--danger: var(--storyloco-danger, #e5484d);
-		--shadow: var(--storyloco-bar-shadow, 0 0 0 1px var(--line), 0 2px 8px rgb(27 36 63 / 0.08));
+		--bg: var(--editor-bg, #fff);
+		--ink: var(--editor-ink, #1b243f);
+		--muted: var(--editor-muted, #6b7280);
+		--line: var(--editor-line, rgb(27 36 63 / 0.12));
+		--accent: var(--editor-accent, #05807f);
+		--danger: var(--editor-danger, #e5484d);
+		--shadow: var(--editor-shadow, 0 0 0 1px var(--line), 0 2px 8px rgb(27 36 63 / 0.08));
 
 		background: var(--bg);
 		border-radius: 0.75rem;
@@ -472,7 +472,7 @@
 			var(--shadow),
 			0 4px 16px rgb(0 0 0 / 0.12);
 		color: var(--ink);
-		font: var(--storyloco-bar-font, 500 0.8125rem/1.25 system-ui, sans-serif);
+		font: var(--editor-font, 500 0.8125rem/1.25 system-ui, sans-serif);
 		max-inline-size: min(20rem, 100vw - 1rem);
 		padding: 0.25rem;
 		position: fixed;
@@ -494,7 +494,7 @@
 	}
 
 	.drop {
-		background: var(--storyloco-accent, #05807f);
+		background: var(--editor-accent, #05807f);
 		border-radius: 1px;
 		box-shadow: 0 0 0 2px rgb(255 255 255 / 0.8);
 		pointer-events: none;

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

@@ -69,7 +69,7 @@ export declare function follow(id: string | null): void;
 /** Run `listener` whenever following starts or stops */
 export declare function on_follow(listener: () => void): () => boolean;
 /** Whether a page connected its story, so the overlay knows to work it out itself */
-export declare const connected_story: () => ISbStoryData<import("storyblok-js-client").ISbComponentType<string> & {
+export declare const connected_story: () => ISbStoryData<import("@storyblok/svelte").StoryblokComponentType<string> & {
     [index: string]: any;
 }> | null;
 /** Run `listener` after each client-side navigation, which the edit bar reports */
@@ -153,7 +153,11 @@ export declare function on_sent(listener: (change: Change) => void): () => boole
  * Send a change to the `editor` hook, then reload the page's data so it shows; null if it didn't
  * save. A `shared` change, typed by several people at once, isn't any one of theirs to undo.
  */
-export declare function send(change: Change, as?: "change" | "undo" | "redo" | "shared"): Promise<Record<string, unknown> | null>;
+export declare function send(change: Change, as?: "change" | "undo" | "redo" | "shared", 
+/** `false` while the change is being typed where it shows: the page already shows it, and reloading everything for each pause is what drags */
+{ again }?: {
+    again?: boolean;
+}): Promise<Record<string, unknown> | null>;
 /** Why the last change didn't save, for the overlay's own messages */
 export declare const last_problem: () => string | null;
 /** Undo the last change made from this page; what it undid, or null with nothing to undo or if it failed */

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

@@ -318,8 +318,10 @@ const touched = new Set();
 /** The page's data again, as after a save, for a change made somewhere else */
 export async function refresh() {
     // only the browser ever saves, so the server and tests never load this
-    const { invalidateAll } = await import("$app/navigation");
-    await invalidateAll();
+    // refreshAll on SvelteKit 3, which deprecates invalidateAll; it keeps page.state too
+    const navigation = await import("$app/navigation");
+    const all = navigation;
+    await (all.refreshAll ?? all.invalidateAll)();
     for (const listener of saved_listeners)
         listener();
 }
@@ -333,7 +335,9 @@ export function on_sent(listener) {
  * Send a change to the `editor` hook, then reload the page's data so it shows; null if it didn't
  * save. A `shared` change, typed by several people at once, isn't any one of theirs to undo.
  */
-export async function send(change, as = "change") {
+export async function send(change, as = "change", 
+/** `false` while the change is being typed where it shows: the page already shows it, and reloading everything for each pause is what drags */
+{ again = true } = {}) {
     pending++;
     changed();
     try {
@@ -356,7 +360,8 @@ export async function send(change, as = "change") {
             touched.add(change.story);
         for (const listener of sent_listeners)
             listener(change);
-        await refresh();
+        if (again)
+            await refresh();
         return reply;
     }
     catch (e) {

package/packages/vite/dist/editor/comments.svelte

@@ -602,8 +602,7 @@
 			oninput={typed}
 			onkeydown={(event) => keys(event, () => post(thread))}
 			onblur={() => ((suggest = null), (menu = null))}
-			aria-label={thread ? "Reply" : "Comment"}
-		></textarea>
+			aria-label={thread ? "Reply" : "Comment"}></textarea>
 		<div class="row">
 			{#if key && !subscribed && "Notification" in globalThis}
 				<button type="button" class="quiet" onclick={notify_me}>Notify me of replies</button>
@@ -826,12 +825,12 @@
 		/* light or dark as the person prefers, whatever scheme the site uses */
 		color-scheme: light dark;
 
-		--bg: var(--storyloco-bar-bg, #fff);
-		--ink: var(--storyloco-bar-ink, #1b243f);
-		--muted: var(--storyloco-bar-muted, #6b7280);
-		--line: var(--storyloco-bar-line, rgb(27 36 63 / 0.12));
-		--accent: var(--storyloco-accent, #05807f);
-		--danger: var(--storyloco-danger, #e5484d);
+		--bg: var(--editor-bg, #fff);
+		--ink: var(--editor-ink, #1b243f);
+		--muted: var(--editor-muted, #6b7280);
+		--line: var(--editor-line, rgb(27 36 63 / 0.12));
+		--accent: var(--editor-accent, #05807f);
+		--danger: var(--editor-danger, #e5484d);
 
 		color: var(--ink);
 		font:
@@ -916,7 +915,7 @@
 
 	.count {
 		/* the edit bar's own dark, in a light theme or a dark one, so white reads on it */
-		background: var(--storyloco-pill-bg, #1b243f);
+		background: var(--editor-pill, #1b243f);
 		color: #fff;
 		border-radius: 999px;
 		font-size: 0.5625rem;
@@ -1093,7 +1092,9 @@
 
 		.who {
 			flex: 1;
+			margin-block: -0.15em;
 			overflow: hidden;
+			padding-block: 0.15em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
@@ -1121,7 +1122,7 @@
 		background: var(--accent);
 		border: 0;
 		border-radius: 999px;
-		color: var(--storyloco-accent-ink, #fff);
+		color: var(--editor-accent-ink, #fff);
 		cursor: pointer;
 		font: inherit;
 		padding: 0.3125rem 0.875rem;
@@ -1370,7 +1371,7 @@
 	}
 
 	.hint {
-		background: var(--storyloco-pill-bg, #1b243f);
+		background: var(--editor-pill, #1b243f);
 		box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
 		border-radius: 999px;
 		bottom: 1rem;

package/packages/vite/dist/editor/compare.svelte

@@ -271,13 +271,13 @@
 		--glass: rgb(16 22 42 / 0.84);
 		--ink: #f4f6fb;
 		--muted: rgb(244 246 251 / 0.62);
-		--accent: var(--storyloco-accent, #05807f);
-		--accent-ink: var(--storyloco-accent-ink, #fff);
+		--accent: var(--editor-accent, #05807f);
+		--accent-ink: var(--editor-accent-ink, #fff);
 		--live: #ffb224;
 		--spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
 
 		color: var(--ink);
-		font: var(--storyloco-bar-font, 500 0.8125rem/1.4 system-ui, sans-serif);
+		font: var(--editor-font, 500 0.8125rem/1.4 system-ui, sans-serif);
 
 		& * {
 			box-sizing: border-box;
@@ -610,7 +610,9 @@
 		& .said {
 			color: var(--muted);
 			grid-column: 2;
+			margin-block: -0.15em;
 			overflow: hidden;
+			padding-block: 0.15em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
@@ -705,7 +707,9 @@
 			inset-block-end: 1rem;
 		}
 		.count {
+			margin-block: -0.15em;
 			overflow: hidden;
+			padding-block: 0.15em;
 			text-overflow: ellipsis;
 		}
 	}

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

@@ -204,7 +204,9 @@ function meaningful(value, key = "") {
     }
     if (!value || typeof value !== "object")
         return value;
+    // in key order, since Storyblok hands back a node's keys in an order of its own
     const kept = Object.entries(value)
+        .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
         .filter(([k]) => k !== "_editable")
         .map(([k, v]) => [k, meaningful(v, k)])
         .filter(([, v]) => v !== null &&

package/packages/vite/dist/editor/edit_bar.svelte

@@ -5,8 +5,8 @@
 	nothing for visitors, or inside Storyblok's own editor, and keeps clear of Next.js's dev badge.
 	On the live site ⌘⇧E (Ctrl+Shift+E) signs in, and turns edit mode on and off once signed in.
 
-	Mount it once in the root layout. Match it to a site with `--storyloco-bar-bg`, `-ink`, `-muted`,
-	`-line`, `-shadow`, `-font` and `-offset`, `--storyloco-badge`, and `--storyloco-accent`, `-good`
+	Mount it once in the root layout. Match it to a site with `--editor-bg`, `-ink`, `-muted`,
+	`-line`, `-shadow`, `-font` and `-offset`, `--editor-badge`, and `--editor-accent`, `-good`
 	and `-danger`; or pass `accent`, which can follow a site's theme as it changes. For a different
 	bar altogether, build one from `editor`.
 
@@ -43,7 +43,7 @@
 		/**
 		 * The editor's accent, any CSS colour: outlines, toolbars and buttons, wherever they're
 		 * drawn on the page. It can change, say with a site's location theme. Storyblok's teal
-		 * otherwise, or `--storyloco-accent` set in CSS.
+		 * otherwise, or `--editor-accent` set in CSS.
 		 */
 		accent?: string
 		/** Text on the accent, where white won't read, like on a light yellow */
@@ -97,8 +97,8 @@
 		const tag = document.createElement("style")
 		tag.dataset.storyloco = "accent"
 		const rules = [
-			resolved.accent && `--storyloco-accent:${resolved.accent};`,
-			resolved.ink && `--storyloco-accent-ink:${resolved.ink};`,
+			resolved.accent && `--editor-accent:${resolved.accent};`,
+			resolved.ink && `--editor-accent-ink:${resolved.ink};`,
 		].filter(Boolean)
 		tag.textContent = `:root{${rules.join("")}}`
 		document.head.append(tag)
@@ -192,7 +192,7 @@
 		if (document.querySelector("style[data-storyloco=theme]")) return
 		const tag = document.createElement("style")
 		tag.dataset.storyloco = "theme"
-		tag.textContent = `@media (prefers-color-scheme: dark){:where(:root){--storyloco-bar-bg:#171c2c;--storyloco-bar-ink:#e8ecf5;--storyloco-bar-muted:#98a1b6;--storyloco-bar-line:rgb(255 255 255/.13);--storyloco-bar-shadow:0 0 0 1px rgb(255 255 255/.1),0 4px 14px rgb(0 0 0/.45);--storyloco-pill-bg:#2c3453;--storyloco-accent:#1fa79e}}`
+		tag.textContent = `@media (prefers-color-scheme: dark){:where(:root){--editor-bg:#171c2c;--editor-ink:#e8ecf5;--editor-muted:#98a1b6;--editor-line:rgb(255 255 255/.13);--editor-shadow:0 0 0 1px rgb(255 255 255/.1),0 4px 14px rgb(0 0 0/.45);--editor-pill:#2c3453;--editor-accent:#1fa79e}}`
 		document.head.append(tag)
 	}
 
@@ -869,16 +869,16 @@
 		/* light or dark as the person prefers, whatever scheme the site uses */
 		color-scheme: light dark;
 
-		--bg: var(--storyloco-bar-bg, #fff);
-		--ink: var(--storyloco-bar-ink, #1b243f);
-		--muted: var(--storyloco-bar-muted, #6b7280);
-		--line: var(--storyloco-bar-line, rgb(27 36 63 / 0.12));
-		--accent: var(--storyloco-accent, #05807f);
-		--good: var(--storyloco-good, #14b8a6);
-		--danger: var(--storyloco-danger, #e5484d);
-		--font: var(--storyloco-bar-font, 500 0.8125rem/1.25 system-ui, sans-serif);
-		--shadow: var(--storyloco-bar-shadow, 0 0 0 1px var(--line), 0 2px 8px rgb(27 36 63 / 0.08));
-		--o: var(--storyloco-bar-offset, 1rem);
+		--bg: var(--editor-bg, #fff);
+		--ink: var(--editor-ink, #1b243f);
+		--muted: var(--editor-muted, #6b7280);
+		--line: var(--editor-line, rgb(27 36 63 / 0.12));
+		--accent: var(--editor-accent, #05807f);
+		--good: var(--editor-good, #14b8a6);
+		--danger: var(--editor-danger, #e5484d);
+		--font: var(--editor-font, 500 0.8125rem/1.25 system-ui, sans-serif);
+		--shadow: var(--editor-shadow, 0 0 0 1px var(--line), 0 2px 8px rgb(27 36 63 / 0.08));
+		--o: var(--editor-offset, 1rem);
 
 		align-items: center;
 		border-radius: 999px;
@@ -936,13 +936,13 @@
 	}
 
 	.badge {
-		background: var(--storyloco-badge, var(--accent));
+		background: var(--editor-badge, var(--accent));
 		block-size: 2.25rem;
 		border: 0;
 		/* round, like the pill it opens into */
 		border-radius: 50%;
 		box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
-		color: var(--storyloco-accent-ink, #fff);
+		color: var(--editor-accent-ink, #fff);
 		cursor: grab;
 		display: grid;
 		flex: none;
@@ -1154,7 +1154,7 @@
 		background: var(--accent);
 		border: 0;
 		border-radius: 999px;
-		color: var(--storyloco-accent-ink, #fff);
+		color: var(--editor-accent-ink, #fff);
 		cursor: pointer;
 		font: inherit;
 		padding: 0.3125rem 0.75rem;
@@ -1262,7 +1262,9 @@
 
 	.name {
 		max-inline-size: 8rem;
+		margin-block: -0.15em;
 		overflow: hidden;
+		padding-block: 0.15em;
 		text-overflow: ellipsis;
 	}
 
@@ -1600,7 +1602,9 @@
 		flex: 1;
 		font-weight: 600;
 		min-inline-size: 0;
+		margin-block: -0.15em;
 		overflow: hidden;
+		padding-block: 0.15em;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -1642,7 +1646,9 @@
 
 	.what {
 		min-inline-size: 0;
+		margin-block: -0.15em;
 		overflow: hidden;
+		padding-block: 0.15em;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}

package/packages/vite/dist/editor/edit_bar.svelte.d.ts

@@ -2,7 +2,7 @@ type $$ComponentProps = {
     /**
      * The editor's accent, any CSS colour: outlines, toolbars and buttons, wherever they're
      * drawn on the page. It can change, say with a site's location theme. Storyblok's teal
-     * otherwise, or `--storyloco-accent` set in CSS.
+     * otherwise, or `--editor-accent` set in CSS.
      */
     accent?: string;
     /** Text on the accent, where white won't read, like on a light yellow */
@@ -14,8 +14,8 @@ type $$ComponentProps = {
  * nothing for visitors, or inside Storyblok's own editor, and keeps clear of Next.js's dev badge.
  * On the live site ⌘⇧E (Ctrl+Shift+E) signs in, and turns edit mode on and off once signed in.
  *
- * Mount it once in the root layout. Match it to a site with `--storyloco-bar-bg`, `-ink`, `-muted`,
- * `-line`, `-shadow`, `-font` and `-offset`, `--storyloco-badge`, and `--storyloco-accent`, `-good`
+ * Mount it once in the root layout. Match it to a site with `--editor-bg`, `-ink`, `-muted`,
+ * `-line`, `-shadow`, `-font` and `-offset`, `--editor-badge`, and `--editor-accent`, `-good`
  * and `-danger`; or pass `accent`, which can follow a site's theme as it changes. For a different
  * bar altogether, build one from `editor`.
  *

package/packages/vite/dist/editor/image_picker.svelte

@@ -250,8 +250,7 @@
 					<textarea
 						rows="3"
 						bind:value={alt}
-						placeholder="What the image shows, for people who can’t see it"
-					></textarea>
+						placeholder="What the image shows, for people who can’t see it"></textarea>
 				</label>
 				{#if suggest && IMAGE.test(chosen.filename) && !/\.svg$/i.test(chosen.filename)}
 					<p class="hint">
@@ -345,13 +344,13 @@
 		/* light or dark as the person prefers, whatever scheme the site uses */
 		color-scheme: light dark;
 
-		--bg: var(--storyloco-bar-bg, #fff);
-		--ink: var(--storyloco-bar-ink, #1b243f);
-		--muted: var(--storyloco-bar-muted, #6b7280);
-		--line: var(--storyloco-bar-line, rgb(27 36 63 / 0.12));
-		--accent: var(--storyloco-accent, #05807f);
-		--danger: var(--storyloco-danger, #e5484d);
-		--font: var(--storyloco-bar-font, 500 0.8125rem/1.25 system-ui, sans-serif);
+		--bg: var(--editor-bg, #fff);
+		--ink: var(--editor-ink, #1b243f);
+		--muted: var(--editor-muted, #6b7280);
+		--line: var(--editor-line, rgb(27 36 63 / 0.12));
+		--accent: var(--editor-accent, #05807f);
+		--danger: var(--editor-danger, #e5484d);
+		--font: var(--editor-font, 500 0.8125rem/1.25 system-ui, sans-serif);
 
 		background: var(--bg);
 		border: 0;
@@ -602,7 +601,7 @@
 		&.primary {
 			background: var(--accent);
 			border-color: transparent;
-			color: var(--storyloco-accent-ink, #fff);
+			color: var(--editor-accent-ink, #fff);
 		}
 
 		&:disabled {