@protoyard/decks-ui 1.2.4 → 1.4.0

package/README.md

@@ -50,6 +50,8 @@ DeckApp adds what is Protoyard's own:
 | `debugSource` | `null` | Where the deck came from, for the agent reference |
 | `customSlides` | — | A generated deck's `src/custom-slides.ts` registry |
 | `resolveAvatar` | — | Library avatar id → URL (`avatarUrl` from `@protoyard/renderer-svelte`) |
+| `messages` | — | Partial `DeckStageMessages` overrides for the stage and print view (`{ 'stage.closeOverview': 'Cerrar vista general' }`) |
+| `designSystems` | — | `deckDesignSystems(compiled)` (the `compiled` that `protoyard ds use` exports): the stage paints that design system and DeckApp skips the deck theme |
 
 The wrapper keeps `data-py-deck-app`, `data-slide-id` and `data-slide-step`
 (they follow the stage's controller, including a deep link's first position),

package/dist/app/DeckApp.svelte

@@ -11,13 +11,18 @@ import {
   parseDeckHash,
   parseDeckRoute,
 } from '@texuli/deck/engine';
-import { DeckStageCore, type DeckThemeLoader } from '@texuli/slides/stage-core';
+import {
+  DeckStageCore,
+  type DeckStageMessages,
+  type DeckThemeLoader,
+} from '@texuli/slides/stage-core';
 import { flushSync, onMount, untrack } from 'svelte';
 import { Button, IconButton } from 'texuli/button';
 import { LucideIcon } from 'texuli/icons/lucide';
 import { type DeckDebugSetting, deckDebugAvailable, isDevBuild } from '../debug/availability.js';
 import type { CustomSlideRegistry } from '../layouts/custom-slides.js';
 import { setDeckHostContext } from './context.js';
