storyloco 1.16.0 → 2.0.0

package/README.md

@@ -24,7 +24,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 ### Storyblok Client
 
 - **🎯 StoryblokClient** - Reactive wrapper for Storyblok with Svelte 5 integration
-- **🔧 Utilities** - Re-exported `editable`, `Block`, and `richtext` functions
+- **🔧 Utilities** - `attrs` for wiring a block to the visual editor, plus re-exported `editable`, `Block`, and `richtext` functions
 
 ### Shared Components
 
@@ -68,18 +68,20 @@ import type { Video, Heading, Link, Input, Asset, SEO } from 'storyloco'
 import { StoryblokClient } from 'storyloco'
 import { PUBLIC_STORYBLOK_ACCESS_TOKEN } from '$env/static/public'
 
-// Create client (defaults to $lib/blocks/*.svelte) - init() called automatically
-export const client = new StoryblokClient(PUBLIC_STORYBLOK_ACCESS_TOKEN)
+export const client = new StoryblokClient({
+	token: PUBLIC_STORYBLOK_ACCESS_TOKEN,
+	relations: ['shared.items'],
+	components: import.meta.glob(['$blocks/**/*.svelte', '$templates/*.svelte'])
+})
+```
 
-// With custom component globs
-export const client = new StoryblokClient(
-	PUBLIC_STORYBLOK_ACCESS_TOKEN,
-	import.meta.glob(['$blocks/*.svelte', '$templates/*.svelte'])
-)
+Everything is configured here rather than by subclassing, and `init()` runs on its own — the
+API methods await it, so you never call it on the server. `components` takes the result of
+`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.
 
-// Single glob pattern
-export const client = new StoryblokClient(PUBLIC_STORYBLOK_ACCESS_TOKEN, import.meta.glob('$blocks/*.svelte'))
-```
+`client.handle_error` is on the instance, so `.catch(client.handle_error)` works without
+wrapping anything.
 
 #### 2. Use in your Svelte components
 
@@ -108,7 +110,7 @@ export const client = new StoryblokClient(PUBLIC_STORYBLOK_ACCESS_TOKEN, import.
 
 ```svelte
 <script lang="ts">
-	import { editable } from 'storyloco'
+	import { attrs } from 'storyloco'
 
    // This is auto-generated by the Storyblok Schema plugin
    import type { Blok, Hero } from '$lib/components.schema.js'
