@instructure/platform-block-content-editor 0.3.1 → 1.1.0

package/README.md

@@ -0,0 +1,187 @@
+# @instructure/platform-block-content-editor
+
+Host-agnostic **block content editor** for the Canvas activity builder: the blocks, their schemas,
+the read path that renders a saved document, and the write path that authors one — all on native
+InstUI, with every Canvas coupling behind an injectable seam. Owned by **foundation**.
+
+This package ships **building blocks for rebuilding the editor, not a finished app.** There is one
+convenient composition (`BlockContentEditor`), but everything it does is reproducible from the
+exposed primitives, so a host can arrange the pieces however it needs (a tray or the preview in a
+modal, a custom toolbar, its own layout).
+
+> Deep design notes and invariants live in [`CLAUDE.md`](./CLAUDE.md); the block-authoring
+> conventions in the `bce-block-authoring` skill; architecture decisions in the repo's `docs/adr/`.
+> See [Documentation](#documentation) below.
+
+## Install
+
+```sh
+pnpm add @instructure/platform-block-content-editor
+```
+
+InstUI, React, and `zod` are **peer dependencies** — the host provides its single shared copy of
+each (see the `peerDependencies` in `package.json`).
+
+The package is **ESM-only** (`"type": "module"`, one `.` export plus `./locales/en.json`). Styles are
+emotion runtime-injected — there is **no `./styles` import**. There is also **no `PlatformUiProvider`**:
+BCE is host-agnostic through its own set of seam contexts (see [Seams](#seams--everything-canvas-specific-is-injected)),
+not a single umbrella provider. A minimal host can render `Viewer` / `BlockContentEditor` with just
+React, InstUI theming, and a composed registry.
+
+## The registry (both paths need it)
+
+There is deliberately **no default registry**: which blocks a document may contain is the host's
+decision. Compose one from the shipped block factories — the keys are the **wire format** stored in
+documents (`Header` → Banner, `QuoteBlock` → Quote, …):
+
+```tsx
+import { defineRegistry, createBannerBlock, createTextBlock } from '@instructure/platform-block-content-editor'
+
+const registry = defineRegistry({
+  Header: createBannerBlock({ label: t('Banner'), translations: {/* … */} }),
+  Text: createTextBlock({ label: t('Rich content editor'), translations: {/* … */} }),
+  // …the blocks this host offers, plus any host-owned blocks
+})
+```
+
+Compose with `defineRegistry(…)`; never annotate `: BlockRegistry` (it widens the type and silently
+collapses every derived type — see CLAUDE.md).
+
+## Read path — render a saved document
+
+```tsx
+import { Viewer } from '@instructure/platform-block-content-editor'
+
+<Viewer templateLayout={layout} templateData={data} componentRegistry={registry} />
+```
+
+`Viewer` emits no wrapper and takes no `theme`; host-specific typography belongs on the host's
+container. Unresolved blocks are reported via `onUnresolvedBlock`, never dropped or mutated.
+
+## Write path — author a document
+
+The **host owns the state engine** (so it owns save, undo/redo, dirty-tracking, and DB↔package
+conversion). Call `useBlockEditorState` and hand the result to the editor:
+
+```tsx
+import { useBlockEditorState, BlockContentEditor } from '@instructure/platform-block-content-editor'
+
+function Builder() {
+  const engine = useBlockEditorState({ initialData, initialLayout, registry, onDirty })
+
+  return (
+    <BlockContentEditor
+      engine={engine}
+      registry={registry}
+      tools={[widgetTray, aiAssistantTool]} // host-tool slot (optional)
+    />
+  )
+}
+```
+
+`BlockContentEditor` composes the tool-panel sidebar over the drag-and-drop canvas: it builds the
+registry-driven insertion trays, hoists a single DnD context so blocks can be **dragged** from a
+tray onto the canvas, coordinates canvas↔panel selection focus, and routes a selected block to its
+settings form. It is **authoring-only** — see Preview below.
+
+### Or compose the primitives yourself
+
+Every arrangement above is reproducible. Wrap your own layout in one `GridDndProvider` and drop a
+bare `DesignerCanvas` and the trays inside it (so tray drag reaches the canvas), or use the
+standalone `DesignerArea` (which self-wraps its own provider) when you don't need a shared context:
+
+```tsx
+import { GridDndProvider, DesignerCanvas, ComponentsTray, DesignerNavProvider } from '@instructure/platform-block-content-editor'
+
+<GridDndProvider {...dndProps}>
+  <DesignerNavProvider><ComponentsTray registry={registry} onAddComponent={engine.addComponent} /></DesignerNavProvider>
+  <DesignerCanvas canvasRef={canvasRef} {...canvasProps} />
+</GridDndProvider>
+```
+
+Also public: `DesignerSideBar` (the tool-panel chrome), `ComponentEditorForm` (the settings form),
+`useDesignerNav` (the sidebar's view-navigation hook), `useDesignerSelectionFocus`, and the
+block-level AI (`BlockAIMenu`, `useGenerateAltText`).
+
+## Preview — the host presents it
+
+`PreviewArea` is a framed student preview over the read-path `Viewer` with a Desktop/Mobile switch.
+The package ships **no modal**: how the preview is presented (modal, drawer, fullscreen, inline) is
+the host's choice.
+
+```tsx
+import { PreviewArea } from '@instructure/platform-block-content-editor'
+
+<Modal open={previewing} onDismiss={…}>
+  <PreviewArea templateLayout={engine.templateLayout} templateData={engine.templateData} componentRegistry={registry} />
+</Modal>
+```
+
+## Seams — everything Canvas-specific is injected
+
+Blocks and the editor read only from context; the host provides the implementations:
+
+| Context | What the host injects |
+| --- | --- |
+| `BrandColorContext` | the brand color (hex/`rgb()`), or `undefined` |
+| `BlockTranslationsProvider` | resolved strings per block + designer chrome (bundled English is the fallback) |
+| `RichTextRendererContext` | a renderer for RCE-authored HTML (read path); unset → sanitized fallback |
+| `RichTextEditorContext` | the RCE editor component (write path); unset → plain `TextArea` |
+| `AIActionContext` | the AI executor; **presence enables** the block-level AI, unset → hidden |
+| `BlockEditorApiProvider` | host data hooks — image/video/widget URLs and the settings-form file upload/delete |
+
+Each is host-agnostic: the host closes over Canvas course/plugin/file config **inside** its own
+hook/component; the package only ever passes opaque ids and reads back resolved values.
+
+### Wiring it up
+
+The canonical nesting a host provides (the order proven by the `consumer/index.tsx` reintegration
+fixture) — supply only the seams you use; each has a safe default:
+
+```tsx
+<BrandColorContext.Provider value={brandColor}>
+  <DesignerModeContext.Provider value={false}>
+    <BlockEditorApiProvider value={hostDataHooks}>        {/* image/video/widget + upload hooks */}
+      <RichTextRendererContext.Provider value={renderHtml}>
+        <RichTextEditorContext.Provider value={HostRceEditor}>
+          <AIActionContext.Provider value={executeAiToolUse}> {/* presence enables block-level AI */}
+            <BlockTranslationsProvider value={resolvedStrings}>
+              {/* <Viewer />, <BlockContentEditor />, <PreviewArea /> … */}
+            </BlockTranslationsProvider>
+          </AIActionContext.Provider>
+        </RichTextEditorContext.Provider>
+      </RichTextRendererContext.Provider>
+    </BlockEditorApiProvider>
+  </DesignerModeContext.Provider>
+</BrandColorContext.Provider>
+```
+
+## Reintegration gate
+
+The public surface is the contract a host compiles against. `pnpm check:consumer` builds `dist/` and
+type-checks the `consumer/` fixture against it, catching any exported inferred type that can't be
+named across the `exports` map (TS2742) — which the package's own `type-check` never sees. Add
+newly-exported symbols to `consumer/index.tsx`.
+
+## Development
+
+```sh
+pnpm --filter @instructure/platform-block-content-editor test        # vitest run
+pnpm --filter @instructure/platform-block-content-editor type-check  # tsc -p tsconfig.check.json
+pnpm --filter @instructure/platform-block-content-editor build       # vite build (+ .d.ts emit)
+pnpm --filter @instructure/platform-block-content-editor check:consumer  # the reintegration gate
+pnpm storybook                                                       # 21 stories: every block + the editor
+```
+
+Cross-package types resolve through built `dist/`, so run `pnpm build` once after a clone/pull
+before `type-check`/`test` (see the gotchas in `CLAUDE.md`). Storybook needs Node ≥ 22.12.
+
+## Documentation
+
+- **This README** — how to consume the package.
+- **`CLAUDE.md`** — what is true in `src/` right now: the read/write paths, the seams, the
+  non-negotiable invariants, and the build gotchas.
+- **`bce-block-authoring` skill** (`.claude/skills/`) — the conventions for creating or modifying a
+  block (styling, accessibility, the schema toolkit, per-block translations), loaded on demand.
+- **`docs/adr/`** (repo root) — architecture decision records; append-only.
+- **In-file comments** — reasoning local to one file, especially the block barrels and `src/schema/`.

package/dist/components/MediaPlaceholder/MediaPlaceholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/MediaPlaceholder/MediaPlaceholder.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5C,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAA;AAElF,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACzC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAiB,EACjB,YAAuB,GACxB,EAAE,qBAAqB,2CAsCvB"}
+{"version":3,"file":"MediaPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/MediaPlaceholder/MediaPlaceholder.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5C,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAA;AAElF,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACzC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAiB,EACjB,YAAuB,GACxB,EAAE,qBAAqB,2CA2CvB"}

package/dist/components/RichText/RichText.d.ts

@@ -0,0 +1,20 @@
+interface RichTextProps {
+    html: string;
+    className?: string;
+}
+/**
+ * Renders RCE-authored rich text for the content blocks (Text, Accordion,
+ * TabsBlock). When the host injects a renderer via `RichTextRendererContext`,
+ * that renderer is handed the **raw** html and owns sanitization; otherwise the
+ * html is sanitized here and set with `dangerouslySetInnerHTML`.
+ *
+ * The fallback sanitize is memoized on `html`: `sanitizeHtml` returns a fresh
+ * `TrustedHTML` per call, and React compares `__html` by identity, so
+ * re-sanitizing every render would re-set `innerHTML` and destroy whatever the
+ * author had focused or selected inside the content. Keyed on the content string
+ * (compared by value), so a host that rebuilds its props every render still hits
+ * the cache. Gated on `render` so the injected path skips the DOMPurify parse.
+ */
+export declare function RichText({ html, className }: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RichText.d.ts.map

package/dist/components/RichText/RichText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/RichText.tsx"],"names":[],"mappings":"AAsBA,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa,2CAkB1D"}

package/dist/components/RichText/index.d.ts

@@ -0,0 +1,2 @@
+export { RichText } from './RichText';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/blocks/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/Accordion.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAe5D,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAc,EACd,cAAc,EACd,KAAU,EACV,cAA0B,EAC1B,UAAoB,EACpB,UAAwB,EACxB,WAAuB,EACvB,iBAA0B,EAC1B,iBAA0B,EAC1B,aAAa,GACd,EAAE,cAAc,2CAsLhB"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/Accordion.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAe5D,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAc,EACd,cAAc,EACd,KAAU,EACV,cAA0B,EAC1B,UAAoB,EACpB,UAAwB,EACxB,WAAuB,EACvB,iBAA0B,EAC1B,iBAA0B,EAC1B,aAAa,GACd,EAAE,cAAc,2CAwKhB"}

package/dist/components/blocks/Accordion/accordionTranslations.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Strings owned by the Accordion block. The host supplies these when it registers the
+ * block; anything it omits falls back to the English below.
+ */
+export interface AccordionTranslations {
+    /** Placeholder shown in the designer when an Accordion has no sections at all. */
+    accordionPlaceholder: string;
+    /** Placeholder title for an empty Accordion section; interpolates `%{index}` via `translate`. */
+    accordionItemPlaceholderTitle: string;
+    /** Placeholder body shown in the designer when an Accordion section has no content. */
+    accordionItemPlaceholderContent: string;
+}
+/** English bundled with this package — also the source for `locales/en.json`. */
+export declare const AccordionEnglish: AccordionTranslations;
+//# sourceMappingURL=accordionTranslations.d.ts.map

package/dist/components/blocks/Accordion/accordionTranslations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionTranslations.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/accordionTranslations.ts"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iGAAiG;IACjG,6BAA6B,EAAE,MAAM,CAAA;IACrC,uFAAuF;IACvF,+BAA+B,EAAE,MAAM,CAAA;CACxC;AAED,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,qBAI9B,CAAA"}

package/dist/components/blocks/Accordion/createAccordionBlock.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Registry entry factory for Accordion, registered under the wire name `Accordion` — that string is
+ * what stored documents contain, and renaming it orphans them. It owns strings, so the host supplies its
+ * `AccordionTranslations` here; anything omitted falls back to bundled English.
+ */
+export declare const createAccordionBlock: (options: import('../../..').BlockFactoryOptions<import('./accordionTranslations').AccordionTranslations>) => import('../../..').BlockRegistryEntry<{
+    items: {
+        id: string;
+        title: string;
+        content: string;
+    }[];
+    title?: string | undefined;
+    variant?: "h2" | "h3" | "h4" | undefined;
+    supportingText?: string | undefined;
+    accordionStyle?: "outline" | "solid" | undefined;
+    colorTheme?: "light" | "dark" | "neutral" | undefined;
+    connection?: "connected" | "separated" | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    dropdownPlacement?: "left" | "right" | undefined;
+    dropdownDirection?: "center" | "down" | undefined;
+}>;
+//# sourceMappingURL=createAccordionBlock.d.ts.map

package/dist/components/blocks/Accordion/createAccordionBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAccordionBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/createAccordionBlock.ts"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;EAM/B,CAAA"}

package/dist/components/blocks/Accordion/index.d.ts

@@ -1,4 +1,6 @@
 export { Accordion } from './Accordion';
 export { RegisteredAccordionPropsSchema, AccordionDefaultProps } from './accordionPropsSchema';
 export type { AccordionProps } from './accordionPropsSchema';
+export { createAccordionBlock } from './createAccordionBlock';
+export { AccordionEnglish, type AccordionTranslations } from './accordionTranslations';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/blocks/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,8BAA8B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAO9F,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Accordion/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,8BAA8B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAO9F,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/components/blocks/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/Banner.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,mGAAmG;AACnG,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAoB,EACpB,WAAuB,GACxB,EAAE,WAAW,2CA0Cb"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/Banner.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,mGAAmG;AACnG,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAoB,EACpB,WAAuB,GACxB,EAAE,WAAW,2CA0Cb"}

package/dist/components/blocks/Banner/bannerPropsSchema.d.ts

@@ -1,5 +1,4 @@
 import { z } from 'zod';
-export declare const BannerStyleSchema: z.ZodEnum<["none", "light", "dark"]>;
 export declare const BannerPropsSchema: z.ZodObject<{
     title: z.ZodString;
     variant: z.ZodDefault<z.ZodEnum<["h2", "h3", "h4"]>>;
@@ -23,7 +22,6 @@ export declare const BannerPropsSchema: z.ZodObject<{
     headerStyle?: "light" | "dark" | "none" | undefined;
 }>;
 export type BannerProps = z.infer<typeof BannerPropsSchema>;
-export type BannerStyle = z.infer<typeof BannerStyleSchema>;
 export declare const BannerDefaultProps: BannerProps;
 export declare const RegisteredBannerPropsSchema: import('../../..').RegisteredComponentSchema<{
     title: string;

package/dist/components/blocks/Banner/bannerPropsSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bannerPropsSchema.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/bannerPropsSchema.ts"],"names":[],"mappings":"AAmBA,OAAO,+BAA+B,CAAA;AACtC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAIvB,eAAO,MAAM,iBAAiB,sCAAoC,CAAA;AAElE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;EAyC5B,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC3D,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE3D,eAAO,MAAM,kBAAkB,EAAE,WAKhC,CAAA;AAED,eAAO,MAAM,2BAA2B;;;;;;;EAAuD,CAAA"}
+{"version":3,"file":"bannerPropsSchema.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/bannerPropsSchema.ts"],"names":[],"mappings":"AAmBA,OAAO,+BAA+B,CAAA;AACtC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AASvB,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;EAyC5B,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE3D,eAAO,MAAM,kBAAkB,EAAE,WAKhC,CAAA;AAED,eAAO,MAAM,2BAA2B;;;;;;;EAAuD,CAAA"}

package/dist/components/blocks/Banner/bannerTranslations.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Strings owned by the Banner block. The host supplies these when it registers the
+ * block; anything it omits falls back to the English below.
+ */
+export interface BannerTranslations {
+    /** Placeholder heading shown in the designer when a Banner block is empty. */
+    bannerPlaceholderTitle: string;
+    /** Placeholder eyebrow shown in the designer when a Banner block is empty. */
+    bannerPlaceholderSubtitle: string;
+}
+/** English bundled with this package — also the source for `locales/en.json`. */
+export declare const BannerEnglish: BannerTranslations;
+//# sourceMappingURL=bannerTranslations.d.ts.map

package/dist/components/blocks/Banner/bannerTranslations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bannerTranslations.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/bannerTranslations.ts"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,sBAAsB,EAAE,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,yBAAyB,EAAE,MAAM,CAAA;CAClC;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,EAAE,kBAG3B,CAAA"}

package/dist/components/blocks/Banner/createBannerBlock.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Registry entry factory for Banner, registered under the wire name `Header` — that string is
+ * what stored documents contain, and renaming it orphans them. It owns strings, so the host supplies its
+ * `BannerTranslations` here; anything omitted falls back to bundled English.
+ */
+export declare const createBannerBlock: (options: import('../../..').BlockFactoryOptions<import('./bannerTranslations').BannerTranslations>) => import('../../..').BlockRegistryEntry<{
+    title: string;
+    variant: "h2" | "h3" | "h4";
+    content?: string | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    subtitle?: string | undefined;
+    headerStyle?: "light" | "dark" | "none" | undefined;
+}>;
+//# sourceMappingURL=createBannerBlock.d.ts.map

package/dist/components/blocks/Banner/createBannerBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBannerBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/createBannerBlock.ts"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;;EAM5B,CAAA"}

