@cardenelabs/cdl 0.60.0 → 0.62.0

package/dist/react.cjs

@@ -565,6 +565,18 @@ var en = {
   "readout.kanban.inprogress": "In Progress",
   /** `kanban-board` の列の見出し (値は `done` で読む) */
   "readout.kanban.done": "Done",
+  /** `status-timeline` の区間の字 (値は `active` で読む) */
+  "readout.statusTimeline.active": "ACTIVE",
+  /** `status-timeline` の区間の字 (値は `idle` で読む) */
+  "readout.statusTimeline.idle": "IDLE",
+  /** `status-timeline` の区間の字 (値は `error` で読む) */
+  "readout.statusTimeline.error": "ERROR",
+  /** `user-presence` の状態の字 (値は `online` で読む) */
+  "readout.presence.online": "online",
+  /** `user-presence` の状態の字 (値は `away` で読む) */
+  "readout.presence.away": "away",
+  /** `user-presence` の状態の字 (値は `offline` で読む) */
+  "readout.presence.offline": "offline",
   /** `traffic-light` の赤の灯の見出し (値は `red` で読む) */
   "readout.trafficLight.red": "red",
   /** `traffic-light` の黄の灯の見出し (値は `yellow` / `amber` で読む) */
@@ -673,6 +685,12 @@ var ja = {
   "readout.kanban.todo": "\u672A\u7740\u624B",
   "readout.kanban.inprogress": "\u9032\u884C\u4E2D",
   "readout.kanban.done": "\u5B8C\u4E86",
+  "readout.statusTimeline.active": "\u7A3C\u50CD",
+  "readout.statusTimeline.idle": "\u5F85\u6A5F",
+  "readout.statusTimeline.error": "\u7570\u5E38",
+  "readout.presence.online": "\u30AA\u30F3\u30E9\u30A4\u30F3",
+  "readout.presence.away": "\u96E2\u5E2D",
+  "readout.presence.offline": "\u30AA\u30D5\u30E9\u30A4\u30F3",
   "readout.trafficLight.red": "\u8D64",
   "readout.trafficLight.yellow": "\u9EC4",
   "readout.trafficLight.green": "\u7DD1"
@@ -3818,6 +3836,34 @@ function evaluateOne(entry, values) {
   }
 }
 
+// src/input-option.ts
+function \u9078\u629E\u80A2\u306E\u5024(option) {
+  return typeof option === "string" ? option : option.value;
+}
+function \u9078\u629E\u80A2\u306E\u540D\u524D(option) {
+  return typeof option === "string" || option.label === "" ? \u9078\u629E\u80A2\u306E\u5024(option) : option.label;
+}
+function \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(inputs) {
+  const \u8868 = /* @__PURE__ */ new Map();
+  for (const input of inputs ?? []) {
+    const \u540D\u524D = /* @__PURE__ */ new Map();
+    if (input.kind === "dropdown" || input.kind === "radio" || input.kind === "tabs" || input.kind === "multi-select") {
+      for (const option of input.options) {
+        if (typeof option !== "string" && option.label !== "") \u540D\u524D.set(option.value, option.label);
+      }
+    } else if (input.kind === "toggle") {
+      if (input.onLabel) \u540D\u524D.set("true", input.onLabel);
+      if (input.offLabel) \u540D\u524D.set("false", input.offLabel);
+    }
+    if (\u540D\u524D.size > 0) \u8868.set(input.id, { \u540D\u524D, \u8907\u6570: input.kind === "multi-select" });
+  }
+  return \u8868;
+}
+function \u5024\u3092\u540D\u524D\u3067\u8AAD\u3080(\u5165\u529B\u6B04, \u5024) {
+  if (!\u5165\u529B\u6B04.\u8907\u6570) return \u5165\u529B\u6B04.\u540D\u524D.get(\u5024) ?? \u5024;
+  return \u5024.split(",").map((v) => \u5165\u529B\u6B04.\u540D\u524D.get(v) ?? v).join(",");
+}
+
 // src/render/utils.ts
 var TEMPLATE_REF_RE = new RegExp(TEMPLATE_REF_SRC, "g");
 var TEMPLATE_LEFTOVER_TEST_RE = new RegExp(TEMPLATE_LEFTOVER_SRC);
@@ -3866,11 +3912,14 @@ function mergeStateValues(base, overrides) {
   }
   return merged;
 }