@@ -120,12 +122,78 @@ export const client = new StoryblokClient(PUBLIC_STORYBLOK_ACCESS_TOKEN, import.
 	let { blok } = $props()
 </script>
 
-<section use:editable={blok}>
+<section {...attrs(blok)}>
 	<h1>{blok.headline}</h1>
 	<p>{blok.subheadline}</p>
 </section>
 ```
 
+`attrs` makes the block editable in the visual editor and gives it a stable `id` — the
+block's `anchor` field when it has one, so sections can be linked to, otherwise its `_uid`.
+
+Prefer it to `use:editable`. Being an attachment rather than an action it spreads, so the
+element keeps its own attributes, and you can wrap it to add project-specific ones in one
+place rather than repeating them in every block:
+
+```typescript
+// Mapping section fields onto CSS custom properties is left to you — the field names and
+// the design tokens are yours. Wrap `attrs` rather than reaching past it:
+//
+// export function section<T extends SectionFields>(blok: Blok<T>) {
+//    let style = ''
+//    if (blok.theme) style += `--theme: var(--c-${blok.theme});`
+//    if (blok.pad_top) style += `--pt: var(--s-${blok.pad_top});`
+//    return { ...attrs(blok), style }
+// }
+```
+
+`editable` is still exported for anything `attrs` doesn't cover.
+
+### Read Content on the Server
+
+`storyloco/server` binds a client to the current request, so reads carry the version from
+the `version` hook and the resolve options you'd otherwise repeat everywhere. Server-only,
+since it reads the active request.
+
+**`$lib/storyblok.server.ts`:**
+
+```typescript
+import { setup } from 'storyloco/server'
+import { client } from './storyblok.js'
+
+export const storyblok = setup(client)
+```
+
+Then anywhere on the server:
+
+```typescript
+import { storyblok } from '$lib/storyblok.server.js'
+
+// A single story, with the client's `relations` resolved
+await storyblok.story('layout')
+
+// A list. `total` is the unpaged count, for "showing n of m"
+const { stories, total } = await storyblok.stories({ content_type: 'blog', per_page: 2 })
+
+// The link tree, flattened — Storyblok returns it keyed by uuid
+const links = await storyblok.links({ starts_with: 'blog/' })
+```
+
+Your params are spread last, so any default can be overridden:
+
+```typescript
+await storyblok.story('layout', { resolve_assets: 0 })
+```
+
+It's callable too, for anything the methods don't cover:
+
+```typescript
+const { client, version } = storyblok()
+await client.get('cdn/datasource_entries', { version })
+```
+
+Errors go through `handle_error`, so a missing story is a 404 and anything else a 500.
+
 ### Use Shared Components
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "storyloco",
-	"version": "1.16.0",
+	"version": "2.0.0",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",
@@ -32,7 +32,8 @@
 		"packages/ticketsource/types.ts",
 		"packages/input/types.ts",
 		"packages/time/types.ts",
-		"packages/seo/types.ts"
+		"packages/seo/types.ts",
+		"packages/hubspot_form/types.ts"
 	],
 	"exports": {
 		".": {
@@ -78,28 +79,38 @@
 			"types": "./packages/vite/dist/hooks.d.ts",
 			"import": "./packages/vite/dist/hooks.js"
 		},
+		"./server": {
+			"types": "./packages/vite/dist/server.d.ts",
+			"import": "./packages/vite/dist/server.js"
+		},
 		"./time": {
 			"types": "./packages/time/types.ts",
 			"svelte": "./packages/time/src/app.svelte.ts"
 		},
 		"./seo": {
 			"types": "./packages/seo/types.ts"
+		},
+		"./hubspot_form": {
+			"types": "./packages/hubspot_form/types.ts",
+			"svelte": "./packages/hubspot_form/src/app.svelte.ts"
 		}
 	},
 	"devDependencies": {
-		"@types/node": "24.10.0",
-		"@typescript-eslint/eslint-plugin": "8.46.3",
-		"@typescript-eslint/parser": "8.46.3",
-		"eslint": "9.39.1",
-		"kitto": "1.0.0-rc.17",
-		"oxfmt": "0.55.0",
-		"typescript": "5.9.3",
-		"vite": "7.2.2"
+		"@types/node": "26.1.1",
+		"@typescript-eslint/eslint-plugin": "8.65.0",
+		"@typescript-eslint/parser": "8.65.0",
+		"eslint": "10.7.0",
+		"kitto": "1.6.0",
+		"oxfmt": "0.59.0",
+		"typescript": "6.0.3",
+		"vite": "8.1.5"
 	},
 	"peerDependencies": {
-		"@storyblok/svelte": "5.2.14",
-		"@storyblok/field-plugin": "^1.6.0",
-		"svelte": "^5.0.0"
+		"@storyblok/svelte": "7.2.2",
+		"@storyblok/field-plugin": "^1.7.1",
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"storyblok-js-client": "^7.0.0"
 	},
 	"scripts": {
 		"add-plugin": "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo",
@@ -112,7 +123,7 @@
 		"packages/*"
 	],
 	"dependencies": {
-		"ora": "9.0.0",
-		"path-to-regexp": "8.3.0"
+		"ora": "9.4.1",
+		"path-to-regexp": "8.4.2"
 	}
 }

package/packages/hubspot_form/types.ts

@@ -0,0 +1,4 @@
+export interface HubspotForm {
+	id: string
+	name: string
+}

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

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

package/packages/vite/dist/hooks.d.ts

@@ -1 +1,9 @@
+import type { Handle } from "@sveltejs/kit";
 export { handle_redirects as redirects } from "./redirects/handle.js";
+/**
+ * Put the Storyblok content version on `event.locals.version` — draft while developing and
+ * inside the visual editor (`?_storyblok`), published everywhere else.
+ *
+ * Declare it on `App.Locals` as `version: import("storyloco").Version`.
+ */
+export declare const version: Handle;

package/packages/vite/dist/hooks.js

@@ -1 +1,12 @@
+import { dev } from "$app/environment";
 export { handle_redirects as redirects } from "./redirects/handle.js";
+/**
+ * Put the Storyblok content version on `event.locals.version` — draft while developing and
+ * inside the visual editor (`?_storyblok`), published everywhere else.
+ *
+ * Declare it on `App.Locals` as `version: import("storyloco").Version`.
+ */
+export const version = async ({ event, resolve }) => {
+    event.locals.version = dev || event.url.searchParams.has("_storyblok") ? "draft" : "published";
+    return await resolve(event);
+};

package/packages/vite/dist/server.d.ts

@@ -0,0 +1,51 @@
+import type { ISbStoriesParams, ISbStoryData, ISbStoryParams } from "@storyblok/svelte";
+import type { ISbLink, ISbLinksParams } from "storyblok-js-client";
+import { type StoryblokClient, type Version } from "./storyblok.svelte.js";
+/** The content version for the current request, as set by the `version` hook. */
+export declare function version(): Version;
+/**
+ * Bind a client to the current request.
+ *
+ * Returns a callable: call it for the client and version to reach anything the methods
+ * don't cover, or use `.story` / `.stories` for the common reads. Those carry the
+ * request's version and the resolve options a Storyblok read almost always wants; the
+ * caller's params are spread last, so every default can be overridden. `resolve_links`
+ * is on because `href` depends on it.
+ *
+ * @example
+ * ```ts
+ * // $lib/storyblok.server.ts
+ * export const storyblok = setup(client)
+ *
+ * // anywhere on the server
+ * await storyblok.story("layout")
+ * await storyblok.stories<Blog>({ content_type: "blog", per_page: 2 })
+ *
+ * const { client, version } = storyblok()
+ * await client.get("cdn/links", { version })
+ * ```
+ */
+export declare function setup(client: StoryblokClient): (() => {
+    client: StoryblokClient;
+    version: Version;
+}) & {
+    /**
+     * A single story by full slug. Resolves the client's `relations`, unlike `stories`.
+     *
+     * `T` is the story's content type; it defaults to the SDK's permissive one, so an
+     * unparameterised call behaves as before.
+     */
+    story<T = import("storyblok-js-client").ISbComponentType<string> & {
+        [index: string]: any;
+    }>(slug: string, params?: ISbStoryParams): Promise<ISbStoryData<T>>;
+    /**
+     * The link tree as a flat array — Storyblok returns it keyed by uuid, which is
+     * almost never what you want. Filtering and ordering are left to the caller.
+     */
+    links(params?: ISbLinksParams): Promise<ISbLink[]>;
+    /** A list of stories. `total` is the unpaged count, for "showing n of m". */
+    stories<T>(params?: ISbStoriesParams): Promise<{
+        stories: Array<ISbStoryData<T>>;
+        total: number;
+    }>;
+};

package/packages/vite/dist/server.js

@@ -0,0 +1,76 @@
+import { getRequestEvent } from "$app/server";
+import { handle_error } from "./storyblok.svelte.js";
+/** The content version for the current request, as set by the `version` hook. */
+export function version() {
+    return getRequestEvent().locals.version;
+}
+/**
+ * Bind a client to the current request.
+ *
+ * Returns a callable: call it for the client and version to reach anything the methods
+ * don't cover, or use `.story` / `.stories` for the common reads. Those carry the
+ * request's version and the resolve options a Storyblok read almost always wants; the
+ * caller's params are spread last, so every default can be overridden. `resolve_links`
+ * is on because `href` depends on it.
+ *
+ * @example
+ * ```ts
+ * // $lib/storyblok.server.ts
+ * export const storyblok = setup(client)
+ *
+ * // anywhere on the server
+ * await storyblok.story("layout")
+ * await storyblok.stories<Blog>({ content_type: "blog", per_page: 2 })
+ *
+ * const { client, version } = storyblok()
+ * await client.get("cdn/links", { version })
+ * ```
+ */
+export function setup(client) {
+    const context = () => ({ client, version: version() });
+    return Object.assign(context, {
+        /**
+         * A single story by full slug. Resolves the client's `relations`, unlike `stories`.
+         *
+         * `T` is the story's content type; it defaults to the SDK's permissive one, so an
+         * unparameterised call behaves as before.
+         */
+        async story(slug, params = {}) {
+            const response = await client
+                .get(`cdn/stories/${slug}`, {
+                version: version(),
+                resolve_links: "url",
+                resolve_relations: client.relations,
+                resolve_assets: 1,
+                ...params,
+            })
+                .catch(handle_error);
+            return response.data.story;
+        },
+        /**
+         * The link tree as a flat array — Storyblok returns it keyed by uuid, which is
+         * almost never what you want. Filtering and ordering are left to the caller.
+         */
+        async links(params = {}) {
+            const response = await client
+                .get("cdn/links", { version: version(), per_page: 1000, ...params })
+                .catch(handle_error);
+            return Object.values(response.data.links ?? {});
+        },
+        /** A list of stories. `total` is the unpaged count, for "showing n of m". */
+        async stories(params = {}) {
+            const response = await client
+                .get("cdn/stories", {
+                version: version(),
+                resolve_links: "url",
+                resolve_assets: 1,
+                ...params,
+            })
+                .catch(handle_error);
+            return {
+                stories: response.data.stories,
+                total: response.total ?? 0,
+            };
+        },
+    });
+}

package/packages/vite/dist/storyblok.svelte.d.ts

@@ -1,4 +1,4 @@
-import { renderRichText as richtext, StoryblokComponent as Block, storyblokEditable as editable, useStoryblokApi, type ISbStoryData } from "@storyblok/svelte";
+import { renderRichText as richtext, StoryblokComponent as Block, storyblokEditable as editable, useStoryblokApi, type ISbStoryData, type SbBlokData } from "@storyblok/svelte";
 import type { Component } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 /**
@@ -25,6 +25,25 @@ export interface Storyblok<T extends ISbStoryData> {
 }
 /** Type for dynamic component imports */
 type Import<T = unknown> = () => Promise<T>;
+/** Everything a client needs, so a project doesn't have to subclass to configure one. */
+export interface ClientOptions {
+    /** Your Storyblok access token */
+    token: string;
+    /**
+     * The block and template components to register.
+     *
+     * Call `import.meta.glob` at your own call site and pass the result — Vite has to see
+     * the literal pattern to rewrite it, so the glob can't live in here.
+     */
+    components?: Record<string, Import>;
+    /** Relation fields to resolve on every request, e.g. `["shared.items"]` */
+    relations?: Array<string>;
+    /**
+     * Content types that render through another component, e.g. `{ news: "blog" }` when
+     * news posts reuse the blog template. Applied by `template`.
+     */
+    aliases?: Record<string, string>;
+}
 /** Type alias for the storyblok api instance */
 type API = ReturnType<typeof useStoryblokApi>;
 /**
@@ -37,12 +56,21 @@ export declare class StoryblokClient {
     components: SvelteMap<string, Component<{}, {}, string>>;
     /** Array of relation field names to resolve when fetching stories */
     relations: Array<string>;
+    /** Content types that render through another component's template */
+    aliases: Record<string, string>;
     /**
      * Check if the current URL is in Storyblok preview mode
      * @param url - The URL to check
      * @returns True if in preview mode
      */
     is_preview(url: URL): boolean;
+    /**
+     * Resolve a story to its component by `component` name.
+     *
+     * Falls back when the name isn't registered, so a content type added in Storyblok
+     * before its component exists renders as a generic page rather than blanking.
+     */
+    template(story: ISbStoryData | null, fallback?: string): Component | null | undefined;
     /** Fetch a single story or collection of stories */
     get: API["get"];
     /** Fetch all stories matching criteria (handles pagination automatically) */
@@ -55,20 +83,33 @@ export declare class StoryblokClient {
     put: API["put"];
     /** Make a DELETE request to the Storyblok API */
     delete: API["delete"];
+    /** The standalone `handle_error`, on the instance so `.catch(client.handle_error)` works */
+    handle_error: typeof handle_error;
     /**
-     * Create a new StoryblokClient instance
-     * @param access_token - Your Storyblok access token
-     * @param component_imports - Map of component paths to their import functions
+     * Configured here rather than by subclassing, so setup is one expression.
+     *
+     * @example
+     * ```typescript
+     * export const client = new StoryblokClient({
+     * 	token: PUBLIC_STORYBLOK_ACCESS_TOKEN,
+     * 	relations: ["shared.items"],
+     * 	components: import.meta.glob(["$blocks/**\/*.svelte", "$templates/*.svelte"]),
+     * })
+     * ```
      */
-    constructor(access_token: string, component_imports?: Record<string, Import>);
+    constructor({ token, components, relations, aliases }: ClientOptions);
     /**
-     * Initialize the client by loading components and setting up the API
-     * This method is idempotent and can be called multiple times safely
+     * Load the components and set up the SDK.
+     *
+     * Safe to call any number of times, including concurrently — the first call starts the
+     * work and every later one awaits that same promise. Server callers never need it; the
+     * API methods await it themselves. The browser does, since `components` must be
+     * populated before the first render.
      */
     init(): Promise<void>;
     /** Storyblok editable function for making content editable in preview mode */
-    editable: (node: HTMLElement, value: import("@storyblok/svelte").SbBlokData) => {
-        update: (value: import("@storyblok/svelte").SbBlokData) => void;
+    editable: (node: HTMLElement, value: SbBlokData) => {
+        update: (value: SbBlokData) => void;
     };
     /**
      * Connect a story to Storyblok's live preview system for real-time updates
@@ -84,5 +125,80 @@ export declare class StoryblokClient {
      */
     connect<T extends ISbStoryData>(current: T): Storyblok<T>;
 }
+/** The Storyblok content version to read. `event.locals.version` from `storyloco/hooks`. */
+export type Version = "draft" | "published";
+/**
+ * Richtext, with `attrs` typed so an embedded blok's fields are reachable — the CLI types
+ * it as `Record<string, unknown>`. `Blocks` is your generated block union.
+ */
+export interface Richtext<Blocks = unknown> {
+    type: string;
+    text?: string;
+    attrs?: {
+        body: Blocks;
+    };
+    content?: Array<Richtext<Blocks>>;
+    marks?: Array<Richtext<Blocks>>;
+}
+/** Adds the `story.url` that `resolve_links: "url"` injects but the CLI doesn't declare. */
+export type Resolved<T extends {
+    story?: unknown;
+}> = T & {
+    story?: NonNullable<T["story"]> & {
+        url?: string;
+    };
+};
+/** Structural, so a generated `StoryblokMultilink` satisfies it. */
+interface Link {
+    linktype?: string;
+    url?: string;
+    cached_url?: string;
+    story?: {
+        url?: string;
+        [key: string]: unknown;
+    };
+}
+/**
+ * Resolve a multilink to an href. Story links become root-relative, everything else passes
+ * through. Prefers `story.url` over `cached_url`, which goes stale when a target moves —
+ * so pair with `resolve_links: "url"`.
+ */
+export declare function href(link?: Link): string | undefined;
+/**
+ * Turn a Storyblok error into a SvelteKit one, for `.catch(handle_error)`.
+ *
+ * A missing story is a 404; anything else is a 500, since the CMS being unreachable isn't
+ * something to show a visitor a Storyblok status code for.
+ */
+export declare function handle_error(err: unknown): never;
+/** Declaring these keeps `SbBlokData`'s index signature from widening every access. */
+interface BlokFields {
+    anchor?: string;
+}
+/**
+ * Spread onto a block's root element to wire it up for the visual editor.
+ *
+ * Prefer this to `use:editable`: being an attachment it spreads, so the element keeps its
+ * own attributes and a project can wrap it. Also sets a stable `id` from the block's
+ * `anchor`, falling back to `_uid`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * 	import { attrs } from "storyloco"
+ * 	import type { Blok, Hero } from "./components.schema.js"
+ *
+ * 	let { blok }: { blok: Blok<Hero> } = $props()
+ * </script>
+ *
+ * <section {...attrs(blok)}>
+ * 	<h1>{blok.headline}</h1>
+ * </section>
+ * ```
+ */
+export declare function attrs<T extends BlokFields>(blok: SbBlokData & T): {
+    [x: symbol]: (node: HTMLElement) => void;
+    id: string | undefined;
+};
 /** Re-export commonly used Storyblok utilities */
 export { editable, Block, richtext };

package/packages/vite/dist/storyblok.svelte.js

@@ -1,5 +1,7 @@
 import { storyblokInit, apiPlugin, renderRichText as richtext, useStoryblokBridge, StoryblokComponent as Block, storyblokEditable as editable, useStoryblokApi, } from "@storyblok/svelte";
 import { SvelteMap } from "svelte/reactivity";
+import { createAttachmentKey as attach } from "svelte/attachments";
+import { error } from "@sveltejs/kit";
 /**
  * Main Storyblok client class that handles component registration, API calls, and story bridging
  * Provides a unified interface for working with Storyblok in Svelte applications
@@ -7,10 +9,12 @@ import { SvelteMap } from "svelte/reactivity";
 export class StoryblokClient {
     /** Map of registered Svelte components by name */
     components = new SvelteMap();
-    /** Internal flag to prevent multiple initializations */
-    #initialized = false;
+    /** The in-flight or settled setup, shared by every caller of `init` */
+    #ready;
     /** Array of relation field names to resolve when fetching stories */
     relations = [];
+    /** Content types that render through another component's template */
+    aliases = {};
     /**
      * Check if the current URL is in Storyblok preview mode
      * @param url - The URL to check
@@ -19,27 +23,74 @@ export class StoryblokClient {
     is_preview(url) {
         return url.searchParams.has("_storyblok");
     }
+    /**
+     * Resolve a story to its component by `component` name.
+     *
+     * Falls back when the name isn't registered, so a content type added in Storyblok
+     * before its component exists renders as a generic page rather than blanking.
+     */
+    template(story, fallback = "page") {
+        if (!story)
+            return null;
+        const name = story.content.component || fallback;
+        return this.components.get(this.aliases[name] ?? name) ?? this.components.get(fallback);
+    }
     /** Storyblok access token for API authentication */
     #access_token;
     /** Map of component import functions */
     #component_imports;
+    /** Every API method below goes through here, so callers never `await init()` first. */
+    async #api() {
+        await this.init();
+        return useStoryblokApi();
+    }
+    /** Fetch a single story or collection of stories */
+    get = async (...args) => (await this.#api()).get(...args);
+    /** Fetch all stories matching criteria (handles pagination automatically) */
+    getAll = async (...args) => (await this.#api()).getAll(...args);
+    /** Fetch a specific story by slug */
+    getStory = async (...args) => (await this.#api()).getStory(...args);
+    /** Make a POST request to the Storyblok API */
+    post = async (...args) => (await this.#api()).post(...args);
+    /** Make a PUT request to the Storyblok API */
+    put = async (...args) => (await this.#api()).put(...args);
+    /** Make a DELETE request to the Storyblok API */
+    delete = async (...args) => (await this.#api()).delete(...args);
+    /** The standalone `handle_error`, on the instance so `.catch(client.handle_error)` works */
+    handle_error = handle_error;
     /**
-     * Create a new StoryblokClient instance
-     * @param access_token - Your Storyblok access token
-     * @param component_imports - Map of component paths to their import functions
+     * Configured here rather than by subclassing, so setup is one expression.
+     *
+     * @example
+     * ```typescript
+     * export const client = new StoryblokClient({
+     * 	token: PUBLIC_STORYBLOK_ACCESS_TOKEN,
+     * 	relations: ["shared.items"],
+     * 	components: import.meta.glob(["$blocks/**\/*.svelte", "$templates/*.svelte"]),
+     * })
+     * ```
      */
-    constructor(access_token, component_imports = import.meta.glob("$lib/blocks/*.svelte")) {
-        this.#access_token = access_token;
-        this.#component_imports = component_imports;
-        this.init();
+    constructor({ token, components = {}, relations = [], aliases = {} }) {
+        this.#access_token = token;
+        this.#component_imports = components;
+        this.relations = relations;
+        this.aliases = aliases;
+        // Eager, but handled so a failure surfaces to whoever awaits `init` rather than
+        // as an unhandled rejection
+        this.init().catch(() => { });
     }
     /**
-     * Initialize the client by loading components and setting up the API
-     * This method is idempotent and can be called multiple times safely
+     * Load the components and set up the SDK.
+     *
+     * Safe to call any number of times, including concurrently — the first call starts the
+     * work and every later one awaits that same promise. Server callers never need it; the
+     * API methods await it themselves. The browser does, since `components` must be
+     * populated before the first render.
      */
-    async init() {
-        if (this.#initialized)
-            return;
+    init() {
+        return (this.#ready ??= this.#setup());
+    }
+    async #setup() {
         // Load all components from the provided imports
         for (const [path, fn] of Object.entries(this.#component_imports)) {
             const name = path.split("/").pop()?.replace(".svelte", "") ?? "";
@@ -54,15 +105,6 @@ export class StoryblokClient {
             use: [apiPlugin],
             components: Object.fromEntries(this.components),
         });
-        // Bind API methods to this instance
-        const api = useStoryblokApi();
-        this.get = api.get.bind(api);
-        this.getAll = api.getAll.bind(api);
-        this.getStory = api.getStory.bind(api);
-        this.post = api.post?.bind(api);
-        this.put = api.put?.bind(api);
-        this.delete = api.delete?.bind(api);
-        this.#initialized = true;
     }
     /** Storyblok editable function for making content editable in preview mode */
     editable = editable;
@@ -95,5 +137,73 @@ export class StoryblokClient {
         };
     }
 }
+/**
+ * Resolve a multilink to an href. Story links become root-relative, everything else passes
+ * through. Prefers `story.url` over `cached_url`, which goes stale when a target moves —
+ * so pair with `resolve_links: "url"`.
+ */
+export function href(link) {
+    if (!link)
+        return undefined;
+    return link.linktype === "story"
+        ? `/${link.story?.url || link.cached_url}`
+        : link.url || link.cached_url;
+}
+/**
+ * Turn a Storyblok error into a SvelteKit one, for `.catch(handle_error)`.
+ *
+ * A missing story is a 404; anything else is a 500, since the CMS being unreachable isn't
+ * something to show a visitor a Storyblok status code for.
+ */
+export function handle_error(err) {
+    console.error(err);
+    const status = typeof err === "object" && err !== null && "status" in err ? err.status : undefined;
+    if (status === 404)
+        error(404, "Story not found");
+    error(500, "Internal server error");
+}
+/**
+ * Spread onto a block's root element to wire it up for the visual editor.
+ *
+ * Prefer this to `use:editable`: being an attachment it spreads, so the element keeps its
+ * own attributes and a project can wrap it. Also sets a stable `id` from the block's
+ * `anchor`, falling back to `_uid`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * 	import { attrs } from "storyloco"
+ * 	import type { Blok, Hero } from "./components.schema.js"
+ *
+ * 	let { blok }: { blok: Blok<Hero> } = $props()
+ * </script>
+ *
+ * <section {...attrs(blok)}>
+ * 	<h1>{blok.headline}</h1>
+ * </section>
+ * ```
+ */
+export function attrs(blok) {
+    return {
+        [attach()](node) {
+            editable(node, blok);
+        },
+        id: blok.anchor || blok._uid,
+    };
+}
+// Map section fields onto CSS custom properties by wrapping `attrs`, rather than reaching
+// past it — the field names and design tokens are yours:
+//
+// interface SectionFields extends BlokFields {
+// 	theme?: number | string
+// 	pad_top?: number | string
+// }
+//
+// export function section<T extends SectionFields>(blok: Blok<T>) {
+// 	let style = ""
+// 	if (blok.theme) style += `--theme: var(--c-${blok.theme});`
+// 	if (blok.pad_top) style += `--pt: var(--s-${blok.pad_top});`
+// 	return { ...attrs(blok), style }
+// }
 /** Re-export commonly used Storyblok utilities */
 export { editable, Block, richtext };

package/packages/shared/dist/components/ui/dropdown-menu/index.d.ts

@@ -1,25 +0,0 @@
-import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
-import Content from './dropdown-menu-content.svelte';
-import Group from './dropdown-menu-group.svelte';
-import Item from './dropdown-menu-item.svelte';
-import Label from './dropdown-menu-label.svelte';
-import RadioGroup from './dropdown-menu-radio-group.svelte';
-import RadioItem from './dropdown-menu-radio-item.svelte';
-import Separator from './dropdown-menu-separator.svelte';
-import Shortcut from './dropdown-menu-shortcut.svelte';
-import Trigger from './dropdown-menu-trigger.svelte';
-import SubContent from './dropdown-menu-sub-content.svelte';
-import SubTrigger from './dropdown-menu-sub-trigger.svelte';
-import GroupHeading from './dropdown-menu-group-heading.svelte';
-declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
-declare const Root: import("svelte").Component<{
-    open?: boolean;
-    onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
-    onOpenChangeComplete?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
-    dir?: import("bits-ui").Direction;
-} & {
-    children?: import("svelte").Snippet | undefined;
-} & {
-    _internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
-}, {}, "open">;
-export { CheckboxItem, Content, Root as DropdownMenu, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };