@blinkk/root-cms 3.0.1-alpha.0 → 3.0.1-beta.2

package/dist/richtext.js

@@ -1,70 +1,99 @@
 import "./chunk-MLKGABMK.js";
 
 // core/richtext.tsx
-import { useTranslations } from "@blinkk/root";
-import { createContext } from "preact";
+import { StringParamsProvider, useTranslations } from "@blinkk/root";
+import { Component, createContext } from "preact";
 import { useContext } from "preact/hooks";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { renderToString } from "preact-render-to-string";
+import { jsx, jsxs } from "preact/jsx-runtime";
 var RichTextContext = createContext({});
 function useRichTextContext() {
   return useContext(RichTextContext);
 }
+var RichTextComponentMapContext = createContext({});
+function useRichTextContextComponentMap() {
+  return useContext(RichTextComponentMapContext);
+}
+function useRichTextTranslations() {
+  const ctx = useRichTextContext();
+  if (ctx.t) {
+    return ctx.t;
+  }
+  return useTranslations();
+}
 function RichText(props) {
+  const blocks = props.data?.blocks || [];
+  if (blocks.length === 0) {
+    return null;
+  }
   const richTextContext = useRichTextContext();
-  const components = {
-    delimiter: RichText.DelimiterBlock,
+  const componentMap = {
     heading: RichText.HeadingBlock,
     html: RichText.HtmlBlock,
     image: RichText.ImageBlock,
     orderedList: RichText.ListBlock,
     paragraph: RichText.ParagraphBlock,
-    quote: RichText.QuoteBlock,
     table: RichText.TableBlock,
     unorderedList: RichText.ListBlock,
     ...richTextContext.components,
     ...props.components
   };
-  const blocks = (props.data?.blocks || []).filter((block) => {
-    const blockType = block?.type;
-    if (!blockType) {
-      return false;
-    }
-    if (!(blockType in components)) {
-      console.warn(`ignoring unknown richtext type: "${blockType}"`);
-      return false;
-    }
-    return true;
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block) => {
-    const Block = components[block.type];
-    return /* @__PURE__ */ jsx(Block, { ...block });
-  }) });
+  return /* @__PURE__ */ jsx(RichTextComponentMapContext.Provider, { value: componentMap, children: blocks.map((block) => {
+    return /* @__PURE__ */ jsx(RichText.Block, { ...block });
+  }).filter((value) => !!value) });
 }
