@ankhorage/zora 4.1.0 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.2.2
+
+### Patch Changes
+
+- de3246c: Update Ankhorage dependencies: `@ankhorage/contracts`.
+
+## 4.2.1
+
+### Patch Changes
+
+- de3246c: Update Ankhorage dependencies: `@ankhorage/contracts`.
+
+## 4.2.0
+
+### Minor Changes
+
+- 3dbdeb2: Allow standalone media-backed Icon nodes and permit Icon and Image in screen containers so generated templates can use their separate SVG and raster assets.
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/components/card/meta.d.ts

@@ -2,7 +2,7 @@ export declare const cardMeta: {
     readonly name: "Card";
     readonly category: "component";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Card";
         readonly defaultProps: {

package/dist/components/icon/meta.d.ts

@@ -1,9 +1,38 @@
 export declare const iconMeta: {
     readonly name: "Icon";
     readonly category: "component";
-    readonly directManifestNode: false;
+    readonly description: "Displays a standalone SVG icon from the app media registry.";
+    readonly directManifestNode: true;
     readonly allowedChildren: readonly [];
-    readonly note: "Icon renderer component; not represented as a manifest node in v1.";
-    readonly props: {};
+    readonly blueprint: {
+        readonly label: "Icon";
+    };
+    readonly props: {
+        readonly source: {
+            readonly type: "media";
+            readonly category: "Content";
+            readonly label: "SVG source";
+            readonly mediaKinds: readonly ["image"];
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly size: {
+            readonly type: "number";
+            readonly category: "Appearance";
+            readonly label: "Size";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+        readonly color: {
+            readonly type: "string";
+            readonly category: "Appearance";
+            readonly label: "Color";
+            readonly authoring: {
+                readonly authority: "instance";
+            };
+        };
+    };
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/components/icon/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/icon/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;;;CAOiB,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/icon/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BiB,CAAC"}

package/dist/components/icon/meta.js

@@ -1,9 +1,30 @@
 export const iconMeta = {
     name: 'Icon',
     category: 'component',
-    directManifestNode: false,
+    description: 'Displays a standalone SVG icon from the app media registry.',
+    directManifestNode: true,
     allowedChildren: [],
-    note: 'Icon renderer component; not represented as a manifest node in v1.',
-    props: {},
+    blueprint: { label: 'Icon' },
+    props: {
+        source: {
+            type: 'media',
+            category: 'Content',
+            label: 'SVG source',
+            mediaKinds: ['image'],
+            authoring: { authority: 'instance' },
+        },
+        size: {
+            type: 'number',
+            category: 'Appearance',
+            label: 'Size',
+            authoring: { authority: 'instance' },
+        },
+        color: {
+            type: 'string',
+            category: 'Appearance',
+            label: 'Color',
+            authoring: { authority: 'instance' },
+        },
+    },
 };
 //# sourceMappingURL=meta.js.map

package/dist/components/icon/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/icon/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,oEAAoE;IAC1E,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const iconMeta = {\n  name: 'Icon',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Icon renderer component; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/icon/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,6DAA6D;IAC1E,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IAC5B,KAAK,EAAE;QACL,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,YAAY;YACnB,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const iconMeta = {\n  name: 'Icon',\n  category: 'component',\n  description: 'Displays a standalone SVG icon from the app media registry.',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: { label: 'Icon' },\n  props: {\n    source: {\n      type: 'media',\n      category: 'Content',\n      label: 'SVG source',\n      mediaKinds: ['image'],\n      authoring: { authority: 'instance' },\n    },\n    size: {\n      type: 'number',\n      category: 'Appearance',\n      label: 'Size',\n      authoring: { authority: 'instance' },\n    },\n    color: {\n      type: 'string',\n      category: 'Appearance',\n      label: 'Color',\n      authoring: { authority: 'instance' },\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/foundation/meta.d.ts

@@ -3,7 +3,7 @@ export declare const foundationMetas: {
         readonly name: "Box";
         readonly category: "foundation";
         readonly directManifestNode: true;
-        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         readonly blueprint: {
             readonly label: "Box";
         };
@@ -21,7 +21,7 @@ export declare const foundationMetas: {
         readonly name: "Container";
         readonly category: "foundation";
         readonly directManifestNode: true;
-        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         readonly blueprint: {
             readonly label: "Container";
         };
@@ -41,7 +41,7 @@ export declare const foundationMetas: {
         readonly name: "Grid";
         readonly category: "foundation";
         readonly directManifestNode: true;
-        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         readonly blueprint: {
             readonly label: "Grid";
         };
@@ -75,7 +75,7 @@ export declare const foundationMetas: {
         readonly name: "Stack";
         readonly category: "foundation";
         readonly directManifestNode: true;
-        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+        readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         readonly blueprint: {
             readonly label: "Stack";
         };

package/dist/layout/screen/meta.d.ts

@@ -2,7 +2,7 @@ export declare const screenMeta: {
     readonly name: "Screen";
     readonly category: "layout";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["ScreenSection", "Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["ScreenSection", "Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Screen";
     };

package/dist/layout/screen-section/meta.d.ts

@@ -2,7 +2,7 @@ export declare const screenSectionMeta: {
     readonly name: "ScreenSection";
     readonly category: "layout";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Screen section";
         readonly defaultProps: {

package/dist/metadata/allowedChildren.d.ts

@@ -1,5 +1,5 @@
-export declare const CONTAINER_ALLOWED_CHILDREN: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+export declare const CONTAINER_ALLOWED_CHILDREN: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
 export declare const CONTENT_RAIL_ALLOWED_CHILDREN: readonly ["Box", "Stack", "Card", "Panel", "Image", "ProductCard", "PostCard", "ChatListItem", "MessageBubble", "MissingElement"];
-export declare const SCREEN_SECTION_ALLOWED_CHILDREN: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
-export declare const SCREEN_ALLOWED_CHILDREN: readonly ["ScreenSection", "Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+export declare const SCREEN_SECTION_ALLOWED_CHILDREN: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+export declare const SCREEN_ALLOWED_CHILDREN: readonly ["ScreenSection", "Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
 //# sourceMappingURL=allowedChildren.d.ts.map

package/dist/metadata/allowedChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"allowedChildren.d.ts","sourceRoot":"","sources":["../../src/metadata/allowedChildren.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,oVA2B7B,CAAC;AAEX,eAAO,MAAM,6BAA6B,mIAWhC,CAAC;AAEX,eAAO,MAAM,+BAA+B,oVAA2C,CAAC;AAExF,eAAO,MAAM,uBAAuB,qWAA4D,CAAC"}
+{"version":3,"file":"allowedChildren.d.ts","sourceRoot":"","sources":["../../src/metadata/allowedChildren.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,qWA6B7B,CAAC;AAEX,eAAO,MAAM,6BAA6B,mIAWhC,CAAC;AAEX,eAAO,MAAM,+BAA+B,qWAA2C,CAAC;AAExF,eAAO,MAAM,uBAAuB,sXAA4D,CAAC"}

package/dist/metadata/allowedChildren.js

@@ -6,6 +6,8 @@ export const CONTAINER_ALLOWED_CHILDREN = [
     'Divider',
     'Text',
     'Heading',
+    'Icon',
+    'Image',
     'Button',
     'ButtonGroup',
     'ThemeModeToggle',

package/dist/metadata/allowedChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"allowedChildren.js","sourceRoot":"","sources":["../../src/metadata/allowedChildren.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,KAAK;IACL,OAAO;IACP,MAAM;IACN,WAAW;IACX,SAAS;IACT,MAAM;IACN,SAAS;IACT,QAAQ;IACR,aAAa;IACb,iBAAiB;IACjB,OAAO;IACP,UAAU;IACV,WAAW;IACX,MAAM;IACN,OAAO;IACP,QAAQ;IACR,YAAY;IACZ,eAAe;IACf,aAAa;IACb,UAAU;IACV,cAAc;IACd,eAAe;IACf,cAAc;IACd,eAAe;IACf,aAAa;IACb,gBAAgB;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,KAAK;IACL,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,aAAa;IACb,UAAU;IACV,cAAc;IACd,eAAe;IACf,gBAAgB;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,GAAG,0BAA0B,CAAU,CAAC;AAExF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,eAAe,EAAE,GAAG,0BAA0B,CAAU,CAAC","sourcesContent":["export const CONTAINER_ALLOWED_CHILDREN = [\n  'Box',\n  'Stack',\n  'Grid',\n  'Container',\n  'Divider',\n  'Text',\n  'Heading',\n  'Button',\n  'ButtonGroup',\n  'ThemeModeToggle',\n  'Input',\n  'Textarea',\n  'FormField',\n  'Card',\n  'Panel',\n  'Notice',\n  'EmptyState',\n  'SectionHeader',\n  'SettingsRow',\n  'PostCard',\n  'ChatListItem',\n  'MessageBubble',\n  'ProgressRing',\n  'ReaderSurface',\n  'ContentRail',\n  'MissingElement',\n] as const;\n\nexport const CONTENT_RAIL_ALLOWED_CHILDREN = [\n  'Box',\n  'Stack',\n  'Card',\n  'Panel',\n  'Image',\n  'ProductCard',\n  'PostCard',\n  'ChatListItem',\n  'MessageBubble',\n  'MissingElement',\n] as const;\n\nexport const SCREEN_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;\n\nexport const SCREEN_ALLOWED_CHILDREN = ['ScreenSection', ...CONTAINER_ALLOWED_CHILDREN] as const;\n"]}
+{"version":3,"file":"allowedChildren.js","sourceRoot":"","sources":["../../src/metadata/allowedChildren.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,KAAK;IACL,OAAO;IACP,MAAM;IACN,WAAW;IACX,SAAS;IACT,MAAM;IACN,SAAS;IACT,MAAM;IACN,OAAO;IACP,QAAQ;IACR,aAAa;IACb,iBAAiB;IACjB,OAAO;IACP,UAAU;IACV,WAAW;IACX,MAAM;IACN,OAAO;IACP,QAAQ;IACR,YAAY;IACZ,eAAe;IACf,aAAa;IACb,UAAU;IACV,cAAc;IACd,eAAe;IACf,cAAc;IACd,eAAe;IACf,aAAa;IACb,gBAAgB;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,KAAK;IACL,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,aAAa;IACb,UAAU;IACV,cAAc;IACd,eAAe;IACf,gBAAgB;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,GAAG,0BAA0B,CAAU,CAAC;AAExF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,eAAe,EAAE,GAAG,0BAA0B,CAAU,CAAC","sourcesContent":["export const CONTAINER_ALLOWED_CHILDREN = [\n  'Box',\n  'Stack',\n  'Grid',\n  'Container',\n  'Divider',\n  'Text',\n  'Heading',\n  'Icon',\n  'Image',\n  'Button',\n  'ButtonGroup',\n  'ThemeModeToggle',\n  'Input',\n  'Textarea',\n  'FormField',\n  'Card',\n  'Panel',\n  'Notice',\n  'EmptyState',\n  'SectionHeader',\n  'SettingsRow',\n  'PostCard',\n  'ChatListItem',\n  'MessageBubble',\n  'ProgressRing',\n  'ReaderSurface',\n  'ContentRail',\n  'MissingElement',\n] as const;\n\nexport const CONTENT_RAIL_ALLOWED_CHILDREN = [\n  'Box',\n  'Stack',\n  'Card',\n  'Panel',\n  'Image',\n  'ProductCard',\n  'PostCard',\n  'ChatListItem',\n  'MessageBubble',\n  'MissingElement',\n] as const;\n\nexport const SCREEN_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;\n\nexport const SCREEN_ALLOWED_CHILDREN = ['ScreenSection', ...CONTAINER_ALLOWED_CHILDREN] as const;\n"]}

package/dist/metadata/bindableComponentMeta.d.ts

@@ -848,11 +848,11 @@ export declare const ZORA_BINDABLE_COMPONENT_META: {
             };
             readonly headerActions: {
                 readonly label: "Header actions";
-                readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+                readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
             };
             readonly footerActions: {
                 readonly label: "Footer actions";
-                readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+                readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
             };
         };
         readonly props: {

package/dist/patterns/message-bubble/meta.d.ts

@@ -3,7 +3,7 @@ export declare const messageBubbleMeta: {
     readonly category: "pattern";
     readonly description: "Chat/message bubble with direction, author, text, meta, and delivery status presentation.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Message bubble";
         readonly icon: {

package/dist/patterns/notice/meta.d.ts

@@ -2,7 +2,7 @@ export declare const noticeMeta: {
     readonly name: "Notice";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Notice";
         readonly defaultProps: {

package/dist/patterns/panel/meta.d.ts

@@ -2,7 +2,7 @@ export declare const panelMeta: {
     readonly name: "Panel";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Panel";
         readonly defaultProps: {

package/dist/patterns/post-card/meta.d.ts

@@ -3,7 +3,7 @@ export declare const postCardMeta: {
     readonly category: "pattern";
     readonly description: "Social/content post card with author identity, body, media, actions, and comment previews.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Post card";
         readonly icon: {

package/dist/patterns/reader/meta.d.ts

@@ -125,11 +125,11 @@ export declare const readerSurfaceMeta: {
         };
         readonly headerActions: {
             readonly label: "Header actions";
-            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         };
         readonly footerActions: {
             readonly label: "Footer actions";
-            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         };
     };
     readonly props: {

package/dist/patterns/scanner/meta.d.ts

@@ -105,7 +105,7 @@ export declare const barcodeScannerViewMeta: {
     readonly category: "pattern";
     readonly description: "Composed scanner shell with permission, camera slot, scan overlay, and manual entry affordance.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly requirements: {
         readonly permissions: readonly [{
             readonly permission: "camera";
@@ -145,7 +145,7 @@ export declare const barcodeScannerViewMeta: {
         };
         readonly children: {
             readonly label: "Scanner footer";
-            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+            readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         };
     };
     readonly props: {

package/dist/theme/useZoraTheme.d.ts

@@ -1,7 +1,7 @@
 export declare function useZoraTheme(): {
     theme: import("@ankhorage/surface").SurfaceTheme;
     mode: "light" | "dark";
-    setThemeConfig: (config: Partial<import("@ankhorage/contracts").ThemeConfig>) => void;
+    setThemeConfig: (config: Partial<import("@ankhorage/surface").ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;
     _hasProvider?: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "4.1.0",
+  "version": "4.2.2",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
-    "@ankhorage/contracts": "^8.0.2",
+    "@ankhorage/contracts": "^11.0.0",
     "@ankhorage/surface": "^3.4.1"
   },
   "files": [

package/src/components/icon/meta.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('permits media-backed Icon and Image content in ordinary screen containers', () => {
+  const icon = ZORA_COMPONENT_META.Icon;
+  expect(icon.directManifestNode).toBe(true);
+  expect(icon.allowedChildren).toEqual([]);
+  expect(icon.props.source).toMatchObject({ type: 'media', mediaKinds: ['image'] });
+  for (const container of [
+    ZORA_COMPONENT_META.Box,
+    ZORA_COMPONENT_META.Stack,
+    ZORA_COMPONENT_META.Grid,
+    ZORA_COMPONENT_META.Container,
+    ZORA_COMPONENT_META.Card,
+    ZORA_COMPONENT_META.Screen,
+    ZORA_COMPONENT_META.ScreenSection,
+  ]) {
+    expect(container.allowedChildren).toContain('Icon');
+    expect(container.allowedChildren).toContain('Image');
+  }
+});

package/src/components/icon/meta.ts

@@ -3,8 +3,29 @@ import type { ZoraComponentMeta } from '../../metadata';
 export const iconMeta = {
   name: 'Icon',
   category: 'component',
-  directManifestNode: false,
+  description: 'Displays a standalone SVG icon from the app media registry.',
+  directManifestNode: true,
   allowedChildren: [],
-  note: 'Icon renderer component; not represented as a manifest node in v1.',
-  props: {},
+  blueprint: { label: 'Icon' },
+  props: {
+    source: {
+      type: 'media',
+      category: 'Content',
+      label: 'SVG source',
+      mediaKinds: ['image'],
+      authoring: { authority: 'instance' },
+    },
+    size: {
+      type: 'number',
+      category: 'Appearance',
+      label: 'Size',
+      authoring: { authority: 'instance' },
+    },
+    color: {
+      type: 'string',
+      category: 'Appearance',
+      label: 'Color',
+      authoring: { authority: 'instance' },
+    },
+  },
 } as const satisfies ZoraComponentMeta;

package/src/metadata/allowedChildren.ts

@@ -6,6 +6,8 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'Divider',
   'Text',
   'Heading',
+  'Icon',
+  'Image',
   'Button',
   'ButtonGroup',
   'ThemeModeToggle',

package/src/metadata/componentMeta.test.ts

@@ -131,6 +131,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Textarea',
       'Text',
       'Heading',
+      'Icon',
       'Image',
       'Divider',
       'ChatListItem',