@stackable-labs/sdk-extension-contracts 1.101.0 → 1.102.0

package/dist/index.d.ts

@@ -51,12 +51,14 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "square";
         readonly category: "layout";
         readonly attributes: readonly ["className"];
+        readonly childOnly: true;
     };
     readonly 'ui-card-header': {
         readonly description: "Header area within a Card";
         readonly icon: "square";
         readonly category: "layout";
         readonly attributes: readonly ["className"];
+        readonly childOnly: true;
     };
     readonly 'ui-button': {
         readonly description: "Interactive button with variant and size options";
@@ -102,12 +104,14 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "text-cursor-input";
         readonly category: "input";
         readonly attributes: readonly ["type", "placeholder", "value", "onChange", "disabled", "className", "id"];
+        readonly selfClosing: true;
     };
     readonly 'ui-textarea': {
         readonly description: "Multi-line text input field";
         readonly icon: "text";
         readonly category: "input";
         readonly attributes: readonly ["placeholder", "value", "onChange", "disabled", "rows", "className", "id"];
+        readonly selfClosing: true;
     };
     readonly 'ui-select': {
         readonly description: "Dropdown select with options";
@@ -121,12 +125,14 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "chevrons-up-down";
         readonly category: "input";
         readonly attributes: readonly ["value", "disabled", "className"];
+        readonly childOnly: true;
     };
     readonly 'ui-checkbox': {
         readonly description: "Checkbox toggle for boolean values";
         readonly icon: "square-check";
         readonly category: "input";
         readonly attributes: readonly ["checked", "onChange", "disabled", "className", "id"];
+        readonly selfClosing: true;
     };
     readonly 'ui-switch': {
         readonly description: "Toggle switch for on/off states";
@@ -136,6 +142,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly attributeValues: {
             readonly size: readonly ["sm", "default"];
         };
+        readonly selfClosing: true;
     };
     readonly 'ui-label': {
         readonly description: "Form label associated with an input";
@@ -155,6 +162,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "circle-dot";
         readonly category: "input";
         readonly attributes: readonly ["value", "disabled", "className", "id"];
+        readonly childOnly: true;
     };
     readonly 'ui-stack': {
         readonly description: "Vertical or horizontal flex container with gap";
@@ -180,6 +188,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "minus";
         readonly category: "layout";
         readonly attributes: readonly ["className"];
+        readonly selfClosing: true;
     };
     readonly 'ui-tabs': {
         readonly description: "Tabbed content container";
@@ -194,18 +203,21 @@ declare const UI_TAG_DEFINITIONS: {
         readonly category: "navigation";
         readonly attributes: readonly ["className"];
         readonly children: readonly ["ui-tabs-trigger"];
+        readonly childOnly: true;
     };
     readonly 'ui-tabs-trigger': {
         readonly description: "Clickable tab label within TabsList";
         readonly icon: "panel-top";
         readonly category: "navigation";
         readonly attributes: readonly ["value", "className"];
+        readonly childOnly: true;
     };
     readonly 'ui-tabs-content': {
         readonly description: "Content panel shown when its tab is active";
         readonly icon: "panel-top";
         readonly category: "navigation";
         readonly attributes: readonly ["value", "className"];
+        readonly childOnly: true;
     };
     readonly 'ui-scroll-area': {
         readonly description: "Scrollable content container";
@@ -218,6 +230,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "circle-user";
         readonly category: "composite";
         readonly attributes: readonly ["src", "alt", "className"];
+        readonly selfClosing: true;
     };
     readonly 'ui-icon': {
         readonly description: "Icon from the allowed icon set";
@@ -227,6 +240,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly attributeValues: {
             readonly size: readonly ["sm", "md", "lg"];
         };
+        readonly selfClosing: true;
     };
     readonly 'ui-qr-code': {
         readonly description: "QR code rendered from a string payload";
@@ -234,10 +248,11 @@ declare const UI_TAG_DEFINITIONS: {
         readonly category: "composite";
         readonly attributes: readonly ["value", "size", "variant", "level", "alt", "className"];
         readonly attributeValues: {
-            readonly size: readonly ["sm", "md", "lg"];
+            readonly size: readonly ["md", "sm", "lg"];
             readonly variant: readonly ["default", "inverted"];
-            readonly level: readonly ["low", "medium", "quartile", "high"];
+            readonly level: readonly ["medium", "low", "quartile", "high"];
         };
+        readonly selfClosing: true;
     };
     readonly 'ui-link': {
         readonly description: "Hyperlink element";
@@ -257,12 +272,14 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "menu";
         readonly category: "navigation";
         readonly attributes: readonly ["icon", "label", "description", "onClick", "className"];
+        readonly childOnly: true;
     };
     readonly 'ui-skeleton': {
         readonly description: "Loading placeholder with shimmer effect";
         readonly icon: "loader";
         readonly category: "feedback";
         readonly attributes: readonly ["width", "height", "className"];
+        readonly selfClosing: true;
     };
     readonly 'ui-tooltip': {
         readonly description: "Hover tooltip with text content";
@@ -275,6 +292,7 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "bar-chart";
         readonly category: "feedback";
         readonly attributes: readonly ["value", "className"];
+        readonly selfClosing: true;
     };
     readonly 'ui-alert': {
         readonly description: "Alert banner with icon and optional title";
@@ -297,12 +315,14 @@ declare const UI_TAG_DEFINITIONS: {
         readonly icon: "chevrons-down-up";
         readonly category: "composite";
         readonly attributes: readonly ["className"];
+        readonly childOnly: true;
     };
     readonly 'ui-collapsible-content': {
         readonly description: "Content revealed when Collapsible is open";
         readonly icon: "chevrons-down-up";
         readonly category: "composite";
         readonly attributes: readonly ["className"];
+        readonly childOnly: true;
     };
 };
 /** Union type of all valid UI tag names */
@@ -331,14 +351,35 @@ declare const UI_TAG_CHILDREN: Partial<Record<UITag, readonly UITag[]>>;
  * `<ui.X {...args}/>` template and a source-as-render template.
  */
 declare const UI_TAG_COMPOUND: Partial<Record<UITag, readonly UITag[]>>;
+/**
+ * Tags that render with no children (self-closing in JSX).
+ * Driven by the `selfClosing` flag in UI_TAG_DEFINITIONS.
+ * Used by codegen to choose between `<ui.X {...args} />` and
+ * `<ui.X {...args}>{children}</ui.X>` templates.
+ */
+declare const UI_TAG_SELF_CLOSING: ReadonlySet<UITag>;
+/**
+ * Tags that exist only as structural children of compound parents.
+ * Driven by the `childOnly` flag in UI_TAG_DEFINITIONS.
+ * Used by codegen to skip standalone stories/palette entries for these tags.
+ */
+declare const UI_TAG_CHILD_ONLY: ReadonlySet<UITag>;
 /** Category for each UI tag — used for grouping in stories and palettes. */
 declare const UI_TAG_CATEGORIES: Record<UITag, UITagCategory>;
 declare const tagToComponentName: (tag: UITag) => string;
 /**
  * Supported icon names (subset of lucide-react).
  * Extensions reference icons by name; host renders the actual icon component.
+ *
+ * ICON REGISTRY — manual update spots (keep in lockstep):
+ *   1. packages/sdk/extension/contracts/src/components.ts → ALLOWED_ICONS (this list)
+ *   2. packages/embeddables/src/lib/hostComponents.tsx    → ICON_MAP (+ lucide-react import)
+ * Auto-generated from ALLOWED_ICONS (no edits needed):
+ *   • SKILL.md icon catalogs (ai-docs generators/components.ts → generate-skills.ts)
+ *   • storybook stories, site-developers content, dist/index.d.ts, studio bundle
+ * Grep `ICON REGISTRY` to find every spot.
  */
-declare const ALLOWED_ICONS: readonly ["arrow-left", "calendar", "check-circle-2", "chevron-left", "chevron-right", "clock", "credit-card", "external-link", "help-circle", "info", "loader-2", "mail", "map-pin", "message-circle", "message-square", "package", "phone", "search", "shopping-bag", "sparkles", "truck", "user", "x-circle", "alert-circle", "book-open", "qr-code"];
+declare const ALLOWED_ICONS: readonly ["arrow-left", "calendar", "check-circle-2", "chevron-left", "chevron-right", "clock", "credit-card", "external-link", "help-circle", "info", "loader-2", "mail", "map-pin", "message-circle", "message-square", "package", "phone", "search", "shopping-bag", "sparkles", "truck", "user", "x-circle", "alert-circle", "book-open", "qr-code", "image-off"];
 type AllowedIconName = (typeof ALLOWED_ICONS)[number];
 
 /**
@@ -1007,4 +1048,4 @@ interface Order {
     display_status?: OrderStatus;
 }
 
-export { ACTIVITY_EVENT, ALLOWED_ICONS, type ActionInvokePayload, type ActionPayloadMap, type ActivityEvent, type ActivityEventHandler, type ActivityEventType, type Address, type AllowedIconName, type ApiError, type ApiRequest, type ApiResponse, CAPABILITY_PERMISSION_MAP, type Capability, type CapabilityCall, type CapabilityRequest, type CapabilityResponse, type CapabilityType, type ContextData, type ConversationField, type ConversationTags, type Customer, type DataField, type DataFieldType, type EncryptedPayload, type EventDomain, type EventType, type ExtendIdentityHandler, type ExtendIdentityRequest, type ExtendIdentityResponse, type ExtensionManifest, type ExtensionRegistryEntry, type FetchRequest, type FetchRequestInit, type FetchResponse, type HostToSandboxMessage, IDENTITY_EVENT, INVOKE_ACTION, type IdentityBaseClaims, type IdentityEvent, type IdentityEventType, type IdentityState, type InstanceConfig, type InstanceOption, type InvokeAction, type MarketplaceExtension, type MessagingContext, type MessagingEvent, type MessagingEventHandler, type MessagingEventType, type MessagingPostbackEvent, type MessengerCommand, type NamedEntity, type NewConversationPayload, type Order, type OrderAction, type OrderItem, type OrderStatus, type OrderStatuses, PERMISSIONS, type Permission, type Price, RESERVED_CONTEXT_KEYS, type ReservedContextKey, SURFACE_TARGET, type SandboxToHostMessage, type Shipment, type SurfaceContext, type SurfaceLifecycleMessage, type SurfaceTarget, type Target, type Theme, type ToastPayload, type UITag, type UITagCategory, UI_TAGS, UI_TAG_ATTRIBUTES, UI_TAG_ATTRIBUTE_VALUES, UI_TAG_CATEGORIES, UI_TAG_CHILDREN, UI_TAG_COMPOUND, UI_TAG_DEFINITIONS, type UserIdentity, type WellKnownActivityEvent, type WidgetAction, tagToComponentName };
+export { ACTIVITY_EVENT, ALLOWED_ICONS, type ActionInvokePayload, type ActionPayloadMap, type ActivityEvent, type ActivityEventHandler, type ActivityEventType, type Address, type AllowedIconName, type ApiError, type ApiRequest, type ApiResponse, CAPABILITY_PERMISSION_MAP, type Capability, type CapabilityCall, type CapabilityRequest, type CapabilityResponse, type CapabilityType, type ContextData, type ConversationField, type ConversationTags, type Customer, type DataField, type DataFieldType, type EncryptedPayload, type EventDomain, type EventType, type ExtendIdentityHandler, type ExtendIdentityRequest, type ExtendIdentityResponse, type ExtensionManifest, type ExtensionRegistryEntry, type FetchRequest, type FetchRequestInit, type FetchResponse, type HostToSandboxMessage, IDENTITY_EVENT, INVOKE_ACTION, type IdentityBaseClaims, type IdentityEvent, type IdentityEventType, type IdentityState, type InstanceConfig, type InstanceOption, type InvokeAction, type MarketplaceExtension, type MessagingContext, type MessagingEvent, type MessagingEventHandler, type MessagingEventType, type MessagingPostbackEvent, type MessengerCommand, type NamedEntity, type NewConversationPayload, type Order, type OrderAction, type OrderItem, type OrderStatus, type OrderStatuses, PERMISSIONS, type Permission, type Price, RESERVED_CONTEXT_KEYS, type ReservedContextKey, SURFACE_TARGET, type SandboxToHostMessage, type Shipment, type SurfaceContext, type SurfaceLifecycleMessage, type SurfaceTarget, type Target, type Theme, type ToastPayload, type UITag, type UITagCategory, UI_TAGS, UI_TAG_ATTRIBUTES, UI_TAG_ATTRIBUTE_VALUES, UI_TAG_CATEGORIES, UI_TAG_CHILDREN, UI_TAG_CHILD_ONLY, UI_TAG_COMPOUND, UI_TAG_DEFINITIONS, UI_TAG_SELF_CLOSING, type UserIdentity, type WellKnownActivityEvent, type WidgetAction, tagToComponentName };

package/dist/index.js

@@ -36,13 +36,15 @@ var UI_TAG_DEFINITIONS = {
     description: "Content area within a Card",
     icon: "square",
     category: "layout",
-    attributes: ["className"]
+    attributes: ["className"],
+    childOnly: true
   },
   "ui-card-header": {
     description: "Header area within a Card",
     icon: "square",
     category: "layout",
-    attributes: ["className"]
+    attributes: ["className"],
+    childOnly: true
   },
   "ui-button": {
     description: "Interactive button with variant and size options",
@@ -87,13 +89,15 @@ var UI_TAG_DEFINITIONS = {
     description: "Single-line text input field",
     icon: "text-cursor-input",
     category: "input",
-    attributes: ["type", "placeholder", "value", "onChange", "disabled", "className", "id"]
+    attributes: ["type", "placeholder", "value", "onChange", "disabled", "className", "id"],
+    selfClosing: true
   },
   "ui-textarea": {
     description: "Multi-line text input field",
     icon: "text",
     category: "input",
-    attributes: ["placeholder", "value", "onChange", "disabled", "rows", "className", "id"]
+    attributes: ["placeholder", "value", "onChange", "disabled", "rows", "className", "id"],
+    selfClosing: true
   },
   "ui-select": {
     description: "Dropdown select with options",
@@ -106,13 +110,15 @@ var UI_TAG_DEFINITIONS = {
     description: "Option within a Select dropdown",
     icon: "chevrons-up-down",
     category: "input",
-    attributes: ["value", "disabled", "className"]
+    attributes: ["value", "disabled", "className"],
+    childOnly: true
   },
   "ui-checkbox": {
     description: "Checkbox toggle for boolean values",
     icon: "square-check",
     category: "input",
-    attributes: ["checked", "onChange", "disabled", "className", "id"]
+    attributes: ["checked", "onChange", "disabled", "className", "id"],
+    selfClosing: true
   },
   "ui-switch": {
     description: "Toggle switch for on/off states",
@@ -121,7 +127,8 @@ var UI_TAG_DEFINITIONS = {
     attributes: ["checked", "onChange", "disabled", "size", "className", "id"],
     attributeValues: {
       size: ["sm", "default"]
-    }
+    },
+    selfClosing: true
   },
   "ui-label": {
     description: "Form label associated with an input",
@@ -140,7 +147,8 @@ var UI_TAG_DEFINITIONS = {
     description: "Individual radio button within a RadioGroup",
     icon: "circle-dot",
     category: "input",
-    attributes: ["value", "disabled", "className", "id"]
+    attributes: ["value", "disabled", "className", "id"],
+    childOnly: true
   },
   "ui-stack": {
     // TODO: explore adding `align` attribute (e.g., 'start', 'center', 'end') — needs host implementation in hostComponents.tsx
@@ -167,7 +175,8 @@ var UI_TAG_DEFINITIONS = {
     description: "Horizontal divider line",
     icon: "minus",
     category: "layout",
-    attributes: ["className"]
+    attributes: ["className"],
+    selfClosing: true
   },
   "ui-tabs": {
     description: "Tabbed content container",
@@ -181,19 +190,22 @@ var UI_TAG_DEFINITIONS = {
     icon: "panel-top",
     category: "navigation",
     attributes: ["className"],
-    children: ["ui-tabs-trigger"]
+    children: ["ui-tabs-trigger"],
+    childOnly: true
   },
   "ui-tabs-trigger": {
     description: "Clickable tab label within TabsList",
     icon: "panel-top",
     category: "navigation",
-    attributes: ["value", "className"]
+    attributes: ["value", "className"],
+    childOnly: true
   },
   "ui-tabs-content": {
     description: "Content panel shown when its tab is active",
     icon: "panel-top",
     category: "navigation",
-    attributes: ["value", "className"]
+    attributes: ["value", "className"],
+    childOnly: true
   },
   "ui-scroll-area": {
     description: "Scrollable content container",
@@ -205,7 +217,8 @@ var UI_TAG_DEFINITIONS = {
     description: "User avatar with image and initials fallback",
     icon: "circle-user",
     category: "composite",
-    attributes: ["src", "alt", "className"]
+    attributes: ["src", "alt", "className"],
+    selfClosing: true
   },
   "ui-icon": {
     description: "Icon from the allowed icon set",
@@ -214,7 +227,8 @@ var UI_TAG_DEFINITIONS = {
     attributes: ["name", "size", "className"],
     attributeValues: {
       size: ["sm", "md", "lg"]
-    }
+    },
+    selfClosing: true
   },
   "ui-qr-code": {
     description: "QR code rendered from a string payload",
@@ -222,10 +236,11 @@ var UI_TAG_DEFINITIONS = {
     category: "composite",
     attributes: ["value", "size", "variant", "level", "alt", "className"],
     attributeValues: {
-      size: ["sm", "md", "lg"],
+      size: ["md", "sm", "lg"],
       variant: ["default", "inverted"],
-      level: ["low", "medium", "quartile", "high"]
-    }
+      level: ["medium", "low", "quartile", "high"]
+    },
+    selfClosing: true
   },
   "ui-link": {
     description: "Hyperlink element",
@@ -244,13 +259,15 @@ var UI_TAG_DEFINITIONS = {
     description: "Clickable item within a Menu",
     icon: "menu",
     category: "navigation",
-    attributes: ["icon", "label", "description", "onClick", "className"]
+    attributes: ["icon", "label", "description", "onClick", "className"],
+    childOnly: true
   },
   "ui-skeleton": {
     description: "Loading placeholder with shimmer effect",
     icon: "loader",
     category: "feedback",
-    attributes: ["width", "height", "className"]
+    attributes: ["width", "height", "className"],
+    selfClosing: true
   },
   "ui-tooltip": {
     description: "Hover tooltip with text content",
@@ -262,7 +279,8 @@ var UI_TAG_DEFINITIONS = {
     description: "Progress bar with percentage value",
     icon: "bar-chart",
     category: "feedback",
-    attributes: ["value", "className"]
+    attributes: ["value", "className"],
+    selfClosing: true
   },
   "ui-alert": {
     description: "Alert banner with icon and optional title",
@@ -284,13 +302,15 @@ var UI_TAG_DEFINITIONS = {
     description: "Clickable trigger to toggle Collapsible",
     icon: "chevrons-down-up",
     category: "composite",
-    attributes: ["className"]
+    attributes: ["className"],
+    childOnly: true
   },
   "ui-collapsible-content": {
     description: "Content revealed when Collapsible is open",
     icon: "chevrons-down-up",
     category: "composite",
-    attributes: ["className"]
+    attributes: ["className"],
+    childOnly: true
   }
 };
 var defs = UI_TAG_DEFINITIONS;
@@ -308,6 +328,12 @@ var UI_TAG_COMPOUND = {
   ...UI_TAG_CHILDREN,
   "ui-tooltip": ["ui-button"]
 };
+var UI_TAG_SELF_CLOSING = new Set(
+  UI_TAGS.filter((tag) => defs[tag].selfClosing === true)
+);
+var UI_TAG_CHILD_ONLY = new Set(
+  UI_TAGS.filter((tag) => defs[tag].childOnly === true)
+);
 var UI_TAG_CATEGORIES = Object.fromEntries(
   UI_TAGS.map((tag) => [tag, defs[tag].category])
 );
@@ -341,7 +367,8 @@ var ALLOWED_ICONS = [
   "x-circle",
   "alert-circle",
   "book-open",
-  "qr-code"
+  "qr-code",
+  "image-off"
 ];
 
 // src/capabilities.ts
@@ -400,4 +427,4 @@ var SURFACE_TARGET = {
   FOOTER_LINKS: "slot.footer-links"
 };
 
-export { ACTIVITY_EVENT, ALLOWED_ICONS, CAPABILITY_PERMISSION_MAP, EXTENSION_CATEGORY, EXTENSION_VISIBILITY, IDENTITY_EVENT, INVOKE_ACTION, PERMISSIONS, RESERVED_CONTEXT_KEYS, SURFACE_TARGET, UI_TAGS, UI_TAG_ATTRIBUTES, UI_TAG_ATTRIBUTE_VALUES, UI_TAG_CATEGORIES, UI_TAG_CHILDREN, UI_TAG_COMPOUND, UI_TAG_DEFINITIONS, asClerkOrgId, asClerkUserId, asISOTimestamp, tagToComponentName };
+export { ACTIVITY_EVENT, ALLOWED_ICONS, CAPABILITY_PERMISSION_MAP, EXTENSION_CATEGORY, EXTENSION_VISIBILITY, IDENTITY_EVENT, INVOKE_ACTION, PERMISSIONS, RESERVED_CONTEXT_KEYS, SURFACE_TARGET, UI_TAGS, UI_TAG_ATTRIBUTES, UI_TAG_ATTRIBUTE_VALUES, UI_TAG_CATEGORIES, UI_TAG_CHILDREN, UI_TAG_CHILD_ONLY, UI_TAG_COMPOUND, UI_TAG_DEFINITIONS, UI_TAG_SELF_CLOSING, asClerkOrgId, asClerkUserId, asISOTimestamp, tagToComponentName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/sdk-extension-contracts",
-  "version": "1.101.0",
+  "version": "1.102.0",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",