@timeax/service-builder 0.1.1 → 0.1.3

package/dist/index.js

@@ -10084,6 +10084,7 @@ var Panel = React27.forwardRef(function Panel2({
     width: size.width != null ? `${size.width}px` : void 0,
     height: size.height != null ? `${size.height}px` : void 0
   };
+  const panelWidth = size.width != null ? `${size.width}px` : panelRef.current ? `${Math.round(panelRef.current.getBoundingClientRect().width)}px` : void 0;
   const offsetStyle = maintainPosition ? {
     ...offsets.left != null ? { left: `${offsets.left}px` } : null,
     ...offsets.top != null ? { top: `${offsets.top}px` } : null,
@@ -10102,6 +10103,8 @@ var Panel = React27.forwardRef(function Panel2({
         ...sizeStyle,
         ...offsetStyle,
         ...edgeStrokeStyle,
+        // expose custom property for children
+        ["--panel-width"]: panelWidth,
         touchAction: resizable ? "none" : void 0,
         cursor: resizable ? cursor : void 0
       },
@@ -11286,7 +11289,7 @@ function IncludesList({ className, children }) {
 function IncludesItem({ title, badge, actions, className }) {
   return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center justify-between rounded-md p-2", "bg-gray-50 dark:bg-gray-800/50", className), children: [
     /* @__PURE__ */ jsxs33("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx50("span", { className: "truncate text-sm text-gray-800 dark:text-gray-200", children: title }),
+      /* @__PURE__ */ jsx50("span", { title, className: "max-w-[calc(var(--panel-width)-11rem)] truncate text-sm text-gray-800 dark:text-gray-200", children: title }),
       badge
     ] }),
     !!actions?.length && /* @__PURE__ */ jsx50("div", { className: "flex items-center gap-2", children: actions.map((a, idx) => /* @__PURE__ */ jsx50(IncludesIconAction, { ...a }, idx)) })
@@ -15725,14 +15728,7 @@ import { FiEdit2, FiFilter as FiFilter2, FiFolderPlus, FiPlus as FiPlus2, FiTras
 
 // src/workspace/bottom-panel/service-detail-card.tsx
 import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
-function ServiceDetailCard({
-  mode,
-  row,
-  snapshot,
-  onNodeClick,
-  onOpenFallbackQuickAdd,
-  onOpenFallbackEditor
-}) {
+function ServiceDetailCard({ mode, row, snapshot, onNodeClick, onOpenFallbackQuickAdd, onOpenFallbackEditor }) {
   const summary = row.summary;
   const service = row.service;
   return /* @__PURE__ */ jsxs56("div", { className: "space-y-5", children: [
@@ -15741,13 +15737,12 @@ function ServiceDetailCard({
         /* @__PURE__ */ jsxs56("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx78(StatusDot, { tone: row.statusTone, className: "mt-0.5" }),
-            /* @__PURE__ */ jsx78("h5", { className: "truncate text-lg font-semibold text-slate-900 dark:text-slate-100", children: summary.name })
-          ] }),
-          /* @__PURE__ */ jsxs56("div", { className: "mt-2 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
             /* @__PURE__ */ jsxs56("span", { children: [
               "#",
               summary.id
-            ] }),
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs56("div", { className: "mt-2 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400", children: [
             summary.category ? /* @__PURE__ */ jsx78("span", { children: summary.category }) : null,
             summary.platformId ? /* @__PURE__ */ jsx78("span", { children: summary.platformId }) : null
           ] })
@@ -15792,8 +15787,20 @@ function ServiceDetailCard({
       ),
       /* @__PURE__ */ jsxs56("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: [
         /* @__PURE__ */ jsxs56("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsx78(FilterChip, { label: row.check?.fitsConstraints ? "Constraints fit" : "Constraint mismatch", tone: row.check?.fitsConstraints ? "success" : "danger" }),
-          /* @__PURE__ */ jsx78(FilterChip, { label: row.check?.passesRate ? "Rate ok" : "Rate blocked", tone: row.check?.passesRate ? "success" : "warning" }),
+          /* @__PURE__ */ jsx78(
+            FilterChip,
+            {
+              label: row.check?.fitsConstraints ? "Constraints fit" : "Constraint mismatch",
+              tone: row.check?.fitsConstraints ? "success" : "danger"
+            }
+          ),
+          /* @__PURE__ */ jsx78(
+            FilterChip,
+            {
+              label: row.check?.passesRate ? "Rate ok" : "Rate blocked",
+              tone: row.check?.passesRate ? "success" : "warning"
+            }
+          ),
           /* @__PURE__ */ jsx78(
             FilterChip,
             {
@@ -15802,18 +15809,45 @@ function ServiceDetailCard({
             }
           )
         ] }),
-        row.reasonLabels.length ? /* @__PURE__ */ jsx78("div", { className: "mt-3 flex flex-wrap gap-2", children: row.reasonLabels.map((reason) => /* @__PURE__ */ jsx78("span", { className: "rounded-full bg-amber-50 px-2.5 py-1 text-xs text-amber-700 dark:bg-amber-500/10 dark:text-amber-200", children: reason }, `${row.id}:${reason}`)) }) : /* @__PURE__ */ jsx78("p", { className: "mt-3 text-sm text-slate-500 dark:text-slate-400", children: "This service is a clean fit for the current visible-group and selected-trigger context." })
+        row.reasonLabels.length ? /* @__PURE__ */ jsx78("div", { className: "mt-3 flex flex-wrap gap-2", children: row.reasonLabels.map((reason) => /* @__PURE__ */ jsx78(
+          "span",
+          {
+            className: "rounded-full bg-amber-50 px-2.5 py-1 text-xs text-amber-700 dark:bg-amber-500/10 dark:text-amber-200",
+            children: reason
+          },
+          `${row.id}:${reason}`
+        )) }) : /* @__PURE__ */ jsx78("p", { className: "mt-3 text-sm text-slate-500 dark:text-slate-400", children: "This service is a clean fit for the current visible-group and selected-trigger context." })
       ] })
     ] }) : null,
     /* @__PURE__ */ jsxs56("section", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx78(SectionTitle2, { title: "Capabilities", description: "Flags and pricing hints attached to this service." }),
       /* @__PURE__ */ jsx78("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: summary.flags.length || service?.meta ? /* @__PURE__ */ jsxs56("div", { className: "flex flex-wrap gap-2", children: [
-        summary.flags.map((flag) => /* @__PURE__ */ jsx78("span", { className: "rounded-full bg-emerald-50 px-2.5 py-1 text-xs text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200", children: flag }, flag)),
-        Object.keys(service?.meta ?? {}).slice(0, 3).map((key) => /* @__PURE__ */ jsx78("span", { className: "rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-900 dark:text-slate-300", children: key }, key))
+        summary.flags.map((flag) => /* @__PURE__ */ jsx78(
+          "span",
+          {
+            className: "rounded-full bg-emerald-50 px-2.5 py-1 text-xs text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200",
+            children: flag
+          },
+          flag
+        )),
+        Object.keys(service?.meta ?? {}).slice(0, 3).map((key) => /* @__PURE__ */ jsx78(
+          "span",
+          {
+            className: "rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-600 dark:bg-slate-900 dark:text-slate-300",
+            children: key
+          },
+          key
+        ))
       ] }) : /* @__PURE__ */ jsx78("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "No capability flags were published for this service." }) })
     ] }),
     /* @__PURE__ */ jsxs56("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx78(SectionTitle2, { title: "Bindings", description: "Nodes currently connected to this service. Click any node to jump back into the canvas." }),
+      /* @__PURE__ */ jsx78(
+        SectionTitle2,
+        {
+          title: "Bindings",
+          description: "Nodes currently connected to this service. Click any node to jump back into the canvas."
+        }
+      ),
       /* @__PURE__ */ jsx78("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-950/80", children: summary.attachedNodeIds.length ? /* @__PURE__ */ jsx78("div", { className: "flex flex-wrap gap-2", children: summary.attachedNodeIds.map((nodeId, index) => /* @__PURE__ */ jsx78(
         "button",
         {
@@ -15835,7 +15869,7 @@ function SectionTitle2({ title, description }) {
 }
 function DetailMetric({ label, value }) {
   return /* @__PURE__ */ jsxs56("div", { className: "rounded-2xl bg-white px-4 py-3 dark:bg-slate-950", children: [
-    /* @__PURE__ */ jsx78("p", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400 dark:text-slate-500", children: label }),
+    /* @__PURE__ */ jsx78("p", { className: "text-[11px] font-semibold tracking-[0.16em] text-slate-400 uppercase dark:text-slate-500", children: label }),
     /* @__PURE__ */ jsx78("p", { className: "mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100", children: value })
   ] });
 }
@@ -17453,7 +17487,7 @@ var policiesByBranch = {
 var services = {
   1001: {
     id: 1001,
-    name: "Instagram Followers \u2022 Fast",
+    name: "Instagram Followers this shidshjs dcsh sojf dso sodhs jhdv sdh vshfdv sohfdv sohfs fhso fhsof sihfi \u2022 Fast",
     rate: 1.25,
     min: 50,
     max: 5e4,