stickyflow 0.6.0 → 0.8.0

package/dist/{chunk-XJ4W6TW4.cjs → chunk-LNW5VIEA.cjs}

@@ -321,6 +321,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) {
@@ -337,6 +349,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "rollingNumber",
     group: "readout",
+    category: "indicator",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -346,6 +359,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "tickScale",
     group: "readout",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -355,6 +369,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "ruler",
     group: "input",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "scale",
@@ -364,11 +379,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,
@@ -378,13 +395,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,
@@ -394,13 +413,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,
@@ -410,16 +431,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"
   }
 ];
 
@@ -2604,12 +2762,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);
@@ -2620,7 +2779,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
@@ -3000,9 +3164,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) {
@@ -4473,6 +4637,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";
@@ -5151,6 +5359,7 @@ exports.CATEGORY_LABEL_ROW = CATEGORY_LABEL_ROW;
 exports.CHART_COLORS = CHART_COLORS;
 exports.CHART_TITLE_PROP = CHART_TITLE_PROP;
 exports.CHART_TYPES = CHART_TYPES;
+exports.COMPONENT_CATEGORIES = COMPONENT_CATEGORIES;
 exports.CORNER_RADIUS_ATTR = CORNER_RADIUS_ATTR;
 exports.DEFAULT_FONT = DEFAULT_FONT;
 exports.DEFAULT_HEATMAP_ZONES = DEFAULT_HEATMAP_ZONES;
@@ -5190,6 +5399,7 @@ exports.cleanFootprint = cleanFootprint;
 exports.clipSegmentToRect = clipSegmentToRect;
 exports.colorWithAlpha = colorWithAlpha;
 exports.componentRegistryVersion = componentRegistryVersion;
+exports.componentTypes = componentTypes;
 exports.computeBoxplotStats = computeBoxplotStats;
 exports.contrastTextColor = contrastTextColor;
 exports.cornersRoundedRectPath = cornersRoundedRectPath;
@@ -5228,7 +5438,10 @@ exports.isometricBounds = isometricBounds;
 exports.isometricFaceCenter = isometricFaceCenter;
 exports.isometricFaces = isometricFaces;
 exports.isometricTopFaceCenter = isometricTopFaceCenter;
+exports.labelAboveFrame = labelAboveFrame;
+exports.labelBelowFrame = labelBelowFrame;
 exports.labelGapDash = labelGapDash;
+exports.labelTilt = labelTilt;
 exports.leftRoundedRectPath = leftRoundedRectPath;
 exports.linePathData = linePathData;
 exports.localShapePath = localShapePath;
@@ -5285,9 +5498,10 @@ exports.stackSequence = stackSequence;
 exports.stackedSegment = stackedSegment;
 exports.symbolToPath = symbolToPath;
 exports.tag = tag;
+exports.tiltedLabelRoom = tiltedLabelRoom;
 exports.tokenizeSource = tokenizeSource;
 exports.topRoundedRectPath = topRoundedRectPath;
 exports.wrapText = wrapText;
 exports.zoneColorAtValue = zoneColorAtValue;
-//# sourceMappingURL=chunk-XJ4W6TW4.cjs.map
-//# sourceMappingURL=chunk-XJ4W6TW4.cjs.map
+//# sourceMappingURL=chunk-LNW5VIEA.cjs.map
+//# sourceMappingURL=chunk-LNW5VIEA.cjs.map