package/dist/components/blocks/Banner/getBannerViewProps.d.ts

@@ -1,5 +1,4 @@
 import { BlockRenderProps } from '../brandTheming';
-import { CornerStyle } from '../commonSchemas';
-import { BannerStyle } from './bannerPropsSchema';
-export declare function getBannerViewProps(headerStyle: BannerStyle, cornerStyle: CornerStyle, brandColor?: string): BlockRenderProps;
+import { CornerStyle, HeaderStyle } from '../commonSchemas';
+export declare function getBannerViewProps(headerStyle: HeaderStyle, cornerStyle: CornerStyle, brandColor?: string): BlockRenderProps;
 //# sourceMappingURL=getBannerViewProps.d.ts.map

package/dist/components/blocks/Banner/getBannerViewProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getBannerViewProps.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/getBannerViewProps.ts"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,gBAAgB,EAMtB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAetD,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,UAAU,CAAC,EAAE,MAAM,GAClB,gBAAgB,CAelB"}
+{"version":3,"file":"getBannerViewProps.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/getBannerViewProps.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,iBAAiB,CAAA;AACtE,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAKhE,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,UAAU,CAAC,EAAE,MAAM,GAClB,gBAAgB,CAKlB"}

package/dist/components/blocks/Banner/index.d.ts