+import type { DeckDesignSystems } from './design-systems.js';
 import { createProtoyardRenderers } from './renderers.js';
 import {
   prepareStageDeck,
@@ -57,6 +62,8 @@ let {
   debugSource = null,
   customSlides,
   resolveAvatar,
+  messages,
+  designSystems,
 }: {
   /** Validated deck document (`DeckSchema`). */
   deck: Deck;
@@ -89,6 +96,18 @@ let {
   customSlides?: CustomSlideRegistry;
   /** Resolves a library avatar id (`av-012`) to its image URL (team and people slides). */
   resolveAvatar?: (id: string) => string | undefined;
+  /**
+   * Partial overrides of the stage's words (`DeckStageMessages`, English
+   * defaults: `stage.closeOverview`, `stage.label`…), for the stage and the
+   * print view. Placeholders use `{name}`.
+   */
+  messages?: DeckStageMessages;
+  /**
+   * A design-system resolver for the stage (`deckDesignSystems(compiled)`).
+   * With a `ref`, the deck follows that design system: the stage paints its
+   * compiled variables and DeckApp does not load the deck's `style` theme.
+   */
+  designSystems?: DeckDesignSystems;
 } = $props();
 
 const stage = $derived(toStageDeck(deck));
@@ -109,7 +128,7 @@ setDeckHostContext({
  * stage's first render, with no migration or validation chunk. A deck that does not
  * prepare goes to the stage as it is, which shows its diagnostics instead of slides.
  */
-const prepared = $derived(prepareStageDeck(stage.input));
+const prepared = $derived(prepareStageDeck(stage.input, designSystems?.ref));
 const stageDeck = $derived(prepared.ok ? prepared : stage.input);
 /** What the print view paints: the prepared model v2 deck. */
 const printDeck = $derived(prepared.ok ? prepared.deck : stage.input);
@@ -329,6 +348,7 @@ onMount(() => {
         {renderers}
         tier="developer"
         {loadTheme}
+        {messages}
         {resolveAvatar}
       />
     </div>
@@ -362,7 +382,9 @@ onMount(() => {
       {syncHash}
       {autofocus}
       {namespace}
-      {loadTheme}
+      loadTheme={designSystems?.ref ? null : loadTheme}
+      designSystems={designSystems ?? null}
+      {messages}
       {resolveAvatar}
       {renderers}
       defaultRenderers={false}
@@ -416,6 +438,7 @@ onMount(() => {
           {renderers}
           tier="developer"
           {loadTheme}
+          {messages}
           {resolveAvatar}
         />
       </div>

package/dist/app/DeckApp.svelte.d.ts

@@ -1,8 +1,10 @@
 import '@texuli/slides/styles.css';
 import type { AgentReferenceSource } from '@protoyard/decks/agent';
 import type { Deck } from '@protoyard/decks/schema';
+import { type DeckStageMessages } from '@texuli/slides/stage-core';
 import { type DeckDebugSetting } from '../debug/availability.ts';
 import type { CustomSlideRegistry } from '../layouts/custom-slides.ts';
+import type { DeckDesignSystems } from './design-systems.ts';
 type $$ComponentProps = {
     /** Validated deck document (`DeckSchema`). */
     deck: Deck;
@@ -35,6 +37,18 @@ type $$ComponentProps = {
     customSlides?: CustomSlideRegistry;
     /** Resolves a library avatar id (`av-012`) to its image URL (team and people slides). */
     resolveAvatar?: (id: string) => string | undefined;
+    /**
+     * Partial overrides of the stage's words (`DeckStageMessages`, English
+     * defaults: `stage.closeOverview`, `stage.label`…), for the stage and the
+     * print view. Placeholders use `{name}`.
+     */
+    messages?: DeckStageMessages;
+    /**
+     * A design-system resolver for the stage (`deckDesignSystems(compiled)`).
+     * With a `ref`, the deck follows that design system: the stage paints its
+     * compiled variables and DeckApp does not load the deck's `style` theme.
+     */
+    designSystems?: DeckDesignSystems;
 };
 declare const DeckApp: import("svelte").Component<$$ComponentProps, {}, "">;
 type DeckApp = ReturnType<typeof DeckApp>;

package/dist/app/design-systems.d.ts

@@ -0,0 +1,35 @@
+import type { DeckStageCore } from '@texuli/slides/stage-core';
+import type { ComponentProps } from 'svelte';
+/**
+ * The stage's design-system resolver (`@texuli/player` `PlayerDesignSystems`:
+ * `resolve(ref)` and an optional `mode`), read off `DeckStageCore` so this
+ * package needs no direct dependency on `@texuli/player`.
+ */
+export type PlayerDesignSystems = NonNullable<ComponentProps<typeof DeckStageCore>['designSystems']>;
+/**
+ * What DeckApp's `designSystems` takes: the stage's resolver, plus the `ref`
+ * (`id@x.y.z`) the deck follows. A Protoyard deck document has no
+ * `designSystem` field, so DeckApp puts `{ ref }` on the deck it hands the
+ * stage; without `ref` the resolver is only forwarded.
+ */
+export interface DeckDesignSystems extends PlayerDesignSystems {
+    readonly ref?: string;
+}
+/** The fields of a compiled design system this helper reads (`ShippedDesignSystem` has them). */
+export interface DeckCompiledDesignSystem {
+    readonly id: string;
+    readonly version: string;
+    readonly vars: Readonly<Record<string, Readonly<Record<string, string>> | undefined>>;
+}
+/**
+ * A deck resolver for one compiled design system (the `compiled` that
+ * `protoyard ds use` exports): `ref` is `<id>@<version>`, and `resolve`
+ * returns the compiled design system for that ref only (never a fetch).
+ * Pass it to `<DeckApp designSystems={…}>`; the deck's own theme is then not
+ * loaded, and the design system's variables paint the stage.
+ */
+export declare function deckDesignSystems(compiled: DeckCompiledDesignSystem, options?: {
+    mode?: 'light' | 'dark';
+}): DeckDesignSystems & {
+    readonly ref: string;
+};

package/dist/app/design-systems.js

@@ -0,0 +1,15 @@
+/**
+ * A deck resolver for one compiled design system (the `compiled` that
+ * `protoyard ds use` exports): `ref` is `<id>@<version>`, and `resolve`
+ * returns the compiled design system for that ref only (never a fetch).
+ * Pass it to `<DeckApp designSystems={…}>`; the deck's own theme is then not
+ * loaded, and the design system's variables paint the stage.
+ */
+export function deckDesignSystems(compiled, options = {}) {
+    const ref = `${compiled.id}@${compiled.version}`;
+    return {
+        ref,
+        resolve: (asked) => asked === ref ? compiled : undefined,
+        ...(options.mode ? { mode: options.mode } : {}),
+    };
+}

package/dist/app/index.d.ts

@@ -4,3 +4,4 @@
  */
 export type { CustomSlideComponent, CustomSlideLoader, CustomSlideProps, CustomSlideRegistry, } from '../layouts/custom-slides.ts';
 export { default as DeckApp } from './DeckApp.svelte';
+export { type DeckCompiledDesignSystem, type DeckDesignSystems, deckDesignSystems, type PlayerDesignSystems, } from './design-systems.ts';

package/dist/app/index.js

@@ -3,3 +3,4 @@
  * player's deck entry and generated deck prototypes both mount (ADR-038).
  */
 export { default as DeckApp } from './DeckApp.svelte';
+export { deckDesignSystems, } from "./design-systems.js";

package/dist/app/stage-deck.d.ts

@@ -36,5 +36,6 @@ export declare function stageDeck(deck: Deck): StageDeck;
  * prepared deck: at the `developer` tier the stage paints it on its first render
  * without migrating or validating it again, and loads no validation chunk for it.
  * Never throws: a deck that does not validate comes back with its issues.
+ * `designSystemRef` (`id@x.y.z`) sets the deck model's `designSystem`.
  */
-export declare function prepareStageDeck(input: Record<string, unknown>): PreparedDeck;
+export declare function prepareStageDeck(input: Record<string, unknown>, designSystemRef?: string): PreparedDeck;

package/dist/app/stage-deck.js

@@ -59,7 +59,11 @@ export function stageDeck(deck) {
  * prepared deck: at the `developer` tier the stage paints it on its first render
  * without migrating or validating it again, and loads no validation chunk for it.
  * Never throws: a deck that does not validate comes back with its issues.
+ * `designSystemRef` (`id@x.y.z`) sets the deck model's `designSystem`.
  */
-export function prepareStageDeck(input) {
-    return prepareDeckV2(toTexuliDeck(input), { validateBlock: validateProtoyardBlock });
+export function prepareStageDeck(input, designSystemRef) {
+    const deck = toTexuliDeck(input);
+    // A Protoyard deck has no `designSystem`; the host's resolver names the one it follows.
+    const withSystem = designSystemRef ? { ...deck, designSystem: { ref: designSystemRef } } : deck;
+    return prepareDeckV2(withSystem, { validateBlock: validateProtoyardBlock });
 }

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { type CanvasFit as DeckCanvasFit, fitDeckCanvas } from '@texuli/deck/engine';
+export { type DeckCompiledDesignSystem, type DeckDesignSystems, deckDesignSystems, type PlayerDesignSystems, } from './app/design-systems.ts';

package/dist/index.js

@@ -5,3 +5,4 @@
  * `@texuli/slides` (Texuli ADR-009).
  */
 export { fitDeckCanvas } from '@texuli/deck/engine';
+export { deckDesignSystems, } from "./app/design-systems.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protoyard/decks-ui",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "description": "Svelte 5 deck host for Protoyard: DeckApp on the @texuli/slides stage, with Protoyard's free and custom slides, Deck Studio and the Debug for agents panel, each on its own lazy subpath.",
   "license": "MIT",
   "type": "module",
@@ -49,12 +49,12 @@
   },
   "dependencies": {
     "@lucide/svelte": "^1.64.0",
-    "@protoyard/blocks": "1.2.4",
-    "@protoyard/blocks-ui": "1.2.4",
-    "@protoyard/decks": "1.2.4",
-    "@texuli/deck": "0.13.1",
-    "@texuli/slides": "0.13.1",
-    "texuli": "0.13.1"
+    "@protoyard/blocks": "1.4.0",
+    "@protoyard/blocks-ui": "1.4.0",
+    "@protoyard/decks": "1.4.0",
+    "@texuli/deck": "0.14.1",
+    "@texuli/slides": "0.14.1",
+    "texuli": "0.14.1"
   },
   "devDependencies": {
     "svelte": "^5.57.3"