stickyflow 0.3.0 → 0.5.0

package/dist/{chunk-BYMIYXP5.js → chunk-IEHE6WVN.js}

@@ -111,6 +111,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) {
@@ -510,6 +685,7 @@ var NAMED_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
+  "Component",
   "Shape",
   "Text",
   "Isometric",
@@ -528,6 +704,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
@@ -967,14 +1144,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 };
   }
 };
 
@@ -1421,6 +1598,7 @@ var CANVAS_OBJECT_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
+  "Component",
   "Isometric"
 ];
 var canvasObjectBlockKinds = new Set(CANVAS_OBJECT_BLOCK_KINDS);
@@ -1912,7 +2090,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") {
@@ -1936,8 +2114,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";
@@ -1949,7 +2127,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
@@ -2011,11 +2189,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")),
@@ -2448,18 +2626,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(", ")}.`
         });
       }
     }
@@ -2483,7 +2661,7 @@ function createCanvasResolution(doc) {
       ...collectUnsupportedChartTypes(doc),
       ...collectUnsupportedGridShapes(doc),
       ...collectEmptySeries(doc),
-      ...collectUnsupportedWidgetTypes(doc)
+      ...collectUnsupportedComponentTypes(doc)
     ],
     canvasObjectResolutionContext: createCanvasObjectPropertyReaders(definitions)
   };
@@ -4690,6 +4868,6 @@ function localShapePath(type, x, y, width, height) {
   }
 }
 
-export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, CORNER_RADIUS_ATTR, DEFAULT_FONT, DEFAULT_HEATMAP_ZONES, DEFAULT_HEX_RADIUS, DEFAULT_ZONE_FILL, DOM_CONTRACT_VERSION, EMPTY_BOUNDS, ISOMETRIC_LABEL_OFFSET_ATTR, ISOMETRIC_SIZE_ATTR, LABEL_WIDTH, LEADER_INSET, PATH_CLOSED_ATTR, PATH_POINTS_ATTR, PATH_POINT_INDEX_ATTR, PATH_TENSION_ATTR, SQUARE_CORNER_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, VISIBLE_ISOMETRIC_FACES, angleForAxisValue, axisBands, axisLabelProp, barCategoryCount, barLabelSize, barPath, barShapePath, bottomRoundedRectPath, boxBounds, calculateLinkRoute, canonicalizeSource, categoryProp, chartText, chartTicks, clipSegmentToRect, colorWithAlpha, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, finite, formatBarLabel, formatFieldValue, freeformPathData, gapInsetAngle, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isChartObject, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelGapDash, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, personLabelArea, pieApexRadius, pieArcPoint, pieUsesInnerArc, pillCornerRadius, pillPath, pointAtNormalizedPort, pointAtPort, radarCategoryCount, radarPointAt, radarRadius, radarRadiusForValue, radarSeriesPath, radarValueAtPoint, radarVertexPoint, relativeOffsetOnRectangleSide, renderPieLabels, representativeColor, resolveChartShadow, resolvePieRadii, rightRoundedRectPath, rotatedBounds, roundedBarPath, roundedOrthogonalPathData, roundedPolygonPath, rowTop, ruleAtProp, ruleTextProp, sameHueContrastColor, sameHueTint, segmentedBarPath, seriesColorProp, seriesLabelOffsetXProp, seriesLabelOffsetYProp, seriesLabelProp, seriesValueColorProp, seriesValueProp, sflToCanvasState, stackRank, stackSequence, stackedSegment, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
-//# sourceMappingURL=chunk-BYMIYXP5.js.map
-//# sourceMappingURL=chunk-BYMIYXP5.js.map
+export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, CORNER_RADIUS_ATTR, DEFAULT_FONT, DEFAULT_HEATMAP_ZONES, DEFAULT_HEX_RADIUS, DEFAULT_ROLLING_NUMBER_STYLE, DEFAULT_ZONE_FILL, DOM_CONTRACT_VERSION, EMPTY_BOUNDS, ISOMETRIC_LABEL_OFFSET_ATTR, ISOMETRIC_SIZE_ATTR, LABEL_WIDTH, LEADER_INSET, PATH_CLOSED_ATTR, PATH_POINTS_ATTR, PATH_POINT_INDEX_ATTR, PATH_TENSION_ATTR, SQUARE_CORNER_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, VISIBLE_ISOMETRIC_FACES, angleForAxisValue, axisBands, axisLabelProp, barCategoryCount, barLabelSize, barPath, barShapePath, bottomRoundedRectPath, boxBounds, calculateLinkRoute, canonicalizeSource, categoryProp, chartText, chartTicks, clipSegmentToRect, colorWithAlpha, componentRegistryVersion, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, finite, formatBarLabel, formatFieldValue, formatRollingNumber, freeformPathData, gapInsetAngle, getComponentDescriptor, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isBuiltInComponentType, isChartObject, isGenericComponent, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelGapDash, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, personLabelArea, pieApexRadius, pieArcPoint, pieUsesInnerArc, pillCornerRadius, pillPath, pointAtNormalizedPort, pointAtPort, radarCategoryCount, radarPointAt, radarRadius, radarRadiusForValue, radarSeriesPath, radarValueAtPoint, radarVertexPoint, registerComponentDescriptor, relativeOffsetOnRectangleSide, renderPieLabels, representativeColor, resolveChartShadow, resolvePieRadii, resolveRollingNumberStyle, rightRoundedRectPath, rotatedBounds, roundedBarPath, roundedOrthogonalPathData, roundedPolygonPath, rowTop, ruleAtProp, ruleTextProp, sameHueContrastColor, sameHueTint, segmentedBarPath, seriesColorProp, seriesLabelOffsetXProp, seriesLabelOffsetYProp, seriesLabelProp, seriesValueColorProp, seriesValueProp, sflToCanvasState, stackRank, stackSequence, stackedSegment, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
+//# sourceMappingURL=chunk-IEHE6WVN.js.map
+//# sourceMappingURL=chunk-IEHE6WVN.js.map