@upstart.gg/sdk 0.0.133 → 0.0.135

package/src/shared/bricks.ts

@@ -2,7 +2,6 @@ import { Type, type Static, type TObject } from "@sinclair/typebox";
 import { customAlphabet } from "nanoid";
 import { brickTypes, defaultProps } from "./bricks/manifests/all-manifests";
 import { cssLengthRef } from "./bricks/props/css-length";
-import { enumProp } from "./bricks/props/enum";
 import { colorPresetRef } from "./bricks/props/color-preset";
 import { mergeIgnoringArrays } from "./utils/merge";
 import { getSchemaDefaults } from "./utils/schema";
@@ -83,6 +82,12 @@ export const brickSchema = Type.Object(
       description: "A unique identifier for the brick.",
     }),
     type: brickTypeSchema,
+    label: Type.Optional(
+      Type.String({
+        title: "Label",
+        description: "A human-readable label for the brick. Used for organization and identification.",
+      }),
+    ),
     props: Type.Any({
       title: "Props",
       description: "The static props of the brick. The available props depends on the brick type.",
@@ -90,7 +95,8 @@ export const brickSchema = Type.Object(
     mobileProps: Type.Optional(
       Type.Any({
         title: "Props",
-        description: "The overriden props for mobile, merged with desktop props.",
+        description:
+          "The overriden props for mobile, merged with desktop props. Same type as props but partial.",
       }),
     ),
   },
@@ -143,7 +149,8 @@ export const sectionProps = Type.Object(
       cssLengthRef({
         title: "Min height",
         default: "fit-content",
-        description: "The min height of the section",
+        description:
+          "The min height of the section. default is 'fit-content'. You can also use  the keyword 'full' to make it full viewport height. Lastly, you can use any valid CSS length unit.",
         "ui:field": "hidden",
       }),
     ),
@@ -157,36 +164,26 @@ export const sectionProps = Type.Object(
       }),
     ),
     maxWidth: Type.Optional(
-      enumProp("Max width", "max-w-full", {
-        options: [
-          {
-            value: "max-w-screen-lg",
-            title: "M",
-            description: "Common for text-heavy content/blog posts",
-          },
-          {
-            value: "max-w-screen-xl",
-            title: "L",
-            description: "Usefull or some landing pages",
-          },
-          {
-            value: "max-w-screen-2xl",
-            title: "XL",
-            description: "Common width",
-          },
-          {
-            value: "max-w-full",
-            title: "Full",
-            description: "Takes the entire space",
-          },
-        ],
+      StringEnum(["max-w-screen-lg", "max-w-screen-xl", "max-w-screen-2xl", "max-w-full"], {
+        title: "Max width",
+        default: "max-w-full",
+        enumNames: ["M", "L", "XL", "Full"],
         description: "The maximum width of the section. Desktop only",
         "ai:instructions":
-          "Choose the most appropriate max width for the section. You will likely use the same max width for all sections in a page.",
+          "Choose the most appropriate max width for the section. The value 'max-w-full' is the most common and the default. Use the same value for all sections on the same page unless there is a good reason to do otherwise.",
         displayAs: "button-group",
         "ui:responsive": "desktop",
       }),
     ),
+    verticalMargin: Type.Optional(
+      cssLengthRef({
+        title: "Vertical Margin",
+        description:
+          "The vertical margin of the section. By default, all sections touch each other with no space in between. If you want to add space between sections, set this value to e.g. '2rem' or '32px'. Adding a vertical margin will reveal the background color of the page.",
+        default: "0",
+        "ui:styleId": "styles:verticalMargin",
+      }),
+    ),
     justifyContent: Type.Optional(
       justifyContentRef({
         default: "justify-center",
@@ -242,12 +239,10 @@ export const sectionSchema = Type.Object(
       description: "The unique ID of the section. Use a human readable url-safe slug",
       examples: ["content-section", "contact-section"],
     }),
-    label: Type.Optional(
-      Type.String({
-        description: "The label of the section. Used for editor purposes only.",
-        examples: ["Content", "Contact"],
-      }),
-    ),
+    label: Type.String({
+      description: "The label of the section. Shown only to the website owner, not public.",
+      examples: ["Content", "Contact"],
+    }),
     order: Type.Number({
       description: "Determines section order in the page (lower numbers appear first). 0-based",
     }),
@@ -260,15 +255,9 @@ export const sectionSchema = Type.Object(
   },
 );
 
+export const sectionSchemaLLM = toLLMSchema(sectionSchema);
 export const sectionSchemaNoBricks = Type.Omit(sectionSchema, ["bricks"]);
-
-export function getSectionSchemaNoBrickForLLM() {
-  return toLLMSchema(sectionSchemaNoBricks);
-}
-
-export function getSectionSchemaForLLM() {
-  return toLLMSchema(sectionSchema);
-}
+export const sectionSchemaNoBricksLLM = toLLMSchema(sectionSchemaNoBricks);
 
 const sectionDefaultprops = getSchemaDefaults(sectionSchema.properties.props, "desktop") as Section["props"];
 const sectionMobileDefaultprops = getSchemaDefaults(
@@ -299,7 +288,7 @@ export function processSections(
       processSection({
         order: -1,
         id: "navbar-section",
-        label: "Navbar section",
+        label: "Navbar",
         props: {
           variant: "navbar",
           direction: "flex-row",
@@ -320,7 +309,7 @@ export function processSections(
       processSection({
         order: 1000,
         id: "footer-section",
-        label: "Footer section",
+        label: "Footer",
         props: {
           variant: "footer",
           direction: "flex-row",
@@ -358,6 +347,11 @@ export function processBrick<T extends Brick>(brick: T): T {
         : {}),
     }),
   };
+
+  if (!result.props.width) {
+    result.props.grow = true;
+  }
+
   return result;
 }
 
@@ -381,6 +375,7 @@ Bricks are stacked vertically using the "direction" set to "flex-col".
 `,
     example: {
       id: "hero-section",
+      label: "Hero",
       order: 0,
       props: {
         colorPreset: { color: "primary-100" },
@@ -394,6 +389,7 @@ Bricks are stacked vertically using the "direction" set to "flex-col".
         {
           id: "hero",
           type: "hero",
+          label: "Main hero title",
           props: {
             content: "<h1 style='text-align:center'>Welcome to my SaaS</h1>",
             tagline: "The future of productivity starts here",
@@ -402,6 +398,7 @@ Bricks are stacked vertically using the "direction" set to "flex-col".
         {
           id: "cta-button",
           type: "button",
+          label: "Call to action button",
           props: {
             label: "Get Started",
             href: "/signup",
@@ -419,6 +416,7 @@ Bricks are stacked vertically using the "direction" set to "flex-col".
 `,
     example: {
       id: "contact-section",
+      label: "Contact",
       order: 1,
       props: {
         colorPreset: { color: "gray-100" },
@@ -458,6 +456,7 @@ The box brick is the only container type that can hold $children (other bricks).
 This demonstrates nested brick structure where the box contains multiple feature bricks.`,
     example: {
       id: "features-section",
+      label: "Features",
       order: 2,
       props: {
         direction: "flex-col",
@@ -520,6 +519,7 @@ Demonstrates how direction "flex-row" arranges bricks horizontally.
 The section uses responsive mobile overrides to stack vertically on mobile.`,
     example: {
       id: "about-section",
+      label: "About",
       order: 3,
       props: {
         direction: "flex-row",
@@ -561,6 +561,7 @@ Demonstrates how box bricks can contain other box bricks, creating sophisticated
 Shows responsive design with different mobile arrangements.`,
     example: {
       id: "complex-layout-section",
+      label: "Complex layout",
       order: 4,
       props: {
         direction: "flex-col",
@@ -649,6 +650,7 @@ Uses the footer variant for special styling and contains multiple text bricks ar
 Shows how to create multi-column layouts using direction and gap properties.`,
     example: {
       id: "info-footer-section",
+      label: "Info footer",
       order: 5,
       props: {
         variant: "footer",
@@ -697,6 +699,7 @@ Shows how to use video bricks for multimedia content.
 The section uses a light background to make the video stand out.`,
     example: {
       id: "video-showcase-section",
+      label: "Video showcase",
       order: 6,
       props: {
         direction: "flex-col",
@@ -740,6 +743,7 @@ Demonstrates how to use carousel bricks for displaying multiple images.
 Perfect for portfolios, product showcases, or photo galleries.`,
     example: {
       id: "gallery-section",
+      label: "Gallery",
       order: 7,
       props: {
         direction: "flex-col",
@@ -778,6 +782,7 @@ Shows how to create forms with various field types and validation.
 Uses a card-like appearance with rounded corners and shadow.`,
     example: {
       id: "signup-form-section",
+      label: "Signup form",
       order: 8,
       props: {
         direction: "flex-col",
@@ -785,7 +790,6 @@ Uses a card-like appearance with rounded corners and shadow.`,
         gap: "2rem",
         colorPreset: { color: "blue-50" },
         alignItems: "items-center",
-        maxWidth: "max-w-screen-md",
       },
       bricks: [
         {
@@ -826,6 +830,7 @@ Shows how to structure testimonials with avatars, company information, and socia
 Perfect for building trust and credibility with potential customers.`,
     example: {
       id: "testimonials-section",
+      label: "Testimonials",
       order: 9,
       props: {
         direction: "flex-col",
@@ -894,6 +899,7 @@ Shows how to combine map bricks with text and contact information.
 Perfect for businesses with physical locations.`,
     example: {
       id: "location-section",
+      label: "Location",
       order: 10,
       props: {
         direction: "flex-row",
@@ -968,6 +974,7 @@ Demonstrates how to create compelling data visualizations.
 Uses horizontal layout with consistent spacing and visual hierarchy.`,
     example: {
       id: "stats-section",
+      label: "Stats",
       order: 11,
       props: {
         direction: "flex-col",
@@ -1093,6 +1100,7 @@ Shows how to use social-links bricks and forms together.
 Creates a cohesive call-to-action for community building.`,
     example: {
       id: "community-section",
+      label: "Community",
       order: 12,
       props: {
         direction: "flex-col",
@@ -1100,7 +1108,7 @@ Creates a cohesive call-to-action for community building.`,
         gap: "3rem",
         colorPreset: { color: "indigo-100" },
         alignItems: "items-center",
-        maxWidth: "max-w-screen-md",
+        maxWidth: "max-w-full",
       },
       bricks: [
         {
@@ -1157,6 +1165,7 @@ Demonstrates how to structure pricing tiers with different features.
 Uses consistent styling with highlighted premium option.`,
     example: {
       id: "pricing-section",
+      label: "Pricing",
       order: 13,
       props: {
         direction: "flex-col",

package/src/shared/datasources/types.ts

@@ -1,5 +1,4 @@
 import { Type, type Static } from "@sinclair/typebox";
-import { httpJsonOptions } from "./external/http-json/options";
 import { StringEnum } from "../utils/string-enum";
 import { toLLMSchema } from "../utils/llm";
 
@@ -236,10 +235,7 @@ export type InternalDatasource = Static<typeof datasourceInternalManifest>;
 // Fow now, let support only custom (internal) datasource
 // export const datasourceManifest = datasourceCustomManifest;
 export const datasourceManifest = datasourceInternalManifest;
-
-export function getDatasourceManifestForLLM() {
-  return toLLMSchema(datasourceManifest);
-}
+export const datasourceManifestLLM = toLLMSchema(datasourceManifest);
 
 export type Datasource = Static<typeof datasourceManifest>;
 export const datasourcesList = Type.Array(datasourceManifest);

package/src/shared/images.ts

@@ -21,13 +21,15 @@ export const imageResultsSchema = Type.Array(
       provider: Type.String({ description: "The image provider (e.g. unsplash, pexels)" }),
       description: Type.String({ description: "A brief description of the image" }),
       url: Type.String({ description: "The URL of the image" }),
-      blurHash: Type.String({ description: "The blur hash of the image" }),
-      user: Type.Object(
-        {
-          name: Type.String({ description: "The name of the user who uploaded the image" }),
-          profile_url: Type.String({ description: "The profile URL of the user who uploaded the image" }),
-        },
-        { additionalProperties: false },
+      blurHash: Type.Optional(Type.String({ description: "The blur hash of the image" })),
+      author: Type.Optional(
+        Type.Object(
+          {
+            name: Type.String({ description: "The name of the user who uploaded the image" }),
+            profile_url: Type.String({ description: "The profile URL of the user who uploaded the image" }),
+          },
+          { additionalProperties: false },
+        ),
       ),
     },
     { additionalProperties: false },
@@ -40,5 +42,5 @@ export const imageResultsSchema = Type.Array(
 export type ImageSearchResultsType = Static<typeof imageResultsSchema>;
 export type SimpleImageMetadata = Pick<
   ImageSearchResultsType[number],
-  "description" | "blurHash" | "user" | "url" | "provider"
+  "description" | "blurHash" | "author" | "url" | "provider"
 >;

package/src/shared/page.ts

@@ -18,10 +18,6 @@ export const pageSchema = Type.Object({
   attributes: pageAttributesSchema,
 });
 
-export function getPageSchemaForLLM() {
-  return toLLMSchema(pageSchema);
-}
-
 export type Page = Static<typeof pageSchema>;
 export type VersionedPage = Page & { version: string };
 

package/src/shared/schema-registry.ts

@@ -0,0 +1,82 @@
+import type { TSchema } from "@sinclair/typebox";
+import { alignItems, alignSelf, justifyContent } from "./bricks/props/align";
+import { background, backgroundColor } from "./bricks/props/background";
+import { border, rounding } from "./bricks/props/border";
+import { borderColor, color } from "./bricks/props/color";
+import { hidden } from "./bricks/props/common";
+import { cssLength } from "./bricks/props/css-length";
+import { shadow, textShadow } from "./bricks/props/effects";
+import { fontSize, textContent } from "./bricks/props/text";
+import { icon, urlOrPageId } from "./bricks/props/string";
+import { colorPreset } from "./bricks/props/color-preset";
+import { image } from "./bricks/props/image";
+import { direction } from "./bricks/props/direction";
+import { loop, queryUse } from "./bricks/props/dynamic";
+import { tags } from "./bricks/props/tags";
+
+export const schemaRegistry = new Map<string, TSchema>();
+
+export function registerSchema(id: string, schema: TSchema) {
+  schemaRegistry.set(id, schema);
+}
+
+export function unregisterSchema(id: string) {
+  schemaRegistry.delete(id);
+}
+
+registerSchema("styles:background", background());
+registerSchema("styles:backgroundColor", backgroundColor());
+registerSchema("styles:justifyContent", justifyContent());
+registerSchema("styles:alignItems", alignItems());
+registerSchema("styles:alignSelf", alignSelf());
+registerSchema("styles:rounding", rounding());
+registerSchema("styles:fontSize", fontSize());
+registerSchema("styles:hidden", hidden());
+registerSchema("styles:direction", direction());
+registerSchema("styles:border", border());
+registerSchema("styles:color", color());
+registerSchema("styles:borderColor", borderColor());
+registerSchema("styles:shadow", shadow());
+registerSchema("styles:textShadow", textShadow());
+registerSchema("styles:cssLength", cssLength());
+registerSchema("assets:image", image());
+registerSchema("assets:icon", icon());
+registerSchema("content:text", textContent());
+registerSchema("content:urlOrPageId", urlOrPageId());
+registerSchema("content:loop", loop());
+registerSchema("content:queryUse", queryUse());
+registerSchema("presets:color", colorPreset());
+registerSchema("content:tags", tags());
+
+/**
+ */
+function consolidateRefs() {
+  // Helper to recursively resolve $refs in a schema
+  function resolveRefs(schema: TSchema, visited: Set<TSchema> = new Set()) {
+    if (!schema || typeof schema !== "object" || visited.has(schema)) return schema;
+    visited.add(schema);
+    if ("$ref" in schema && typeof (schema as any).$ref === "string") {
+      const refSchema = schemaRegistry.get((schema as any).$ref);
+      if (refSchema) {
+        // Recursively resolve refs in the referenced schema
+        return resolveRefs(refSchema, visited);
+      }
+    }
+    for (const key of Object.keys(schema)) {
+      const value = (schema as any)[key];
+      if (Array.isArray(value)) {
+        (schema as any)[key] = value.map((item: TSchema) => resolveRefs(item, visited));
+      } else if (typeof value === "object" && value !== null) {
+        (schema as any)[key] = resolveRefs(value as TSchema, visited);
+      }
+    }
+    return schema;
+  }
+
+  // Rewrite all schemas in the registry to resolve $refs
+  for (const [id, schema] of schemaRegistry.entries()) {
+    schemaRegistry.set(id, resolveRefs(schema));
+  }
+}
+
+consolidateRefs();

package/src/shared/sitemap.ts

@@ -79,20 +79,16 @@ export const sitemapEntry = Type.Composite(
 export const sitemapSchema = Type.Array(sitemapEntry);
 export type Sitemap = Static<typeof sitemapSchema>;
 
-export function getSitemapSchemaForLLM() {
-  return toLLMSchema(
-    Type.Array(
-      Type.Composite([
-        sitemapEntry,
-        Type.Object({
-          // Sections plan helps agents to the structure and content of the page
-          sectionsPlan: sectionsPlanSchema,
-        }),
-      ]),
-    ),
-  );
-}
+export const sitemapSchemaLLM = toLLMSchema(
+  Type.Array(
+    Type.Composite([
+      sitemapEntry,
+      Type.Object({
+        // Sections plan helps agents to the structure and content of the page
+        sectionsPlan: sectionsPlanSchema,
+      }),
+    ]),
+  ),
+);
 
-export function getSitemapSchemaNoPlansForLLM() {
-  return toLLMSchema(sitemapSchema);
-}
+export const sitemapSchemaNoPlansLLM = toLLMSchema(sitemapSchema);

package/src/shared/tests/schema-registry.test.ts

@@ -0,0 +1,14 @@
+// Check taht schemaRegistry contains all schemas and that $refs are resolved
+import { describe, it, expect } from "vitest";
+import { schemaRegistry } from "../utils/schema-registry";
+
+describe("Schema Registry", () => {
+  it("should contain all registered schemas", () => {
+    expect(schemaRegistry.has("styles:background")).toBe(true);
+    expect(schemaRegistry.has("styles:justifyContent")).toBe(true);
+    expect(schemaRegistry.has("assets:image")).toBe(true);
+    expect(schemaRegistry.has("content:text")).toBe(true);
+
+    console.log("Registered schemas:", Array.from(schemaRegistry));
+  });
+});

package/src/shared/theme.ts

@@ -158,10 +158,7 @@ export const themeSchema = Type.Object(
 
 export type Theme = Static<typeof themeSchema>;
 export const themesArray = Type.Array(themeSchema);
-
-export function getThemesArrayForLLM() {
-  return toLLMSchema(themesArray);
-}
+export const themesArrayLLM = toLLMSchema(themesArray);
 
 export type ThemesArray = Static<typeof themesArray>;
 export type FontType = Theme["typography"]["body"];

package/src/shared/themes/color-system.ts

@@ -1,6 +1,5 @@
 import chroma from "chroma-js";
 import type { Theme } from "../theme";
-export { default as chroma } from "chroma-js";
 import { kebabCase } from "lodash-es";
 import { css } from "@upstart.gg/style-system/twind";
 

package/src/shared/utils/llm.ts

@@ -1,7 +1,7 @@
 import type { TObject, TSchema } from "@sinclair/typebox";
 import { createAJVInstance } from "../ajv";
 import { cloneDeep } from "lodash-es";
-import type Ajv from "ajv";
+import { schemaRegistry } from "./schema-registry";
 
 /**
  * Clean all properties from custom metadata recursively. Custom metadata are key that:
@@ -9,8 +9,8 @@ import type Ajv from "ajv";
  * - Or starting with "ui:"
  * Also removes properties that have "ai:hidden" set to true
  */
-export function toLLMSchema<T extends TSchema = TObject>(schema: T, ajv?: Ajv): T {
-  return cleanSchemaRecursive(inlineSchemaRefs(schema, ajv ?? createAJVInstance())) as T;
+export function toLLMSchema<T extends TSchema = TObject>(schema: T): T {
+  return cleanSchemaRecursive(inlineSchemaRefs(schema)) as T;
 }
 
 /**
@@ -107,7 +107,7 @@ interface SchemaWithDefs extends TSchema {
  * @param ajv - The AJV instance containing the referenced schemas
  * @returns A new schema with references inlined in $defs
  */
-export function inlineSchemaRefs<T extends TSchema>(schema: T, ajv: Ajv) {
+export function inlineSchemaRefs<T extends TSchema>(schema: T) {
   //
   const inlinedSchema = cloneDeep(schema) as T & SchemaWithDefs;
   // const inlinedSchema = JSON.parse(JSON.stringify(schema)) as T & SchemaWithDefs;
@@ -171,11 +171,12 @@ export function inlineSchemaRefs<T extends TSchema>(schema: T, ajv: Ajv) {
 
   // Process each collected reference
   for (const refId of collectedRefs) {
-    // Get the schema from AJV
-    const referencedSchema = ajv.getSchema(refId);
+    // Get the schema from the registry
+    const referencedSchema = schemaRegistry.get(refId);
 
-    if (!referencedSchema?.schema) {
-      //   console.log(`Schema with ID "${refId}" not found in AJV instance`, { referencedSchema });
+    if (!referencedSchema) {
+      // console.error(`Schema with ID "${refId}" not found in schema registry`, { referencedSchema });
+      // throw new Error(`Schema with ID "${refId}" not found in schema registry`);
       continue;
     }
 
@@ -197,7 +198,7 @@ export function inlineSchemaRefs<T extends TSchema>(schema: T, ajv: Ajv) {
     }
 
     // Add to $defs
-    const { $id, ...schemaWithoutId } = referencedSchema.schema as TSchema;
+    const { $id, ...schemaWithoutId } = referencedSchema;
     inlinedSchema.$defs![uniqueDefKey] = schemaWithoutId;
 
     // Map original reference to local reference
@@ -253,8 +254,8 @@ export function inlineSchemaRefs<T extends TSchema>(schema: T, ajv: Ajv) {
 
       // Add all newly found references to $defs
       for (const refId of newRefsFound) {
-        const referencedSchema = ajv.getSchema(refId);
-        if (referencedSchema?.schema) {
+        const referencedSchema = schemaRegistry.get(refId);
+        if (referencedSchema) {
           const newDefKey =
             refId.replace(/[^a-zA-Z0-9_-]/g, "_").replace(/^_+|_+$/g, "") ||
             `ref_${Object.keys(finalSchema.$defs).length}`;
@@ -266,7 +267,7 @@ export function inlineSchemaRefs<T extends TSchema>(schema: T, ajv: Ajv) {
             counter++;
           }
 
-          finalSchema.$defs[uniqueNewDefKey] = referencedSchema.schema as TSchema;
+          finalSchema.$defs[uniqueNewDefKey] = referencedSchema;
           refToLocalMap.set(refId, `#/$defs/${uniqueNewDefKey}`);
         }
       }

package/src/shared/utils/schema-registry.ts

@@ -0,0 +1,82 @@
+import type { TSchema } from "@sinclair/typebox";
+import { alignItems, alignSelf, justifyContent } from "../bricks/props/align";
+import { background, backgroundColor } from "../bricks/props/background";
+import { border, rounding } from "../bricks/props/border";
+import { borderColor, color } from "../bricks/props/color";
+import { hidden } from "../bricks/props/common";
+import { cssLength } from "../bricks/props/css-length";
+import { shadow, textShadow } from "../bricks/props/effects";
+import { fontSize, textContent } from "../bricks/props/text";
+import { icon, urlOrPageId } from "../bricks/props/string";
+import { colorPreset } from "../bricks/props/color-preset";
+import { image } from "../bricks/props/image";
+import { direction } from "../bricks/props/direction";
+import { loop, queryUse } from "../bricks/props/dynamic";
+import { tags } from "../bricks/props/tags";
+
+export const schemaRegistry = new Map<string, TSchema>();
+
+export function registerSchema(id: string, schema: TSchema) {
+  schemaRegistry.set(id, schema);
+}
+
+export function unregisterSchema(id: string) {
+  schemaRegistry.delete(id);
+}
+
+registerSchema("styles:background", background());
+registerSchema("styles:backgroundColor", backgroundColor());
+registerSchema("styles:justifyContent", justifyContent());
+registerSchema("styles:alignItems", alignItems());
+registerSchema("styles:alignSelf", alignSelf());
+registerSchema("styles:rounding", rounding());
+registerSchema("styles:fontSize", fontSize());
+registerSchema("styles:hidden", hidden());
+registerSchema("styles:direction", direction());
+registerSchema("styles:border", border());
+registerSchema("styles:color", color());
+registerSchema("styles:borderColor", borderColor());
+registerSchema("styles:shadow", shadow());
+registerSchema("styles:textShadow", textShadow());
+registerSchema("styles:cssLength", cssLength());
+registerSchema("assets:image", image());
+registerSchema("assets:icon", icon());
+registerSchema("content:text", textContent());
+registerSchema("content:urlOrPageId", urlOrPageId());
+registerSchema("content:loop", loop());
+registerSchema("content:queryUse", queryUse());
+registerSchema("presets:color", colorPreset());
+registerSchema("content:tags", tags());
+
+/**
+ */
+function consolidateRefs() {
+  // Helper to recursively resolve $refs in a schema
+  function resolveRefs(schema: TSchema, visited: Set<TSchema> = new Set()) {
+    if (!schema || typeof schema !== "object" || visited.has(schema)) return schema;
+    visited.add(schema);
+    if ("$ref" in schema && typeof (schema as any).$ref === "string") {
+      const refSchema = schemaRegistry.get((schema as any).$ref);
+      if (refSchema) {
+        // Recursively resolve refs in the referenced schema
+        return resolveRefs(refSchema, visited);
+      }
+    }
+    for (const key of Object.keys(schema)) {
+      const value = (schema as any)[key];
+      if (Array.isArray(value)) {
+        (schema as any)[key] = value.map((item: TSchema) => resolveRefs(item, visited));
+      } else if (typeof value === "object" && value !== null) {
+        (schema as any)[key] = resolveRefs(value as TSchema, visited);
+      }
+    }
+    return schema;
+  }
+
+  // Rewrite all schemas in the registry to resolve $refs
+  for (const [id, schema] of schemaRegistry.entries()) {
+    schemaRegistry.set(id, resolveRefs(schema));
+  }
+}
+
+consolidateRefs();