-function interpolate(template, values) {
+function interpolate(template, values, \u540D\u524D\u306E\u8868) {
   return template.replace(TEMPLATE_REF_RE, (_, id, accessor) => {
     const raw = Object.hasOwn(values, id) ? values[id] : void 0;
     if (raw === void 0) return `{${id}${accessor ?? ""}}`;
-    if (!accessor) return raw;
+    if (!accessor) {
+      const \u5165\u529B\u6B04 = \u540D\u524D\u306E\u8868?.get(id);
+      return \u5165\u529B\u6B04 ? \u5024\u3092\u540D\u524D\u3067\u8AAD\u3080(\u5165\u529B\u6B04, raw) : raw;
+    }
     const arr = parseArraySignal(raw);
     if (!arr) return `{${id}${accessor}}`;
     if (accessor === ".length") return String(arr.length);
@@ -12055,7 +12104,8 @@ function GenericNode({
   node,
   active,
   value,
-  stateValues
+  stateValues,
+  \u5024\u306E\u540D\u524D
 }) {
   const base = STYLES[node.kind] ?? FALLBACK;
   const toned = toneColor3(node.tone);
@@ -12141,7 +12191,7 @@ function GenericNode({
       style.look === "ledger" && /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 1, y1: h - 7, x2: w - 1, y2: h - 7, stroke: paint.stroke, strokeWidth: 1 })
     ] });
   })();
-  const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
+  const resolvedValue = value !== void 0 ? interpolate(value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
   const hasRows = (node.rows?.length ?? 0) > 0;
   const centered = genericTextCentered(node.kind, hasRows);
   const textAnchor = centered ? "middle" : "start";
@@ -12191,7 +12241,7 @@ function GenericNode({
           }
         ),
         node.rows && node.rows.length > 0 && (() => {
-          const resolved = node.rows.map((row) => interpolate(row, stateValues));
+          const resolved = node.rows.map((row) => interpolate(row, stateValues, \u5024\u306E\u540D\u524D));
           const splits = resolved.map(splitRow);
           const leftMaxWidth = splits.reduce(
             (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
@@ -18856,10 +18906,11 @@ function CdlNodeView({
   currentPhaseId,
   chartLineScale,
   \u95A2\u4FC2\u306E\u53D7\u3051\u53E3,
-  lang
+  lang,
+  \u5024\u306E\u540D\u524D
 }) {
-  const value = node.value ? interpolate(node.value, stateValues) : void 0;
-  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
+  const value = node.value ? interpolate(node.value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
+  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, \u5024\u306E\u540D\u524D));
   const boundW = node.wBind ? resolveNumericAttr(node.wBind, stateValues, node.w) : node.w;
   const boundH = node.hBind ? resolveNumericAttr(node.hBind, stateValues, node.h) : node.h;
   const boundOpacity = node.opacity !== void 0 ? Math.min(1, Math.max(0, resolveNumericAttr(node.opacity, stateValues, 1))) : void 0;
@@ -18873,9 +18924,9 @@ function CdlNodeView({
   }
   const resolvedNode = {
     ...node,
-    title: interpolate(node.title, stateValues),
-    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues) : node.subtitle,
-    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues) : node.eyebrow,
+    title: interpolate(node.title, stateValues, \u5024\u306E\u540D\u524D),
+    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues, \u5024\u306E\u540D\u524D) : node.subtitle,
+    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues, \u5024\u306E\u540D\u524D) : node.eyebrow,
     w: boundW,
     h: boundH
   };
@@ -19156,7 +19207,7 @@ function CdlNodeView({
       case "mark-end":
         return /* @__PURE__ */ jsxRuntime.jsx(MarkEndNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
     }
   })();
   const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
@@ -19238,7 +19289,8 @@ function CdlStage({
   stateValues,
   debug,
   compact = false,
-  svgRef
+  svgRef,
+  \u5024\u306E\u540D\u524D
 }) {
   const [\u7126\u70B9, set\u7126\u70B9] = react.useState(null);
   const \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B = (laid.relationFocus ?? RELATION_FOCUS_DEFAULT) === "hover";
@@ -19518,6 +19570,7 @@ function CdlStage({
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
                 stateValues,
+                \u5024\u306E\u540D\u524D,
                 currentPhaseId: currentPhase?.id,
                 chartLineScale: chartLineScales.get(node.id)
               }
@@ -20686,7 +20739,7 @@ function InputWidget({
             },
             "data-cdl-input": input.id,
             className: "cdl-ip-dropdown-select",
-            children: input.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+            children: input.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: \u9078\u629E\u80A2\u306E\u5024(opt), children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt) }, \u9078\u629E\u80A2\u306E\u5024(opt)))
           }
         )
       ] });
@@ -20703,17 +20756,17 @@ function InputWidget({
             {
               type: "radio",
               name: input.id,
-              value: opt,
-              checked: value === opt,
+              value: \u9078\u629E\u80A2\u306E\u5024(opt),
+              checked: value === \u9078\u629E\u80A2\u306E\u5024(opt),
               onChange: () => {
-                signal2.value = opt;
+                signal2.value = \u9078\u629E\u80A2\u306E\u5024(opt);
               },
               "data-cdl-input": input.id,
               className: "cdl-ip-radio-input"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-radio-label", children: opt })
-        ] }, opt)) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-radio-label", children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt) })
+        ] }, \u9078\u629E\u80A2\u306E\u5024(opt))) })
       ] });
     case "color":
       return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdl-ip-item cdl-ip-color", "data-cdl-input-kind": "color", children: [
