stickyflow 0.4.0 → 0.5.0

package/dist/{chunk-CXL254BT.cjs → chunk-XY2GZUHC.cjs}

@@ -113,6 +113,181 @@ function deriveFaceFills(fill) {
   };
 }
 
+// src/model/component/supportedTypes.ts
+var BUILT_IN_COMPONENT_TYPES = ["rollingNumber", "tickScale", "ruler"];
+function isBuiltInComponentType(value) {
+  return value !== void 0 && BUILT_IN_COMPONENT_TYPES.includes(value);
+}
+
+// src/model/component/guards.ts
+function isGenericComponent(component) {
+  return !isBuiltInComponentType(component.type);
+}
+
+// src/model/component/builtIns.ts
+var BUILT_IN_DESCRIPTORS = [
+  {
+    type: "rollingNumber",
+    group: "readout",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "none",
+    pointerScale: false,
+    size: { width: 160, height: 90 }
+  },
+  {
+    type: "tickScale",
+    group: "readout",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "none",
+    pointerScale: true,
+    size: { width: 200, height: 200 }
+  },
+  {
+    type: "ruler",
+    group: "input",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "scale",
+    pointerScale: true,
+    size: { width: 120, height: 360 }
+  },
+  {
+    type: "switch",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 52, height: 30, minWidth: 36, minHeight: 20, aspect: 52 / 30 },
+    role: "switch"
+  },
+  {
+    type: "checkbox",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      stroke: { type: "color", default: "#94a3b8" },
+      check: { type: "color", default: "#ffffff" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 160, height: 24, minWidth: 18, minHeight: 18 },
+    role: "checkbox"
+  },
+  {
+    type: "toggleButton",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      stroke: { type: "color", default: "#94a3b8" },
+      textColor: { type: "color", default: "#0f172a" },
+      onTextColor: { type: "color", default: "#ffffff" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
+    role: "button"
+  },
+  {
+    type: "button",
+    group: "action",
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      textColor: { type: "color", default: "#ffffff" },
+      radius: { type: "number", default: 8, min: 0, max: 200 },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "press",
+    pointerScale: false,
+    size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
+    role: "button"
+  }
+];
+
+// src/model/component/registry.ts
+var version = 0;
+var descriptors = new Map(
+  BUILT_IN_DESCRIPTORS.map((descriptor) => [descriptor.type, descriptor])
+);
+var TYPE_NAME = /^[A-Za-z][A-Za-z0-9]*$/;
+function registerComponentDescriptor(descriptor) {
+  if (!TYPE_NAME.test(descriptor.type)) {
+    throw new Error(`'${descriptor.type}' is not a valid component type name.`);
+  }
+  if (descriptors.has(descriptor.type)) {
+    throw new Error(`A component of type '${descriptor.type}' is already defined.`);
+  }
+  descriptors.set(descriptor.type, descriptor);
+  version += 1;
+  return () => {
+    if (descriptors.get(descriptor.type) === descriptor) {
+      descriptors.delete(descriptor.type);
+      version += 1;
+    }
+  };
+}
+function componentRegistryVersion() {
+  return version;
+}
+function getComponentDescriptor(type) {
+  return type === void 0 ? void 0 : descriptors.get(type);
+}
+function componentTypes() {
+  return [...descriptors.keys()];
+}
+function isComponentType(value) {
+  return getComponentDescriptor(value) !== void 0;
+}
+
+// src/model/component/format.ts
+function formatRollingNumber(value, digits) {
+  const text = String(value);
+  if (digits === void 0) {
+    return text;
+  }
+  if (!Number.isInteger(digits) || digits < 1) {
+    return text;
+  }
+  return text.padStart(digits, "0");
+}
+
+// src/model/component/theme.ts
+var DEFAULT_ROLLING_NUMBER_STYLE = {
+  color: "#000000",
+  surface: "rgba(255, 255, 255, 0.28)",
+  divider: "rgba(0, 0, 0, 0.2)",
+  labelColor: "rgba(0, 0, 0, 0.62)",
+  fontFamily: "'Roboto Mono', 'SFMono-Regular', Consolas, monospace",
+  variant: "flip",
+  motion: "roll",
+  fontWeight: "300",
+  fontSize: 0
+};
+function resolveRollingNumberStyle(style) {
+  return {
+    color: style.color ?? DEFAULT_ROLLING_NUMBER_STYLE.color,
+    surface: style.surface ?? DEFAULT_ROLLING_NUMBER_STYLE.surface,
+    divider: style.divider ?? DEFAULT_ROLLING_NUMBER_STYLE.divider,
+    labelColor: style.labelColor ?? DEFAULT_ROLLING_NUMBER_STYLE.labelColor,
+    fontFamily: style.fontFamily ?? DEFAULT_ROLLING_NUMBER_STYLE.fontFamily,
+    variant: style.variant ?? DEFAULT_ROLLING_NUMBER_STYLE.variant,
+    motion: style.motion ?? DEFAULT_ROLLING_NUMBER_STYLE.motion,
+    fontWeight: style.fontWeight ?? DEFAULT_ROLLING_NUMBER_STYLE.fontWeight,
+    fontSize: style.fontSize ?? DEFAULT_ROLLING_NUMBER_STYLE.fontSize
+  };
+}
+
 // src/sflLanguage/lexing/cursor.ts
 var SourceCursor = class {
   constructor(input) {
@@ -512,6 +687,7 @@ var NAMED_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
+  "Component",
   "Shape",
   "Text",
   "Isometric",
@@ -530,6 +706,7 @@ var NAMED_BLOCK_KINDS = [
 ];
 var SIDES = ["top", "bottom", "left", "right"];
 var isSide = (s) => SIDES.includes(s);
+var isComponentBlockKind = (kind) => kind === "Component" || kind === "Widget";
 var isNamedBlockKind = (s) => NAMED_BLOCK_KINDS.includes(s);
 
 // src/sflLanguage/parsing/values.ts
@@ -969,14 +1146,14 @@ var DocumentParser = class {
     if (header.value !== "sfl") {
       throw new SflParseError(`document must start with 'sfl', got '${header.value}'`, header.line, header.col);
     }
-    const version = this.cursor.expect("number", "version number");
+    const version2 = this.cursor.expect("number", "version number");
     this.cursor.skipNewlines();
     const blocks = [];
     while (!this.cursor.at("eof")) {
       blocks.push(this.blocks.parseBlock());
       this.cursor.skipNewlines();
     }
-    return { version: version.value, blocks };
+    return { version: version2.value, blocks };
   }
 };
 
@@ -1423,6 +1600,7 @@ var CANVAS_OBJECT_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
+  "Component",
   "Isometric"
 ];
 var canvasObjectBlockKinds = new Set(CANVAS_OBJECT_BLOCK_KINDS);
