stickyflow 0.6.0 → 0.8.0

package/dist/{chunk-4G2R7PEL.js → chunk-GLZVHUSW.js}

@@ -319,6 +319,18 @@ function symbolToPath(points, frame) {
   });
 }
 
+// src/model/component/categories.ts
+var COMPONENT_CATEGORIES = [
+  { id: "action", label: "Actions" },
+  { id: "selection", label: "Selection" },
+  { id: "value", label: "Value input" },
+  { id: "text", label: "Text input" },
+  { id: "indicator", label: "Indicators" },
+  { id: "instrument", label: "Instruments" },
+  { id: "navigation", label: "Navigation" },
+  { id: "container", label: "Containers" }
+];
+
 // src/model/component/supportedTypes.ts
 var BUILT_IN_COMPONENT_TYPES = ["rollingNumber", "tickScale", "ruler"];
 function isBuiltInComponentType(value) {
@@ -335,6 +347,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "rollingNumber",
     group: "readout",
+    category: "indicator",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -344,6 +357,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "tickScale",
     group: "readout",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -353,6 +367,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "ruler",
     group: "input",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "scale",
@@ -362,11 +377,13 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "switch",
     group: "input",
+    category: "selection",
     value: { type: "boolean", writable: true, default: false },
     properties: {
       accent: { type: "color", default: "#5a6bff" },
       track: { type: "color", default: "#cbd5e1" },
-      thumb: { type: "color", default: "#ffffff" }
+      thumb: { type: "color", default: "#ffffff" },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -376,13 +393,15 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "checkbox",
     group: "input",
+    category: "selection",
     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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -392,13 +411,15 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "toggleButton",
     group: "input",
+    category: "action",
     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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -408,16 +429,153 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "button",
     group: "action",
+    category: "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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "press",
     pointerScale: false,
     size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
     role: "button"
+  },
+  {
+    type: "slider",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 40 },
+    properties: {
+      variant: { type: "enum", default: "line", options: ["line", "field"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      ticks: { type: "number", default: 0, min: 0, max: 200 },
+      tickColor: { type: "color", default: "#94a3b8" },
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      surface: { type: "color", default: "#eef1f6" },
+      fill: { type: "color", default: "#cbd5e1" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      radius: { type: "number", default: 10, min: 0, max: 200 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" },
+      trackHeight: { type: "number", default: 6, min: 1, max: 80 },
+      thumbSize: { type: "number", default: 56, min: 20, max: 100, step: 5 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "slide",
+    pointerScale: false,
+    size: { width: 220, height: 28, minWidth: 60, minHeight: 12 },
+    role: "slider"
+  },
+  {
+    type: "range",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 25 },
+    properties: {
+      variant: { type: "enum", default: "line", options: ["line", "field"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      ticks: { type: "number", default: 0, min: 0, max: 200 },
+      tickColor: { type: "color", default: "#94a3b8" },
+      valueEnd: { type: "number", default: 75 },
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      surface: { type: "color", default: "#eef1f6" },
+      fill: { type: "color", default: "#cbd5e1" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      radius: { type: "number", default: 10, min: 0, max: 200 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" },
+      trackHeight: { type: "number", default: 6, min: 1, max: 80 },
+      thumbSize: { type: "number", default: 56, min: 20, max: 100, step: 5 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "range",
+    pointerScale: false,
+    size: { width: 220, height: 28, minWidth: 60, minHeight: 12 },
+    role: "slider"
+  },
+  {
+    type: "progress",
+    group: "readout",
+    category: "indicator",
+    value: { type: "number", writable: false, default: 60 },
+    properties: {
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      variant: { type: "enum", default: "bar", options: ["bar", "ring"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#e2e8f0" },
+      thickness: { type: "number", default: 10, min: 1, max: 80 },
+      rounded: { type: "boolean", default: true },
+      display: { type: "enum", default: "none", options: ["none", "percent", "value"] },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 300, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "none",
+    pointerScale: false,
+    size: { width: 220, height: 12, minWidth: 20, minHeight: 4 },
+    role: "progressbar"
+  },
+  {
+    type: "segmented",
+    group: "input",
+    category: "selection",
+    value: { type: "number", writable: true, default: 0 },
+    properties: {
+      options: { type: "string", default: "Day,Week,Month" },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#e2e8f0" },
+      textColor: { type: "color", default: "#475569" },
+      activeTextColor: { type: "color", default: "#ffffff" },
+      radius: { type: "number", default: 200, min: 0, max: 200 },
+      inset: { type: "number", default: 3, min: 0, max: 20 },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 200, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "pick",
+    pointerScale: false,
+    size: { width: 300, height: 40, minWidth: 80, minHeight: 20 },
+    role: "radiogroup"
+  },
+  {
+    type: "knob",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 40 },
+    properties: {
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      start: { type: "number", default: 225, min: 0, max: 360 },
+      sweep: { type: "number", default: 270, min: 30, max: 360 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      face: { type: "color", default: "#f1f5f9" },
+      dot: { type: "color", default: "#0f172a" },
+      thickness: { type: "number", default: 8, min: 1, max: 80 },
+      rounded: { type: "boolean", default: true },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 16, min: 6, max: 200 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "turn",
+    pointerScale: false,
+    size: { width: 96, height: 96, minWidth: 40, minHeight: 40, aspect: 1 },
+    role: "slider"
   }
 ];
 
@@ -2602,12 +2760,13 @@ function resolveCanvasTree(model, resolution) {
 function readShaderDefinition(block2) {
   const properties = directProperties(block2);
   const program = asString(properties.get("program"));
+  const surfacePadding = asNumber(properties.get("surfacePadding"));
   if (!program) {
     return void 0;
   }
   const parameters = {};
   for (const [key, value] of properties) {
-    if (key === "program") {
+    if (key === "program" || key === "surfacePadding") {
       continue;
     }
     const number = asNumber(value);
@@ -2618,7 +2777,12 @@ function readShaderDefinition(block2) {
       parameters[key] = text === "true" ? true : text === "false" ? false : text;
     }
   }
-  return { name: block2.name, program, parameters };
+  return {
+    name: block2.name,
+    program,
+    ...surfacePadding === void 0 ? {} : { surfacePadding: Math.max(0, surfacePadding) },
+    parameters
+  };
 }
 
 // src/sflSemantic/definitions/symbols.ts
@@ -2998,9 +3162,9 @@ var DOM_CONTRACT_VERSION = 1;
 // src/model/geometry/ports/rectangleCoordinates.ts
 var DEGREES_TO_RADIANS = Math.PI / 180;
 function rotatePoint(point, degrees) {
-  const radians = degrees * DEGREES_TO_RADIANS;
-  const cosine = Math.cos(radians);
-  const sine = Math.sin(radians);
+  const radians2 = degrees * DEGREES_TO_RADIANS;
+  const cosine = Math.cos(radians2);
+  const sine = Math.sin(radians2);
   return { x: point.x * cosine - point.y * sine, y: point.x * sine + point.y * cosine };
 }
 function rectangleCenter(rectangle) {
@@ -4471,6 +4635,50 @@ function rowTop(rows, plot, index) {
   return plot.y + index * rows.slotHeight + rows.groupGap / 2 + rows.offset;
 }
 
+// src/renderScene/charts/primitives/labelTilt.ts
+function labelTilt(chart) {
+  return Math.min(90, Math.max(0, finite(chart.axisLabelAngle, 0)));
+}
+var radians = (degrees) => degrees * Math.PI / 180;
+function labelFontSize(chart) {
+  return Math.max(9, finite(chart.axisFontSize ?? chart.fontSize, 12));
+}
+function tiltedLabelRoom(chart, labels, tilt) {
+  const fontSize = labelFontSize(chart);
+  const widest = Math.max(0, ...labels.map((label) => estimateTextWidth(label, fontSize, false)));
+  return Math.ceil(widest * Math.sin(radians(tilt)) + (fontSize + 2) * Math.cos(radians(tilt)));
+}
+function labelAboveFrame(chart, label, tilt, anchor) {
+  const fontSize = labelFontSize(chart);
+  const height = fontSize + 2;
+  const width = Math.ceil(estimateTextWidth(label, fontSize, false)) + 4;
+  const angle = radians(tilt);
+  return {
+    frame: {
+      x: anchor.x - height / 2 * Math.sin(angle),
+      y: anchor.y - height / 2 * Math.cos(angle),
+      width,
+      height
+    },
+    rotation: -tilt
+  };
+}
+function labelBelowFrame(chart, label, tilt, anchor) {
+  const fontSize = labelFontSize(chart);
+  const height = fontSize + 2;
+  const width = Math.ceil(estimateTextWidth(label, fontSize, false)) + 4;
+  const angle = radians(tilt);
+  return {
+    frame: {
+      x: anchor.x - (width * Math.cos(angle) + height / 2 * Math.sin(angle)),
+      y: anchor.y + width * Math.sin(angle) - height / 2 * Math.cos(angle),
+      width,
+      height
+    },
+    rotation: -tilt
+  };
+}
+
 // src/renderScene/charts/primitives/segments.ts
 function segmentedBarPath(frame, orientation, count, gap, radius, fraction, snap) {
   const horizontal = orientation === "horizontal";
@@ -5142,6 +5350,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_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, cleanFootprint, clipSegmentToRect, colorWithAlpha, componentRegistryVersion, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, extrudeFootprint, finite, flattenPath, formatBarLabel, formatFieldValue, formatRollingNumber, freeformPathData, gapInsetAngle, getComponentDescriptor, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isBuiltInComponentType, isChartObject, isDimensionObject, isGenericComponent, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelGapDash, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, pathBounds, pathToSymbol, 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, shadeFill, stackRank, stackSequence, stackedSegment, symbolToPath, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
-//# sourceMappingURL=chunk-4G2R7PEL.js.map
-//# sourceMappingURL=chunk-4G2R7PEL.js.map
+export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, COMPONENT_CATEGORIES, 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, cleanFootprint, clipSegmentToRect, colorWithAlpha, componentRegistryVersion, componentTypes, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, extrudeFootprint, finite, flattenPath, formatBarLabel, formatFieldValue, formatRollingNumber, freeformPathData, gapInsetAngle, getComponentDescriptor, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isBuiltInComponentType, isChartObject, isDimensionObject, isGenericComponent, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelAboveFrame, labelBelowFrame, labelGapDash, labelTilt, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, pathBounds, pathToSymbol, 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, shadeFill, stackRank, stackSequence, stackedSegment, symbolToPath, tag, tiltedLabelRoom, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
+//# sourceMappingURL=chunk-GLZVHUSW.js.map
+//# sourceMappingURL=chunk-GLZVHUSW.js.map