@@ -1,3 +1,5 @@
 export { Banner } from './Banner';
 export { RegisteredBannerPropsSchema, BannerDefaultProps } from './bannerPropsSchema';
+export { createBannerBlock } from './createBannerBlock';
+export { BannerEnglish, type BannerTranslations } from './bannerTranslations';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/blocks/Banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/Banner/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAGrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/components/blocks/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG5D,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAuB,EAAE,EAAE,cAAc,2CAkC5F"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG5D,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAuB,EAAE,EAAE,cAAc,2CAkC5F"}

package/dist/components/blocks/CodeBlock/codeBlockPropsSchema.d.ts

@@ -7,7 +7,7 @@ export declare const CodeBlockPropsSchema: z.ZodObject<{
     cornerStyle: z.ZodOptional<z.ZodDefault<z.ZodEnum<["rounded", "square"]>>>;
 }, "strip", z.ZodTypeAny, {
     code: string;
-    language: "text" | "html" | "javascript" | "json" | "css" | "bash" | "yaml";
+    language: "html" | "text" | "javascript" | "json" | "css" | "bash" | "yaml";
     cornerStyle?: "rounded" | "square" | undefined;
     header?: string | undefined;
 }, {
@@ -21,7 +21,7 @@ export type CodeLanguage = z.infer<typeof CodeLanguageSchema>;
 export declare const CodeBlockDefaultProps: CodeBlockProps;
 export declare const RegisteredCodeBlockPropsSchema: import('../../..').RegisteredComponentSchema<{
     code: string;
-    language: "text" | "html" | "javascript" | "json" | "css" | "bash" | "yaml";
+    language: "html" | "text" | "javascript" | "json" | "css" | "bash" | "yaml";
     cornerStyle?: "rounded" | "square" | undefined;
     header?: string | undefined;
 }>;

package/dist/components/blocks/CodeBlock/codeBlockTranslations.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Strings owned by the CodeBlock block. The host supplies these when it registers the
+ * block; anything it omits falls back to the English below.
+ */
+export interface CodeBlockTranslations {
+    /** Placeholder code shown in the designer when a CodeBlock has no content. */
+    codeBlockPlaceholder: string;
+}
+/** English bundled with this package — also the source for `locales/en.json`. */
+export declare const CodeBlockEnglish: CodeBlockTranslations;
+//# sourceMappingURL=codeBlockTranslations.d.ts.map

package/dist/components/blocks/CodeBlock/codeBlockTranslations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeBlockTranslations.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/codeBlockTranslations.ts"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,8EAA8E;IAC9E,oBAAoB,EAAE,MAAM,CAAA;CAC7B;AAED,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,qBAE9B,CAAA"}