@@ -20763,14 +20816,14 @@ function InputWidget({
           {
             type: "button",
             role: "tab",
-            className: `cdl-ip-tabs-btn ${value === opt ? "cdl-ip-tabs-active" : ""}`,
+            className: `cdl-ip-tabs-btn ${value === \u9078\u629E\u80A2\u306E\u5024(opt) ? "cdl-ip-tabs-active" : ""}`,
             onClick: () => {
-              signal2.value = opt;
+              signal2.value = \u9078\u629E\u80A2\u306E\u5024(opt);
             },
             "data-cdl-input": input.id,
-            children: opt
+            children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt)
           },
-          opt
+          \u9078\u629E\u80A2\u306E\u5024(opt)
         )) })
       ] });
     case "datetime":
@@ -22825,13 +22878,13 @@ function MultiSelectWidget({
       "button",
       {
         type: "button",
-        className: `cdl-ip-multi-select-chip ${selected.has(opt) ? "cdl-ip-multi-select-active" : ""}`,
-        onClick: () => toggle(opt),
+        className: `cdl-ip-multi-select-chip ${selected.has(\u9078\u629E\u80A2\u306E\u5024(opt)) ? "cdl-ip-multi-select-active" : ""}`,
+        onClick: () => toggle(\u9078\u629E\u80A2\u306E\u5024(opt)),
         "data-cdl-input": input.id,
-        "data-cdl-multi-value": opt,
-        children: opt
+        "data-cdl-multi-value": \u9078\u629E\u80A2\u306E\u5024(opt),
+        children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt)
       },
-      opt
+      \u9078\u629E\u80A2\u306E\u5024(opt)
     )) })
   ] });
 }
@@ -26387,12 +26440,14 @@ function StatusTimelineReadout({
     } catch {
     }
   }
+  const \u5F15\u304F = use\u5B57\u5F15();
   const colorLookup = new Map(colorMap.map((c) => [c.status.toLowerCase(), c.color]));
   const shown = events.slice(0, max);
   const stripHeight = 28;
   const width = 320;
   const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
   const height = stripHeight + 40;
+  const \u533A\u9593\u306E\u5B57 = (status) => status === "active" || status === "idle" || status === "error" ? \u5F15\u304F(`readout.statusTimeline.${status}`) : status.toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -26405,9 +26460,11 @@ function StatusTimelineReadout({
         children: shown.map((ev, i) => {
           const x = 10 + i * cellW;
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
-          return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-status-event": i, children: [
+          const \u5B572 = \u533A\u9593\u306E\u5B57(ev.status);
+          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "text",
               {
                 x: x + cellW / 2,
@@ -26417,7 +26474,10 @@ function StatusTimelineReadout({
                 fill: "#ffffff",
                 fontWeight: 600,
                 style: { userSelect: "none" },
-                children: ev.status.length > 5 ? ev.status.slice(0, 4).toUpperCase() : ev.status.toUpperCase()
+                children: [
+                  \u63CF\u304F\u5B57 !== \u5B572 ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: \u5B572 }) : null,
+                  \u63CF\u304F\u5B57
+                ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -26735,6 +26795,8 @@ function UserPresenceReadout({
   const width = 260;
   const height = shown.length * rowH + (overflow > 0 ? 20 : 0) + 8;
   const statusColor = (s) => s === "online" ? "#22c55e" : s === "away" ? "#eab308" : "#94a3b8";
+  const \u5F15\u304F = use\u5B57\u5F15();
+  const \u72B6\u614B\u306E\u5B57 = (s) => s === "online" || s === "away" || s === "offline" ? \u5F15\u304F(`readout.presence.${s}`) : s;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-readout-user-presence", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -26747,7 +26809,7 @@ function UserPresenceReadout({
         children: [
           shown.map((u, i) => {
             const y = 4 + i * rowH;
-            return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-presence-user": i, children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-presence-user": i, "data-cdl-presence-status": u.status, children: [
               /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: y + rowH / 2, r: 6, fill: statusColor(u.status) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "text",
@@ -26770,7 +26832,7 @@ function UserPresenceReadout({
                   textAnchor: "end",
                   fill: "#64748b",
                   style: { userSelect: "none" },
-                  children: u.status
+                  children: \u72B6\u614B\u306E\u5B57(u.status)
                 }
               )
             ] }, i);
@@ -28363,6 +28425,7 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
     if (!isInteractive) return baseStateValues;
     return mergeStateValues(baseStateValues, interactive.stateOverrides);
   }, [isInteractive, baseStateValues, interactive.stateOverrides]);
+  const \u5024\u306E\u540D\u524D = react.useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram.inputs), [diagram.inputs]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -28391,7 +28454,7 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
           }
         ),
         isInteractive && interactive.panel,
-        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, \u5024\u306E\u540D\u524D, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
         hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-[var(--cdl-divider,#d4d4d8)]/40 bg-[var(--cdl-stage-bg,#f1f5f9)]/50 px-3 py-2 text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             laid.phases.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(