@dfosco/storyboard-react 3.11.0-beta.0 → 3.11.0-beta.2

package/src/canvas/widgets/WidgetChrome.module.css

@@ -217,3 +217,67 @@
   border-color: currentColor;
   box-shadow: 0 0 0 1px currentColor;
 }
+
+/* Overflow menu */
+.overflowWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.overflowMenu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 180px;
+  padding: 4px;
+  background: var(--bgColor-default, #ffffff);
+  border-radius: 10px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+  z-index: 10;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowMenu {
+  background: var(--bgColor-muted, #161b22);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.45);
+}
+
+.overflowItem {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem {
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+}
+
+.overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #ffebe9);
+  color: var(--fgColor-danger, #d1242f);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #490202);
+  color: var(--fgColor-danger, #f85149);
+}

package/src/canvas/widgets/widgetConfig.js

@@ -6,9 +6,36 @@
  *
  * The config is the single source of truth for widget definitions —
  * prop schemas, feature lists, labels, and icons all come from here.
+ *
+ * Supports `$variable` references in string values, resolved from
+ * the top-level `variables` object in widgets.config.json.
  */
 import widgetsConfig from '@dfosco/storyboard-core/widgets.config.json'
 
+/** Variables defined in config — used to resolve `$key` references. */
+const variables = widgetsConfig.variables || {}
+
+/**
+ * Resolve `$variable` references in a string value.
+ * Returns the original value if it's not a string or doesn't start with `$`.
+ */
+function resolveVar(value) {
+  if (typeof value !== 'string' || !value.startsWith('$')) return value
+  const key = value.slice(1)
+  return variables[key] ?? value
+}
+
+/**
+ * Resolve all string values in a feature object.
+ */
+function resolveFeature(feature) {
+  const resolved = {}
+  for (const [key, val] of Object.entries(feature)) {
+    resolved[key] = resolveVar(val)
+  }
+  return resolved
+}
+
 /**
  * Convert a config prop definition to the schema shape used by widgetProps.js.
  * Config uses `"default"`, schema uses `"defaultValue"`.
@@ -42,16 +69,30 @@ function buildSchemas() {
   return result
 }
 
+/**
+ * Build resolved widget type entries with variables expanded in features.
+ */
+function buildWidgetTypes() {
+  const result = {}
+  for (const [type, def] of Object.entries(widgetsConfig.widgets)) {
+    result[type] = {
+      ...def,
+      features: (def.features || []).map(resolveFeature),
+    }
+  }
+  return result
+}
+
 /** All widget schemas, keyed by type string. */
 export const schemas = buildSchemas()
 
-/** Full widget config entries, keyed by type string. */
-export const widgetTypes = widgetsConfig.widgets
+/** Full widget config entries (with resolved variables), keyed by type string. */
+export const widgetTypes = buildWidgetTypes()
 
 /**
  * Get the feature list for a widget type.
  * @param {string} type — widget type string
- * @returns {Array} features array from config, or empty array
+ * @returns {Array} features array from config (variables resolved), or empty array
  */
 export function getFeatures(type) {
   return widgetTypes[type]?.features ?? []