@colixsystems/widget-sdk 0.51.0 → 0.52.0

package/README.md

@@ -51,7 +51,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.51.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.52.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.52.0
+
+**Lucide icon names accept any case (sc-2088).** A new `normalizeLucideIconName(name)` export maps a human-typed icon name to the PascalCase form Lucide exports its components under — `arrow-right`, `arrow_right`, `arrow right`, `arrowRight`, and `ArrowRight` all resolve to `ArrowRight`; `building-2` → `Building2`. The lucide.dev gallery and its copy button hand you kebab-case, so authors no longer have to hand-convert. The `<Icon name="…">` primitive normalizes its `name` before lookup, and the `icon` propertySchema type accepts any case. Additive — one new pure export; no existing export changed signature. `CONTRACT` is unchanged.
 
 ### What's new in 0.51.0
 

package/dist/icon.js

@@ -16,10 +16,11 @@
 
 import React from "react";
 import * as LucideIcons from "lucide-react-native";
+import { normalizeLucideIconName } from "./lucideIconName.js";
 
 export function Icon({ name, size, color }) {
-  const candidate =
-    typeof name === "string" && name.length > 0 ? LucideIcons[name] : null;
+  const resolved = normalizeLucideIconName(name);
+  const candidate = resolved ? LucideIcons[resolved] : null;
   const Component = candidate || LucideIcons.Square;
   const pixelSize = Number.isFinite(size) && size > 0 ? size : 24;
   return React.createElement(Component, {

package/dist/index.js

@@ -70,3 +70,4 @@ export {
 } from "./primitives.js";
 export { lintSource, bannedIdentifiers } from "./linter.js";
 export { CONTRACT, isHookAllowed, requiredContextKeys } from "./contract.js";
+export { normalizeLucideIconName } from "./lucideIconName.js";

package/dist/index.native.js

@@ -66,3 +66,4 @@ export {
 } from "./primitives.native.js";
 export { lintSource, bannedIdentifiers } from "./linter.js";
 export { CONTRACT, isHookAllowed, requiredContextKeys } from "./contract.js";
+export { normalizeLucideIconName } from "./lucideIconName.js";

package/dist/lucideIconName.cjs

@@ -0,0 +1,17 @@
+// CommonJS twin of lucideIconName.js for the backend (the page service +
+// any other Node consumer require this). Keep the two in sync — same
+// algorithm, same behaviour. See lucideIconName.js for the rationale.
+"use strict";
+
+function normalizeLucideIconName(name) {
+  if (typeof name !== "string") return "";
+  const trimmed = name.trim();
+  if (trimmed === "") return "";
+  return trimmed
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join("");
+}
+
+module.exports = { normalizeLucideIconName };

package/dist/lucideIconName.js

@@ -0,0 +1,19 @@
+// Normalize a human-typed Lucide icon name to the PascalCase form Lucide
+// exports its components under. The lucide.dev gallery shows kebab-case
+// (`arrow-right`) and its copy button hands you kebab-case, but
+// `lucide-react` / `lucide-react-native` key their components in PascalCase
+// (`ArrowRight`). This bridges the two so any of kebab / snake / spaced /
+// camel / PascalCase resolves: `arrow-right`, `arrow_right`, `arrow right`,
+// `arrowRight`, and `ArrowRight` all become `ArrowRight`; `building-2` becomes
+// `Building2`. Non-strings and blanks return "" so callers fall back to a
+// placeholder. Already-PascalCase names pass through unchanged.
+export function normalizeLucideIconName(name) {
+  if (typeof name !== "string") return "";
+  const trimmed = name.trim();
+  if (trimmed === "") return "";
+  return trimmed
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join("");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "node --test src/__tests__/contract.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-subscription.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js"
+    "test": "node --test src/__tests__/contract.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-subscription.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js"
   },
   "engines": {
     "node": ">=18"