@@ -1914,7 +2092,7 @@ function declaredCanvasObjectKind(block2, properties) {
   if (block2.kind === "Chart") {
     return "chart";
   }
-  if (block2.kind === "Widget") {
+  if (isComponentBlockKind(block2.kind)) {
     return asString(properties.get("type")) ?? "widget";
   }
   if (block2.kind === "Text") {
@@ -1938,8 +2116,8 @@ function canvasObjectTypeForKind(kind) {
   if (kind === "chart") {
     return "chart";
   }
-  if (kind === "rollingNumber" || kind === "tickScale" || kind === "ruler") {
-    return "widget";
+  if (isBuiltInComponentType(kind)) {
+    return "component";
   }
   if (kind === "isometric") {
     return "isometric";
@@ -1951,7 +2129,7 @@ function classifyCanvasObject(block2, properties, symbolDefinitions) {
   const shapeReference = asString(properties.get("shape"));
   const symbol = shapeReference ? symbolDefinitions.get(shapeReference) : void 0;
   return {
-    objectType: block2.kind === "Widget" ? "widget" : canvasObjectTypeForKind(kind),
+    objectType: isComponentBlockKind(block2.kind) ? "component" : canvasObjectTypeForKind(kind),
     kind,
     shapeType: symbol ? "symbol" : shapeReference,
     symbol
@@ -2013,11 +2191,11 @@ function resolveCanvasObject(block2, origin, context, frameId, positionOverride)
       return resolveSwimlaneObject(base, properties);
     case "frame":
       return { ...base, objectType: "frame" };
-    case "widget":
+    case "component":
       return {
         ...base,
-        objectType: "widget",
-        widget: {
+        objectType: "component",
+        component: {
           type: asString(properties.get("type")) ?? "rollingNumber",
           value: asString(properties.get("value")) ?? "0",
           digits: asNumber(properties.get("digits")),
@@ -2450,18 +2628,18 @@ function collectUnsupportedGridShapes(doc) {
   return diagnostics;
 }
 
-// src/sflSemantic/diagnostics/widgets.ts
-function collectUnsupportedWidgetTypes(sflDocument) {
+// src/sflSemantic/diagnostics/components.ts
+function collectUnsupportedComponentTypes(sflDocument) {
   const diagnostics = [];
   const visit = (block2) => {
-    if (block2.kind === "Widget") {
+    if (isComponentBlockKind(block2.kind)) {
       const type = asString(directProperties(block2).get("type")) ?? "rollingNumber";
-      if (type !== "rollingNumber" && type !== "tickScale" && type !== "ruler") {
+      if (!isComponentType(type)) {
         diagnostics.push({
           severity: "warning",
-          code: "unsupported-widget-type",
+          code: "unsupported-component-type",
           ownerId: block2.name,
-          message: `Unsupported widget type '${type}'. Supported: rollingNumber, tickScale, ruler.`
+          message: `Unsupported component type '${type}'. Supported: ${componentTypes().join(", ")}.`
         });
       }
     }
@@ -2485,7 +2663,7 @@ function createCanvasResolution(doc) {
       ...collectUnsupportedChartTypes(doc),
       ...collectUnsupportedGridShapes(doc),
       ...collectEmptySeries(doc),
-      ...collectUnsupportedWidgetTypes(doc)
+      ...collectUnsupportedComponentTypes(doc)
     ],
     canvasObjectResolutionContext: createCanvasObjectPropertyReaders(definitions)
   };
@@ -4703,6 +4881,7 @@ exports.CORNER_RADIUS_ATTR = CORNER_RADIUS_ATTR;
 exports.DEFAULT_FONT = DEFAULT_FONT;
 exports.DEFAULT_HEATMAP_ZONES = DEFAULT_HEATMAP_ZONES;
 exports.DEFAULT_HEX_RADIUS = DEFAULT_HEX_RADIUS;
+exports.DEFAULT_ROLLING_NUMBER_STYLE = DEFAULT_ROLLING_NUMBER_STYLE;
 exports.DEFAULT_ZONE_FILL = DEFAULT_ZONE_FILL;
 exports.DOM_CONTRACT_VERSION = DOM_CONTRACT_VERSION;
 exports.EMPTY_BOUNDS = EMPTY_BOUNDS;
@@ -4735,6 +4914,7 @@ exports.chartText = chartText;
 exports.chartTicks = chartTicks;
 exports.clipSegmentToRect = clipSegmentToRect;
 exports.colorWithAlpha = colorWithAlpha;
+exports.componentRegistryVersion = componentRegistryVersion;
 exports.computeBoxplotStats = computeBoxplotStats;
 exports.contrastTextColor = contrastTextColor;
 exports.cornersRoundedRectPath = cornersRoundedRectPath;
@@ -4750,13 +4930,17 @@ exports.estimateTextWidth = estimateTextWidth;
 exports.finite = finite;
 exports.formatBarLabel = formatBarLabel;
 exports.formatFieldValue = formatFieldValue;
+exports.formatRollingNumber = formatRollingNumber;
 exports.freeformPathData = freeformPathData;
 exports.gapInsetAngle = gapInsetAngle;
+exports.getComponentDescriptor = getComponentDescriptor;
 exports.getLineMidpoint = getLineMidpoint;
 exports.heuristicRichMeasure = heuristicRichMeasure;
 exports.horizontalRows = horizontalRows;
 exports.interpolateHexColorStops = interpolateHexColorStops;
+exports.isBuiltInComponentType = isBuiltInComponentType;
 exports.isChartObject = isChartObject;
+exports.isGenericComponent = isGenericComponent;
 exports.isHorizontalBar = isHorizontalBar;
 exports.isIsometricObject = isIsometricObject;
 exports.isLightColor = isLightColor;
@@ -4790,11 +4974,13 @@ exports.radarRadiusForValue = radarRadiusForValue;
 exports.radarSeriesPath = radarSeriesPath;
 exports.radarValueAtPoint = radarValueAtPoint;
 exports.radarVertexPoint = radarVertexPoint;
+exports.registerComponentDescriptor = registerComponentDescriptor;
 exports.relativeOffsetOnRectangleSide = relativeOffsetOnRectangleSide;
 exports.renderPieLabels = renderPieLabels;
 exports.representativeColor = representativeColor;
 exports.resolveChartShadow = resolveChartShadow;
 exports.resolvePieRadii = resolvePieRadii;
+exports.resolveRollingNumberStyle = resolveRollingNumberStyle;
 exports.rightRoundedRectPath = rightRoundedRectPath;
 exports.rotatedBounds = rotatedBounds;
 exports.roundedBarPath = roundedBarPath;
@@ -4821,5 +5007,5 @@ exports.tokenizeSource = tokenizeSource;
 exports.topRoundedRectPath = topRoundedRectPath;
 exports.wrapText = wrapText;
 exports.zoneColorAtValue = zoneColorAtValue;
-//# sourceMappingURL=chunk-CXL254BT.cjs.map
-//# sourceMappingURL=chunk-CXL254BT.cjs.map
+//# sourceMappingURL=chunk-XY2GZUHC.cjs.map
+//# sourceMappingURL=chunk-XY2GZUHC.cjs.map