package/dist/components/blocks/CodeBlock/createCodeBlock.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Registry entry factory for CodeBlock, registered under the wire name `CodeBlock` — that string is
+ * what stored documents contain, and renaming it orphans them. It owns strings, so the host supplies its
+ * `CodeBlockTranslations` here; anything omitted falls back to bundled English.
+ */
+export declare const createCodeBlock: (options: import('../../..').BlockFactoryOptions<import('./codeBlockTranslations').CodeBlockTranslations>) => import('../../..').BlockRegistryEntry<{
+    code: string;
+    language: "html" | "text" | "javascript" | "json" | "css" | "bash" | "yaml";
+    cornerStyle?: "rounded" | "square" | undefined;
+    header?: string | undefined;
+}>;
+//# sourceMappingURL=createCodeBlock.d.ts.map

package/dist/components/blocks/CodeBlock/createCodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/createCodeBlock.ts"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;EAM1B,CAAA"}

package/dist/components/blocks/CodeBlock/index.d.ts

@@ -1,3 +1,5 @@
 export { CodeBlock } from './CodeBlock';
 export { RegisteredCodeBlockPropsSchema, CodeBlockDefaultProps } from './codeBlockPropsSchema';
+export { createCodeBlock } from './createCodeBlock';
+export { CodeBlockEnglish, type CodeBlockTranslations } from './codeBlockTranslations';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/blocks/CodeBlock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,8BAA8B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/CodeBlock/index.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,8BAA8B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAG9F,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/components/blocks/FlashCards/FlashCard.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'react';
+import { FlashCardFaceProps } from './getFlashCardsViewProps';
+export interface FlashCardProps {
+    front?: string;
+    back?: string;
+    isFlipped: boolean;
+    /** Omitted for a card that isn't `interactive`, which cannot be activated to flip. */
+    onFlip?: () => void;
+    face: FlashCardFaceProps;
+    /**
+     * False renders the card disabled. The card being navigated away from is drawn one
+     * last time while it slides out, and must not be a tab stop or a focusable descendant
+     * of its `aria-hidden` layer.
+     */
+    interactive?: boolean;
+    /** Lets the deck hand focus to the card when an arrow button disables itself. */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+/** One flippable card: activating it rotates the question face away to reveal the answer. */
+export declare function FlashCard({ front, back, isFlipped, onFlip, face, interactive, buttonRef, }: FlashCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FlashCard.d.ts.map

package/dist/components/blocks/FlashCards/FlashCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlashCard.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/FlashCards/FlashCard.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AA+ClE,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,kBAAkB,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC;AAED,6FAA6F;AAC7F,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAkB,EAClB,SAAS,GACV,EAAE,cAAc,2CAqChB"}

package/dist/components/blocks/FlashCards/FlashCards.d.ts

@@ -0,0 +1,4 @@
+import { FlashCardsProps } from './flashCardsPropsSchema';
+/** A deck of flippable cards, shown one at a time with previous/next navigation. */
+export declare function FlashCards({ cards, randomize, colorTheme, cornerStyle, }: FlashCardsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FlashCards.d.ts.map

package/dist/components/blocks/FlashCards/FlashCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlashCards.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/FlashCards/FlashCards.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAiB,eAAe,EAAE,MAAM,yBAAyB,CAAA;AA4C7E,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,EACzB,KAAU,EACV,SAAiB,EACjB,UAAoB,EACpB,WAAuB,GACxB,EAAE,eAAe,kDA4QjB"}

package/dist/components/blocks/FlashCards/createFlashCardsBlock.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Registry entry factory for FlashCards, registered under the wire name `FlashCards` — that string is
+ * what stored documents contain, and renaming it orphans them. It owns strings, so the host supplies its
+ * `FlashCardsTranslations` here; anything omitted falls back to bundled English.
+ */
+export declare const createFlashCardsBlock: (options: import('../../..').BlockFactoryOptions<import('./flashCardsTranslations').FlashCardsTranslations>) => import('../../..').BlockRegistryEntry<{
+    cards: {
+        front: string;
+        back: string;
+    }[];
+    colorTheme?: "light" | "dark" | "neutral" | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    randomize?: boolean | undefined;
+}>;
+//# sourceMappingURL=createFlashCardsBlock.d.ts.map

package/dist/components/blocks/FlashCards/createFlashCardsBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFlashCardsBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/FlashCards/createFlashCardsBlock.ts"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;EAMhC,CAAA"}

package/dist/components/blocks/FlashCards/flashCardsPropsSchema.d.ts

@@ -0,0 +1,60 @@
+import { z } from 'zod';
+export declare const FlashCardItemSchema: z.ZodObject<{
+    front: z.ZodString;
+    back: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    front: string;
+    back: string;
+}, {
+    front: string;
+    back: string;
+}>;
+export declare const FlashCardsPropsSchema: z.ZodObject<{
+    cards: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        front: z.ZodString;
+        back: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        front: string;
+        back: string;
+    }, {
+        front: string;
+        back: string;
+    }>, "many">>;
+    randomize: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
+    colorTheme: z.ZodOptional<z.ZodDefault<z.ZodEnum<["light", "dark", "neutral"]>>>;
+    cornerStyle: z.ZodOptional<z.ZodDefault<z.ZodEnum<["rounded", "square"]>>>;
+}, "strip", z.ZodTypeAny, {
+    cards: {
+        front: string;
+        back: string;
+    }[];
+    colorTheme?: "light" | "dark" | "neutral" | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    randomize?: boolean | undefined;
+}, {
+    colorTheme?: "light" | "dark" | "neutral" | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    cards?: {
+        front: string;
+        back: string;
+    }[] | undefined;
+    randomize?: boolean | undefined;
+}>;
+export type FlashCardsProps = z.infer<typeof FlashCardsPropsSchema>;
+export type FlashCardItem = z.infer<typeof FlashCardItemSchema>;
+/**
+ * Holds a reference value, so — like `AccordionDefaultProps` — a host inserting a block
+ * by shallow-spreading these hands every deck the *same* `cards` array and card objects.
+ * Frozen below so an in-place edit throws instead of reaching into every other new deck.
+ */
+export declare const FlashCardsDefaultProps: FlashCardsProps;
+export declare const RegisteredFlashCardsPropsSchema: import('../../..').RegisteredComponentSchema<{
+    cards: {
+        front: string;
+        back: string;
+    }[];
+    colorTheme?: "light" | "dark" | "neutral" | undefined;
+    cornerStyle?: "rounded" | "square" | undefined;
+    randomize?: boolean | undefined;
+}>;
+//# sourceMappingURL=flashCardsPropsSchema.d.ts.map

package/dist/components/blocks/FlashCards/flashCardsPropsSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flashCardsPropsSchema.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/FlashCards/flashCardsPropsSchema.ts"],"names":[],"mappings":"AAmBA,OAAO,+BAA+B,CAAA;AACtC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAWvB,eAAO,MAAM,mBAAmB;;;;;;;;;EAI9B,CAAA;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BhC,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAA;AACnE,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAE/D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,eASpC,CAAA;AAQD,eAAO,MAAM,+BAA+B;;;;;;;;EAG3C,CAAA"}

package/dist/components/blocks/FlashCards/flashCardsStyles.d.ts

@@ -0,0 +1,43 @@
+/** Exported so the deck can clear a finished exit layer even if `animationend` never fires. */
+export declare const SLIDE_DURATION_MS = 450;
+/** Which way the deck moved; `none` is the first card, which simply appears. */
+export type SlideDirection = 'next' | 'prev' | 'none';
+export declare const CARD_CLASS: {
+    /** The deck itself, and the ancestor every rule below can rely on. */
+    readonly root: "bce-block-flashcards";
+    /** Set on the deck when motion is switched off; see `useMotionEnabled`. */
+    readonly motionOff: "bce-flashcards-no-motion";
+    readonly viewport: "bce-flashcards-viewport";
+    readonly layer: "bce-flashcards-layer";
+    readonly flip: "bce-flashcards-flip";
+    readonly inner: "bce-flashcards-inner";
+    readonly flipped: "bce-flashcards-flipped";
+    readonly face: "bce-flashcards-face";
+    readonly faceBack: "bce-flashcards-face-back";
+    readonly faceText: "bce-flashcards-face-text";
+    /** Carries the live region's text, which has nothing to show a sighted reader. */
+    readonly srOnly: "bce-flashcards-sr-only";
+};
+declare const SLIDE_CLASS: {
+    readonly enter: {
+        readonly next: "bce-flashcards-enter-next";
+        readonly prev: "bce-flashcards-enter-prev";
+        readonly none: "";
+    };
+    readonly exit: {
+        readonly next: "bce-flashcards-exit-next";
+        readonly prev: "bce-flashcards-exit-prev";
+        readonly none: "";
+    };
+};
+/** Classes for one card layer. The first card has no direction and simply appears. */
+export declare function layerClass(phase: keyof typeof SLIDE_CLASS, direction: SlideDirection): string;
+/**
+ * Injects the deck's CSS. Every `Global` keeps a stylesheet of its own, so two decks on a
+ * page insert two copies of these rules — identical, and cheap next to the flip they
+ * describe, but the reason this is rendered by the block rather than hoisted is that a
+ * page with no deck should pay nothing at all.
+ */
+export declare function FlashCardsStyles(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=flashCardsStyles.d.ts.map