-RichText.ParagraphBlock = (props) => {
-  if (!props.data?.text) {
+RichText.Block = (props) => {
+  const block = props;
+  const blockType = block?.type;
+  if (!blockType) {
     return null;
   }
-  const t = useTranslations();
-  return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const componentMap = useRichTextContextComponentMap();
+  const BlockComponent = componentMap[blockType];
+  if (!BlockComponent) {
+    console.warn(`[RichText] ignoring unknown richtext type: "${blockType}"`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    InlineComponentRenderer,
+    {
+      block,
+      componentMap,
+      BlockComponent
+    }
+  );
 };
-RichText.DelimiterBlock = () => {
-  return /* @__PURE__ */ jsx("hr", {});
+var InlineComponentRenderer = class extends Component {
+  render() {
+    const { block, componentMap, BlockComponent } = this.props;
+    const stringParams = collectInlineComponentParams(
+      block,
+      componentMap,
+      this.context
+    );
+    if (stringParams) {
+      return /* @__PURE__ */ jsx(StringParamsProvider, { value: stringParams, children: /* @__PURE__ */ jsx(BlockComponent, { ...block }) });
+    }
+    return /* @__PURE__ */ jsx(BlockComponent, { ...block });
+  }
 };
-RichText.HeadingBlock = (props) => {
+RichText.ParagraphBlock = (props) => {
   if (!props.data?.text) {
     return null;
   }
-  const t = useTranslations();
-  const level = props.data.level || 2;
-  const Component = `h${level}`;
-  return /* @__PURE__ */ jsx(Component, { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const t = useRichTextTranslations();
+  const html = t(props.data.text);
+  return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: html } });
 };
-RichText.QuoteBlock = (props) => {
+RichText.HeadingBlock = (props) => {
   if (!props.data?.text) {
     return null;
   }
-  const t = useTranslations();
-  return /* @__PURE__ */ jsx("blockquote", { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const t = useRichTextTranslations();
+  const level = props.data.level || 2;
+  const Component2 = `h${level}`;
+  const html = t(props.data.text);
+  return /* @__PURE__ */ jsx(Component2, { dangerouslySetInnerHTML: { __html: html } });
 };
 RichText.ListBlock = (props) => {
   if (!props.data?.items?.length) {
@@ -74,20 +103,20 @@ RichText.ListBlock = (props) => {
   if (!style) {
     style = props.type === "orderedList" ? "ordered" : "unordered";
   }
-  const Component = style === "ordered" ? "ol" : "ul";
+  const Component2 = style === "ordered" ? "ol" : "ul";
   const items = props.data.items;
-  return /* @__PURE__ */ jsx(Component, { children: items.map((item) => {
+  return /* @__PURE__ */ jsx(Component2, { children: items.map((item) => {
     if (item.content || item.items?.length) {
       return /* @__PURE__ */ jsxs("li", { children: [
         item.content && /* @__PURE__ */ jsx(
-          RichText.ParagraphBlock,
+          RichText.Block,
           {
             type: "paragraph",
-            data: { text: item.content }
+            data: { text: item.content, components: item.components }
           }
         ),
         item.items && item.items.length > 0 && /* @__PURE__ */ jsx(
-          RichText.ListBlock,
+          RichText.Block,
           {
             type: props.type,
             data: { style, items: item.items }
@@ -109,7 +138,8 @@ RichText.ImageBlock = (props) => {
   return /* @__PURE__ */ jsx("img", { src: imageUrl, width, height, alt });
 };
 RichText.HtmlBlock = (props) => {
-  const html = props.data?.html || "";
+  const t = useRichTextTranslations();
+  const html = t(props.data?.html || "");
   if (!html) {
     return null;
   }
@@ -122,8 +152,7 @@ RichText.TableBlock = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.cells.map((cell, cellIndex) => {
-    const isHeader = cell.type === "header";
-    const Cell = isHeader ? "th" : "td";
+    const Cell = cell.type === "header" ? "th" : "td";
     return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
       RichText,
       {
@@ -146,8 +175,34 @@ function toNumber(input) {
   }
   return parsedNumber;
 }
+function testContent(data) {
+  return data?.blocks?.length > 0;
+}
+function collectInlineComponentParams(block, componentMap, renderContext) {
+  const components = block?.data?.components || {};
+  if (Object.keys(components).length === 0) {
+    return null;
+  }
+  const params = {};
+  for (const [componentId, component] of Object.entries(components)) {
+    const Component2 = componentMap[component.type];
+    if (Component2) {
+      const key = `${component.type}:${componentId}`;
+      params[key] = renderToString(
+        /* @__PURE__ */ jsx(Component2, { ...component.data }),
+        renderContext
+      );
+    } else {
+      console.warn(
+        `[RichText] could not find inline component for type: "${component.type}"`
+      );
+    }
+  }
+  return params;
+}
 export {
   RichText,
   RichTextContext,
+  testContent,
   useRichTextContext
 };

package/dist/{schema-D7MOj-YC.d.ts → schema-Db_xODoi.d.ts}

@@ -155,6 +155,11 @@ type ArrayField = CommonFieldProps & {
      * Label to use for the "add item" button. Defaults to `Add`.
      */
     buttonLabel?: string;
+    /**
+     * Whether array items should be open (expanded) by default. Defaults to
+     * `false`, meaning items start collapsed.
+     */
+    defaultOpen?: boolean;
 };
 declare function array(field: Omit<ArrayField, 'type'>): ArrayField;
 /**
@@ -174,6 +179,13 @@ interface SchemaPattern {
 }
 type OneOfField = CommonFieldProps & {
     type: 'oneof';
+    /**
+     * UI variant for the oneOf field.
+     * - `dropdown` (default): A `Select` dropdown for choosing the type.
+     * - `picker`: A `Button` that opens a modal with searchable cards. Use this
+     *   variant when types declare presets or thumbnail images.
+     */
+    variant?: 'dropdown' | 'picker';
     /**
      * Schema types to include in the oneOf field. Can be:
      * - An array of Schema objects
@@ -226,6 +238,25 @@ type Field = StringField | NumberField | DateField | DateTimeField | BooleanFiel
  */
 type FieldWithId = Field;
 type ObjectLikeField = ImageField | FileField | ObjectField | OneOfField | ReferenceField;
+interface SchemaPreset<T = Record<string, any>> {
+    /** Unique identifier for the preset within the schema. */
+    id: string;
+    /** Display title for the preset. Defaults to the preset id. */
+    label?: string;
+    /** Description shown below the title in the picker. */
+    description?: string;
+    /** Thumbnail image (URL or absolute /-path) for the picker. */
+    image?: string;
+    /**
+     * Field values to prefill. Deep-merged into the schema's default value
+     * (preset values override defaults). `_type` is set automatically. The
+     * preset id is NOT persisted — presets are purely a prefill mechanism.
+     *
+     * Pass a generated fields type as the generic parameter `T` to
+     * type-check the keys against the schema's fields.
+     */
+    data?: T;
+}
 interface Schema {
     /** The name of the content type. Used as the field key. */
     name: string;
@@ -233,6 +264,19 @@ interface Schema {
     label?: string;
     /** The description of the content type. Appears in CMS menus. */
     description?: string;
+    /**
+     * Optional thumbnail image (URL or absolute /-path) used to represent this
+     * schema in the picker UI for `oneof` fields with `variant: 'picker'`.
+     */
+    image?: string;
+    /**
+     * Optional preset prefill configurations for use in the picker UI.
+     *
+     * Each preset appears in the picker as a separate selectable card alongside
+     * the schema's "blank" card. Selecting a preset sets `_type` to the schema's
+     * `name` and merges `data` over the schema's default field values.
+     */
+    presets?: SchemaPreset<any>[];
     /** Fields describe the structure of the content. */
     fields: FieldWithId[];
     /** Defines the preview displayed within the CMS UI. Overrides the `preview` definition for the `array` field. */
@@ -267,6 +311,24 @@ type SchemaWithTypes = Schema & {
 declare function defineSchema(schema: Schema): Schema;
 /** Defines the schema for a collection or reusable component. */
 declare const define: typeof defineSchema;
+/**
+ * Defines a preset for use within `schema.define({presets: [...]})`. The
+ * optional generic parameter `T` constrains the shape of the preset's `data`
+ * field. Pass an auto-generated fields type to enable type-safety:
+ *
+ * ```ts
+ * import type {HeroFields} from './generated/types.d.ts';
+ *
+ * schema.definePreset<HeroFields>({
+ *   id: 'big',
+ *   label: 'Big hero',
+ *   data: {title: 'Welcome'},
+ * });
+ * ```
+ */
+declare function definePreset<T = Record<string, any>>(preset: SchemaPreset<T>): SchemaPreset<T>;
+/** Alias for {@link definePreset}. */
+declare const preset: typeof definePreset;
 type Collection = SchemaWithTypes & {
     /**
      * The ID of the collection. This comes from the schema filename, e.g
@@ -410,6 +472,7 @@ type schema_ReferencesField = ReferencesField;
 type schema_RichTextField = RichTextField;
 type schema_Schema = Schema;
 type schema_SchemaPattern = SchemaPattern;
+type schema_SchemaPreset<T = Record<string, any>> = SchemaPreset<T>;
 type schema_SchemaWithTypes = SchemaWithTypes;
 type schema_SelectField = SelectField;
 type schema_StringField = StringField;
@@ -420,6 +483,7 @@ declare const schema_date: typeof date;
 declare const schema_datetime: typeof datetime;
 declare const schema_define: typeof define;
 declare const schema_defineCollection: typeof defineCollection;
+declare const schema_definePreset: typeof definePreset;
 declare const schema_defineSchema: typeof defineSchema;
 declare const schema_file: typeof file;
 declare const schema_glob: typeof glob;
@@ -428,13 +492,14 @@ declare const schema_multiselect: typeof multiselect;
 declare const schema_number: typeof number;
 declare const schema_object: typeof object;
 declare const schema_oneOf: typeof oneOf;
+declare const schema_preset: typeof preset;
 declare const schema_reference: typeof reference;
 declare const schema_references: typeof references;
 declare const schema_richtext: typeof richtext;
 declare const schema_select: typeof select;
 declare const schema_string: typeof string;
 declare namespace schema {
-  export { type schema_ArrayField as ArrayField, type schema_BooleanField as BooleanField, type schema_Collection as Collection, type schema_CommonFieldProps as CommonFieldProps, type schema_DateField as DateField, type schema_DateTimeField as DateTimeField, type schema_Field as Field, type schema_FieldWithId as FieldWithId, type schema_FileField as FileField, type schema_GlobOptions as GlobOptions, type schema_ImageField as ImageField, type schema_MultiSelectField as MultiSelectField, type schema_NumberField as NumberField, type schema_ObjectField as ObjectField, type schema_ObjectLikeField as ObjectLikeField, type schema_OneOfField as OneOfField, type schema_ReferenceField as ReferenceField, type schema_ReferencesField as ReferencesField, type schema_RichTextField as RichTextField, type schema_Schema as Schema, type schema_SchemaPattern as SchemaPattern, type schema_SchemaWithTypes as SchemaWithTypes, type schema_SelectField as SelectField, type schema_StringField as StringField, schema_array as array, schema_boolean as boolean, schema_collection as collection, schema_date as date, schema_datetime as datetime, schema_define as define, schema_defineCollection as defineCollection, schema_defineSchema as defineSchema, schema_file as file, schema_glob as glob, schema_image as image, schema_multiselect as multiselect, schema_number as number, schema_object as object, schema_oneOf as oneOf, schema_reference as reference, schema_references as references, schema_richtext as richtext, schema_select as select, schema_string as string };
+  export { type schema_ArrayField as ArrayField, type schema_BooleanField as BooleanField, type schema_Collection as Collection, type schema_CommonFieldProps as CommonFieldProps, type schema_DateField as DateField, type schema_DateTimeField as DateTimeField, type schema_Field as Field, type schema_FieldWithId as FieldWithId, type schema_FileField as FileField, type schema_GlobOptions as GlobOptions, type schema_ImageField as ImageField, type schema_MultiSelectField as MultiSelectField, type schema_NumberField as NumberField, type schema_ObjectField as ObjectField, type schema_ObjectLikeField as ObjectLikeField, type schema_OneOfField as OneOfField, type schema_ReferenceField as ReferenceField, type schema_ReferencesField as ReferencesField, type schema_RichTextField as RichTextField, type schema_Schema as Schema, type schema_SchemaPattern as SchemaPattern, type schema_SchemaPreset as SchemaPreset, type schema_SchemaWithTypes as SchemaWithTypes, type schema_SelectField as SelectField, type schema_StringField as StringField, schema_array as array, schema_boolean as boolean, schema_collection as collection, schema_date as date, schema_datetime as datetime, schema_define as define, schema_defineCollection as defineCollection, schema_definePreset as definePreset, schema_defineSchema as defineSchema, schema_file as file, schema_glob as glob, schema_image as image, schema_multiselect as multiselect, schema_number as number, schema_object as object, schema_oneOf as oneOf, schema_preset as preset, schema_reference as reference, schema_references as references, schema_richtext as richtext, schema_select as select, schema_string as string };
 }
 
 export { type Collection as C, type Schema as S, schema as s };

package/dist/ui/signin.css

@@ -1 +1 @@
-:root{--font-family-default: "Inter", sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--color-text-default: #333333;--color-border: #EFEFEF;--button-background-hover: #F5F5F5;--button-background-active: #E5E5E5}html{box-sizing:border-box;overflow-x:hidden;font-size:16px;line-height:1.5}*,*:before,*:after{box-sizing:inherit}html,body{font-family:var(--font-family-default);color:var(--color-text-default);height:100%;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}img,picture,figure,video,canvas,svg,iframe{display:block;max-width:100%;height:auto;margin:0}a{color:inherit}select{color-scheme:light}h1,h2,h3,h4,h5,p{margin:0}body.menu\:open{overflow:hidden}#root{margin:0 auto;min-height:100vh;position:relative}.bootstrap{font-size:48px;font-weight:900;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;gap:36px;position:relative}.bootstrap-error{font-size:14px;font-weight:400;line-height:20px;position:absolute;bottom:100px;left:0;right:0;text-align:center;animation:.5s forwards bootstrap-loading-error;animation-delay:1s;opacity:0;padding:0 24px}@keyframes bootstrap-loading-error{0%{opacity:0}to{opacity:1}}.signin{font-family:Google Sans,arial,sans-serif;text-align:center;padding:48px 20px;color:#3c4043}.signin__headline{margin-bottom:40px}.signin__headline__title{font-size:36px;line-height:1.3;font-weight:500;margin-bottom:20px}.signin__headline__body{font-size:18px;line-height:1.5;font-weight:500}.signin__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;text-align:center;gap:12px;background:#fff;border:1px solid #dadce0;border-radius:4px;cursor:pointer;font-family:inherit;padding:0 12px;height:40px;box-sizing:border-box;transition:all .218s ease}.signin__warning{max-width:520px;margin:0 auto 40px;padding:12px;border:1px solid #fbbc04;border-radius:8px;background:#fff9db;color:#5f370e;font-size:14px;line-height:1.5}.signin__button:hover{border-color:#d2e3fc;background-color:#4285f40a}.signin__button__icon{width:18px;height:18px;background-color:#fff}.signin__button__label{font-size:14px;line-height:1;letter-spacing:.25px;font-weight:500;color:#3c4043}.signin__error{color:red;font-weight:700;text-align:center;max-width:60ch;margin:20px auto 0}
+:root{--font-family-default: "Inter", sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--color-text-default: #333333;--color-border: #EFEFEF;--button-background-hover: #F5F5F5;--button-background-active: #E5E5E5}html{box-sizing:border-box;overflow-x:hidden;font-size:16px;line-height:1.5}*,*:before,*:after{box-sizing:inherit}html,body{font-family:var(--font-family-default);color:var(--color-text-default);height:100%;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}img,picture,figure,video,canvas,svg,iframe{display:block;max-width:100%;height:auto;margin:0}a{color:inherit}select{color-scheme:light}h1,h2,h3,h4,h5,p{margin:0}body.menu\:open{overflow:hidden}#root{margin:0 auto;min-height:100vh;position:relative}.bootstrap{font-size:48px;font-weight:900;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;gap:36px;position:relative}.bootstrap-error{font-size:14px;font-weight:400;line-height:20px;position:absolute;bottom:100px;left:0;right:0;text-align:center;animation:.5s forwards bootstrap-loading-error;animation-delay:1s;opacity:0;padding:0 24px}.bootstrap--error{gap:16px}.bootstrap__error-title{font-size:48px;font-weight:900;line-height:1.1;margin:0}.bootstrap__error-message{color:#b00020;font-size:16px;font-weight:500;line-height:1.5;margin:0;max-width:640px}@keyframes bootstrap-loading-error{0%{opacity:0}to{opacity:1}}.signin{font-family:Google Sans,arial,sans-serif;text-align:center;padding:48px 20px;color:#3c4043}.signin__headline{margin-bottom:40px}.signin__headline__title{font-size:36px;line-height:1.3;font-weight:500;margin-bottom:20px}.signin__headline__body{font-size:18px;line-height:1.5;font-weight:500}.signin__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;text-align:center;gap:12px;background:#fff;border:1px solid #dadce0;border-radius:4px;cursor:pointer;font-family:inherit;padding:0 12px;height:40px;box-sizing:border-box;transition:all .218s ease}.signin__warning{max-width:520px;margin:0 auto 40px;padding:12px;border:1px solid #fbbc04;border-radius:8px;background:#fff9db;color:#5f370e;font-size:14px;line-height:1.5}.signin__button:hover{border-color:#d2e3fc;background-color:#4285f40a}.signin__button__icon{width:18px;height:18px;background-color:#fff}.signin__button__label{font-size:14px;line-height:1;letter-spacing:.25px;font-weight:500;color:#3c4043}.signin__button--busy{cursor:default;opacity:.85;border-color:#d2e3fc;background-color:#4285f40a}.signin__button--busy:hover{background-color:#4285f40a}.signin__spinner{width:18px;height:18px;color:#4285f4;animation:signin-spin .7s linear infinite}@keyframes signin-spin{to{transform:rotate(360deg)}}.signin__error{color:red;font-weight:700;text-align:center;max-width:60ch;margin:20px auto 0}