@superblocksteam/cli 2.0.3-next.192 → 2.0.3-next.194

package/README.md

@@ -14,7 +14,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/2.0.3-next.192 linux-x64 node-v20.19.0
+@superblocksteam/cli/2.0.3-next.194 linux-x64 node-v20.19.0
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND

package/dist/{generated-BOH37UWZ.js → generated-C6SMCIBJ.js}

@@ -40,7 +40,7 @@ var content3 = '### Rules for using Superblocks components:\n\n- ENSURE THAT ALL
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-custom-components.js
 init_cjs_shims();
-var content4 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from \'react\'`.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to use custom components\n\n- If a user asks for something by name, like showing "metrics", and you do not find a "metrics" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\n**\u{1F6A8} IMPORTANT: When using this template, remember that sbComputed cannot be used as React children. All dynamic values must be in component properties like `text={}`, not as children like `{sbComputed(...)}`.**\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little "badge" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than "32 (2m)" we use "32" in the main heading text and then a badge with the "2m" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n  Global,\n  Theme,\n  Embed,\n  Env,\n} from "@superblocksteam/library";\n\n<SbContainer\n  layout="horizontal"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant="none"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout="vertical"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant="card"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="space-between"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="Avg delivery time (min)"\n        textStyle={{\n          variant: "body2",\n          textColor: {\n            default: sbComputed(() => Theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon="route" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="left"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="32"\n        textStyle={{\n          variant: "heading1",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered "good" (lower delivery time is better) */}\n      <SbContainer\n        layout="horizontal"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant="none"\n        spacing={Dim.px(2)}\n        horizontalAlign="center"\n        verticalAlign="center"\n        backgroundColor="#c4e1af"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon="arrow_downward_alt"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text="2m"\n          width={Dim.fit()}\n          textStyle={{\n            variant: "body2",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n';
+var content4 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from \'react\'`.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to create a net new custom component\n\n- If a user asks for something by name, like showing "metrics card", and you do not find a "metrics card" component in the Superblocks library, be sure to check if an existing custom component exists that you can use inside the `/components` directory of the project.\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-data-filtering.js
 init_cjs_shims();

package/dist/index.js

@@ -296626,7 +296626,7 @@ init_cjs_shims();
 init_cjs_shims();
 var generated = {};
 try {
-  generated = await import("./generated-BOH37UWZ.js");
+  generated = await import("./generated-C6SMCIBJ.js");
 } catch (_error) {
   getLogger().warn("[ai-service] Generated markdown modules not found. Run `pnpm generate:markdown` first.");
 }
@@ -322021,7 +322021,7 @@ var import_util28 = __toESM(require_dist3(), 1);
 // ../sdk/package.json
 var package_default = {
   name: "@superblocksteam/sdk",
-  version: "2.0.3-next.192",
+  version: "2.0.3-next.194",
   type: "module",
   description: "Superblocks JS SDK",
   homepage: "https://www.superblocks.com",
@@ -322063,8 +322063,8 @@ var package_default = {
     "@rollup/wasm-node": "^4.35.0",
     "@superblocksteam/bucketeer-sdk": "0.5.0",
     "@superblocksteam/shared": "0.9160.0",
-    "@superblocksteam/util": "2.0.3-next.192",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.192",
+    "@superblocksteam/util": "2.0.3-next.194",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.194",
     "@vitejs/plugin-react": "^4.3.4",
     axios: "^1.4.0",
     chokidar: "^4.0.3",
@@ -329038,7 +329038,7 @@ async function startVite({ app, httpServer: httpServer2, root: root2, mode, port
   };
   const isCustomBuildEnabled2 = await isCustomComponentsEnabled();
   const customFolder = path34.join(root2, "custom");
-  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.192";
+  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.194";
   const env3 = loadEnv(mode, root2, "");
   const hmrPort = await getFreePort();
   const hmrOptions = {

package/oclif.manifest.json

@@ -571,5 +571,5 @@
       "strict": true
     }
   },
-  "version": "2.0.3-next.192"
+  "version": "2.0.3-next.194"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "2.0.3-next.192",
+  "version": "2.0.3-next.194",
   "type": "module",
   "description": "Official Superblocks CLI",
   "homepage": "https://www.superblocks.com",
@@ -42,9 +42,9 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@oclif/test": "^4.1.11",
-    "@superblocksteam/sdk": "2.0.3-next.192",
+    "@superblocksteam/sdk": "2.0.3-next.194",
     "@superblocksteam/shared": "0.9160.0",
-    "@superblocksteam/util": "2.0.3-next.192",
+    "@superblocksteam/util": "2.0.3-next.194",
     "@types/babel__core": "^7.20.0",
     "@types/chai": "^4",
     "@types/fs-extra": "^11.0.1",