@synopackageland/ui 0.9.7 → 0.9.9

package/dist/json-preview/preview.js

@@ -60,13 +60,13 @@ function Zh(e) {
     }
   }), t;
 }
-function ge(e) {
+function ve(e) {
   let t = "";
   if (Le(e))
     t = e;
   else if (fe(e))
     for (let n = 0; n < e.length; n++) {
-      const r = ge(e[n]);
+      const r = ve(e[n]);
       r && (t += r + " ");
     }
   else if (Ie(e))
@@ -77,7 +77,7 @@ function ge(e) {
 function Ui(e) {
   if (!e) return null;
   let { class: t, style: n } = e;
-  return t && !Le(t) && (e.class = ge(t)), n && (e.style = Me(n)), e;
+  return t && !Le(t) && (e.class = ve(t)), n && (e.style = Me(n)), e;
 }
 const Wh = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly", Kh = /* @__PURE__ */ Ka(Wh);
 function od(e) {
@@ -1548,7 +1548,7 @@ const zn = /* @__PURE__ */ new WeakMap(), Md = /* @__PURE__ */ Symbol("_vte"), Q
         return;
       }
       t.targetStart = e.targetStart;
-      const T = t.target = e.target, j = t.targetAnchor = e.targetAnchor, ee = ur(e.props), we = ee ? n : T, ve = ee ? k : j;
+      const T = t.target = e.target, j = t.targetAnchor = e.targetAnchor, ee = ur(e.props), we = ee ? n : T, ge = ee ? k : j;
       if (s === "svg" || Yl(T) ? s = "svg" : (s === "mathml" || Xl(T)) && (s = "mathml"), x ? (f(
         e.dynamicChildren,
         x,
@@ -1561,7 +1561,7 @@ const zn = /* @__PURE__ */ new WeakMap(), Md = /* @__PURE__ */ Symbol("_vte"), Q
         e,
         t,
         we,
-        ve,
+        ge,
         o,
         i,
         s,
@@ -2141,7 +2141,7 @@ function Km(e) {
     inheritAttrs: ee,
     // assets
     components: we,
-    directives: ve,
+    directives: ge,
     filters: de
   } = t;
   if (c && Hm(c, r, null), s)
@@ -2190,7 +2190,7 @@ function Km(e) {
         });
       });
     } else e.exposed || (e.exposed = {});
-  $ && e.render === sn && (e.render = $), ee != null && (e.inheritAttrs = ee), we && (e.components = we), ve && (e.directives = ve), T && Vd(e);
+  $ && e.render === sn && (e.render = $), ee != null && (e.inheritAttrs = ee), we && (e.components = we), ge && (e.directives = ge), T && Vd(e);
 }
 function Hm(e, t, n = sn) {
   fe(e) && (e = fa(e));
@@ -2856,7 +2856,7 @@ function hv(e, t) {
           G,
           H,
           K
-        ) : X & 6 ? ve(
+        ) : X & 6 ? ge(
           b,
           C,
           I,
@@ -3137,7 +3137,7 @@ function hv(e, t) {
       H,
       K
     );
-  }, ve = (b, C, I, U, M, L, G, H, K) => {
+  }, ge = (b, C, I, U, M, L, G, H, K) => {
     C.slotScopeIds = H, b == null ? C.shapeFlag & 512 ? M.ctx.activate(
       C,
       I,
@@ -3784,7 +3784,7 @@ function yv(e, t = null, n = null, r = 0, o = null, i = !1) {
   if ($v(e) && (e = e.__vccOpts), t) {
     t = Mo(t);
     let { class: a, style: l } = t;
-    a && !Le(a) && (t.class = ge(a)), Ie(l) && (/* @__PURE__ */ Gi(l) && !fe(l) && (l = nt({}, l)), t.style = Me(l));
+    a && !Le(a) && (t.class = ve(a)), Ie(l) && (/* @__PURE__ */ Gi(l) && !fe(l) && (l = nt({}, l)), t.style = Me(l));
   }
   const s = Le(e) ? 1 : df(e) ? 128 : Qi(e) ? 64 : Ie(e) ? 4 : he(e) ? 2 : 0;
   return re(
@@ -3902,7 +3902,7 @@ function se(...e) {
     const r = e[n];
     for (const o in r)
       if (o === "class")
-        t.class !== r.class && (t.class = ge([t.class, r.class]));
+        t.class !== r.class && (t.class = ve([t.class, r.class]));
       else if (o === "style")
         t.style = Me([t.style, r.style]);
       else if (Fi(o)) {
@@ -6091,14 +6091,14 @@ const Rb = /* @__PURE__ */ R("$ZodObject", (e, t) => {
         continue;
       const O = x[$], k = typeof $ == "symbol" ? `syms[${g.indexOf($)}]` : fg($), E = `${k} in input`, T = p[$], j = T?._zod?.optin, ee = j !== void 0, we = T?._zod?.optout === "optional";
       if (v.write(`const ${O} = ${y(k)};`), ee && we) {
-        const ve = j === "optional" ? `${O}_present` : `${O}.value !== undefined || ${O}_present`;
+        const ge = j === "optional" ? `${O}_present` : `${O}.value !== undefined || ${O}_present`;
         v.write(`
         const ${O}_present = ${E};
         if (!${O}.issues.length || ${O}_present) {
           if (${O}.issues.length) {${S(O, k)}
           }
 
-          if (${ve}) {
+          if (${ge}) {
             newResult[${k}] = ${O}.value;
           }
         }
@@ -9892,15 +9892,15 @@ Note: state patches appear right after the elements that use them, so the UI fil
   ), s.push(
     '   Example: `"label": { "$template": "Items: ${/cart/count} | Total: ${/cart/total}" }` renders "Items: 3 | Total: 42.00" when /cart/count is 3 and /cart/total is 42.00. Inside a repeat, `{ "$template": "${name} - ${email}" }` reads name and email from each item.'
   ), s.push("");
-  const ve = e.data.functions;
-  if (ve && Object.keys(ve).length > 0) {
+  const ge = e.data.functions;
+  if (ge && Object.keys(ge).length > 0) {
     s.push(
       '5. Computed: `{ "$computed": "<functionName>", "args": { "key": <expression> } }` - calls a registered function with resolved args and returns the result.'
     ), s.push(
       '   Example: `"value": { "$computed": "fullName", "args": { "first": { "$state": "/form/firstName" }, "last": { "$state": "/form/lastName" } } }`'
     ), s.push("   Available functions:");
     for (const me of Object.keys(
-      ve
+      ge
     ))
       s.push(`   - ${me}`);
     s.push("");
@@ -11065,8 +11065,8 @@ var $l = /* @__PURE__ */ D({
           );
       }
       const $ = (j, ee) => j.map((we) => {
-        const ve = e.spec.elements[we];
-        if (!ve) {
+        const ge = e.spec.elements[we];
+        if (!ge) {
           if (!e.loading) {
             const de = ee ? `in slot "${ee}" of "${S.type}"` : `as child of "${S.type}"`;
             console.warn(
@@ -11077,7 +11077,7 @@ var $l = /* @__PURE__ */ D({
         }
         return Q($l, {
           key: we,
-          element: ve,
+          element: ge,
           elementKey: we,
           spec: e.spec,
           registry: e.registry,
@@ -12812,7 +12812,7 @@ const Sx = ["type", "disabled", "data-disabled", "data-loading", "aria-busy"], x
     );
     return (s, a) => (w(), P("button", {
       type: e.type,
-      class: ge(i.value),
+      class: ve(i.value),
       disabled: e.disabled || o.value,
       "data-disabled": e.disabled || void 0,
       "data-loading": o.value || void 0,
@@ -16017,12 +16017,12 @@ const d$ = 50, f$ = async (e, t, n) => {
     }, p = Dl(o), h = Nl(p), g = await s.getDimensions(c), v = p === "y", y = v ? "top" : "left", S = v ? "bottom" : "right", x = v ? "clientHeight" : "clientWidth", _ = i.reference[h] + i.reference[p] - f[p] - i.floating[h], $ = f[p] - i.reference[p], O = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
     let k = O ? O[x] : 0;
     (!k || !await (s.isElement == null ? void 0 : s.isElement(O))) && (k = a.floating[x] || i.floating[h]);
-    const E = _ / 2 - $ / 2, T = k / 2 - g[h] / 2 - 1, j = Hn(d[y], T), ee = Hn(d[S], T), we = k - g[h] - ee, ve = k / 2 - g[h] / 2 + E, de = ih(j, ve, we), Ne = !l.arrow && Qr(o) != null && ve !== de && i.reference[h] / 2 - (ve < j ? j : ee) - g[h] / 2 < 0, be = Ne ? ve < j ? ve - j : ve - we : 0;
+    const E = _ / 2 - $ / 2, T = k / 2 - g[h] / 2 - 1, j = Hn(d[y], T), ee = Hn(d[S], T), we = k - g[h] - ee, ge = k / 2 - g[h] / 2 + E, de = ih(j, ge, we), Ne = !l.arrow && Qr(o) != null && ge !== de && i.reference[h] / 2 - (ge < j ? j : ee) - g[h] / 2 < 0, be = Ne ? ge < j ? ge - j : ge - we : 0;
     return {
       [p]: f[p] + be,
       data: {
         [p]: de,
-        centerOffset: ve - de - be,
+        centerOffset: ge - de - be,
         ...Ne && {
           alignmentOffset: be
         }
@@ -16084,8 +16084,8 @@ const d$ = 50, f$ = async (e, t, n) => {
         if (!be)
           switch (p) {
             case "bestFit": {
-              var ve;
-              const Y = (ve = j.filter((oe) => {
+              var ge;
+              const Y = (ge = j.filter((oe) => {
                 if (O) {
                   const Pe = on(oe.placement);
                   return Pe === S || // Create a bias to the `y` side axis due to horizontal
@@ -16093,7 +16093,7 @@ const d$ = 50, f$ = async (e, t, n) => {
                   Pe === "y";
                 }
                 return !0;
-              }).map((oe) => [oe.placement, oe.overflows.filter((Pe) => Pe > 0).reduce((Pe, me) => Pe + me, 0)]).sort((oe, Pe) => oe[1] - Pe[1])[0]) == null ? void 0 : ve[0];
+              }).map((oe) => [oe.placement, oe.overflows.filter((Pe) => Pe > 0).reduce((Pe, me) => Pe + me, 0)]).sort((oe, Pe) => oe[1] - Pe[1])[0]) == null ? void 0 : ge[0];
               Y && (be = Y);
               break;
             }
@@ -17135,12 +17135,12 @@ var tA = /* @__PURE__ */ D({
     Pt(() => {
       a.value && (ee.value = window.getComputedStyle(a.value).zIndex);
     });
-    const we = A(() => k.value.arrow?.x ?? 0), ve = A(() => k.value.arrow?.y ?? 0);
+    const we = A(() => k.value.arrow?.x ?? 0), ge = A(() => k.value.arrow?.y ?? 0);
     return eA({
       placedSide: E,
       onArrowChange: (de) => u.value = de,
       arrowX: we,
-      arrowY: ve,
+      arrowY: ge,
       shouldHideArrow: j
     }), (de, Ne) => (w(), P("div", {
       ref_key: "floatingRef",
@@ -18561,11 +18561,11 @@ var UA = /* @__PURE__ */ D({
           const et = _.right - O.right, ut = window.innerWidth - $.right - et, _t = window.innerWidth - x.right - ut, rt = x.width + _t, Dn = Math.max(rt, _.width), b = window.innerWidth - Vt, C = xc(ut, Vt, Math.max(Vt, b - Dn));
           c.value.style.minWidth = `${rt}px`, c.value.style.right = `${C}px`;
         }
-        const k = o().map((et) => et.ref), E = window.innerHeight - Vt * 2, T = f.value.scrollHeight, j = window.getComputedStyle(d.value), ee = Number.parseInt(j.borderTopWidth, 10), we = Number.parseInt(j.paddingTop, 10), ve = Number.parseInt(j.borderBottomWidth, 10), de = Number.parseInt(j.paddingBottom, 10), Ne = ee + we + T + de + ve, be = Math.min(p.value.offsetHeight * 5, Ne), Y = window.getComputedStyle(f.value), oe = Number.parseInt(Y.paddingTop, 10), Pe = Number.parseInt(Y.paddingBottom, 10), me = x.top + x.height / 2 - Vt, xe = E - me, Ke = p.value.offsetHeight / 2, Tt = p.value.offsetTop + Ke, It = ee + we + Tt, nr = Ne - It;
+        const k = o().map((et) => et.ref), E = window.innerHeight - Vt * 2, T = f.value.scrollHeight, j = window.getComputedStyle(d.value), ee = Number.parseInt(j.borderTopWidth, 10), we = Number.parseInt(j.paddingTop, 10), ge = Number.parseInt(j.borderBottomWidth, 10), de = Number.parseInt(j.paddingBottom, 10), Ne = ee + we + T + de + ge, be = Math.min(p.value.offsetHeight * 5, Ne), Y = window.getComputedStyle(f.value), oe = Number.parseInt(Y.paddingTop, 10), Pe = Number.parseInt(Y.paddingBottom, 10), me = x.top + x.height / 2 - Vt, xe = E - me, Ke = p.value.offsetHeight / 2, Tt = p.value.offsetTop + Ke, It = ee + we + Tt, nr = Ne - It;
         if (It <= me) {
           const et = p.value === k.at(-1);
           c.value.style.bottom = "0px";
-          const ut = d.value.clientHeight - f.value.offsetTop - f.value.offsetHeight, _t = Math.max(xe, Ke + (et ? Pe : 0) + ut + ve), rt = It + _t;
+          const ut = d.value.clientHeight - f.value.offsetTop - f.value.offsetHeight, _t = Math.max(xe, Ke + (et ? Pe : 0) + ut + ge), rt = It + _t;
           c.value.style.height = `${rt}px`;
         } else {
           const et = p.value === k[0];
@@ -19975,7 +19975,7 @@ const qO = ["for"], jO = {
       n.label || n.description ? (w(), P("label", {
         key: 0,
         for: l.value,
-        class: ge(["ui-checkbox-text min-w-0 font-normal", n.disabled ? "cursor-default" : "cursor-pointer"])
+        class: ve(["ui-checkbox-text min-w-0 font-normal", n.disabled ? "cursor-default" : "cursor-pointer"])
       }, [
         n.label ? (w(), P("span", jO, ie(n.label), 1)) : W("", !0),
         n.description ? (w(), P("span", BO, ie(n.description), 1)) : W("", !0)
@@ -20043,7 +20043,7 @@ const qO = ["for"], jO = {
       default: F(() => [
         (w(!0), P(Se, null, St(n.options, (c) => (w(), P("label", {
           key: c.value,
-          class: ge(["flex items-start gap-2 text-[13px] text-[var(--ui-text)]", n.disabled || c.disabled ? "cursor-default" : "cursor-pointer"])
+          class: ve(["flex items-start gap-2 text-[13px] text-[var(--ui-text)]", n.disabled || c.disabled ? "cursor-default" : "cursor-pointer"])
         }, [
           J(m($A), {
             value: c.value,
@@ -20285,7 +20285,7 @@ const tE = { key: 0 }, nE = { key: 1 }, rE = { key: 2 }, oE = {
                             value: j.value,
                             "text-value": j.label,
                             disabled: j.disabled,
-                            class: ge(["relative flex h-8 select-none items-center rounded-[4px] py-1 pr-8 text-[13px] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-primary-soft)] data-[highlighted]:text-[var(--ui-primary-active)] data-[disabled]:opacity-40", T.label && T.indent ? "pl-5" : "pl-2.5"])
+                            class: ve(["relative flex h-8 select-none items-center rounded-[4px] py-1 pr-8 text-[13px] text-[var(--ui-text)] outline-none data-[highlighted]:bg-[var(--ui-primary-soft)] data-[highlighted]:text-[var(--ui-primary-active)] data-[disabled]:opacity-40", T.label && T.indent ? "pl-5" : "pl-2.5"])
                           }, {
                             default: F(() => [
                               J(m(uO), null, {
@@ -20336,7 +20336,7 @@ const tE = { key: 0 }, nE = { key: 1 }, rE = { key: 2 }, oE = {
   },
   setup(e) {
     return (t, n) => (w(), P("span", {
-      class: ge([
+      class: ve([
         "inline-flex min-h-5 items-center gap-1.5 rounded-full px-2 py-0.5 text-[12px] font-normal leading-none tabular-nums",
         e.tone === "neutral" && "bg-[var(--ui-neutral-soft)] text-[var(--ui-neutral-text)]",
         e.tone === "info" && "bg-[var(--ui-info-soft)] text-[var(--ui-info-text)]",
@@ -20426,7 +20426,7 @@ const tE = { key: 0 }, nE = { key: 1 }, rE = { key: 2 }, oE = {
       danger: "bg-[var(--ui-danger)]"
     }, i = A(() => r.max <= 0 ? 0 : Math.min(100, Math.max(0, r.value / r.max * 100)));
     return (s, a) => (w(), P("div", {
-      class: ge(m(t).class),
+      class: ve(m(t).class),
       style: Me(m(t).style),
       "data-syno-pkg-land-ui": ""
     }, [
@@ -20444,7 +20444,7 @@ const tE = { key: 0 }, nE = { key: 1 }, rE = { key: 2 }, oE = {
         "data-tone": e.tone
       }, n()), [
         re("div", {
-          class: ge(["h-full rounded-full transition-[width] duration-[var(--ui-motion-normal)]", o[e.tone]]),
+          class: ve(["h-full rounded-full transition-[width] duration-[var(--ui-motion-normal)]", o[e.tone]]),
           style: Me({ width: `${i.value}%` })
         }, null, 6)
       ], 16, wE)
@@ -20493,7 +20493,7 @@ const tE = { key: 0 }, nE = { key: 1 }, rE = { key: 2 }, oE = {
   },
   setup(e) {
     return (t, n) => (w(), P("section", {
-      class: ge([
+      class: ve([
         "rounded-[var(--ui-radius-md)] bg-[var(--ui-surface)]",
         e.border && "border border-[var(--ui-border)]",
         e.raised && "shadow-[var(--ui-shadow-menu)]",
@@ -20800,7 +20800,7 @@ const VE = /* @__PURE__ */ D({
                   default: F(() => [
                     re("header", {
                       ref: "handle",
-                      class: ge(["flex min-h-11 shrink-0 items-start justify-between gap-4 border-b border-[var(--ui-border-subtle)] px-4 py-3", m(l) && "cursor-move touch-none select-none"]),
+                      class: ve(["flex min-h-11 shrink-0 items-start justify-between gap-4 border-b border-[var(--ui-border-subtle)] px-4 py-3", m(l) && "cursor-move touch-none select-none"]),
                       "data-ui-drag-handle": m(l) ? "" : void 0,
                       onPointerdown: y[1] || (y[1] = //@ts-ignore
                       (...S) => m(c) && m(c)(...S))
@@ -20847,7 +20847,7 @@ const VE = /* @__PURE__ */ D({
                     ])) : W("", !0),
                     v.$slots.footer ? (w(), P("footer", {
                       key: 1,
-                      class: ge(["flex shrink-0 flex-wrap min-h-12 items-center justify-end gap-2 px-4 py-2.5", p() && "border-t border-[var(--ui-border-subtle)]"])
+                      class: ve(["flex shrink-0 flex-wrap min-h-12 items-center justify-end gap-2 px-4 py-2.5", p() && "border-t border-[var(--ui-border-subtle)]"])
                     }, [
                       N(v.$slots, "footer")
                     ], 2)) : W("", !0)
@@ -20984,7 +20984,7 @@ const YE = ["data-direction"], XE = {
       ref: o,
       "data-direction": s.value ? "vertical" : "horizontal",
       style: Me(a.value),
-      class: ge([
+      class: ve([
         "grid min-h-10 gap-y-1 py-1.5",
         n.value === "start" ? "items-start" : "items-center"
       ]),
@@ -20992,7 +20992,7 @@ const YE = ["data-direction"], XE = {
     }, [
       re("div", {
         "data-settings-label": "",
-        class: ge(["min-w-0 break-words [word-break:keep-all] text-left text-[13px] text-[var(--ui-text)]", n.value === "start" && "pt-1"])
+        class: ve(["min-w-0 break-words [word-break:keep-all] text-left text-[13px] text-[var(--ui-text)]", n.value === "start" && "pt-1"])
       }, [
         De(ie(e.label), 1),
         e.required ? (w(), P("span", XE, "*")) : W("", !0)
@@ -21071,7 +21071,7 @@ const n1 = ["data-collapsible", "aria-busy"], r1 = {
           (...f) => m(s) && m(s)(...f))
         }, [
           J(m(ls), {
-            class: ge(["size-4 shrink-0 transition-transform", !m(i) && "-rotate-90"]),
+            class: ve(["size-4 shrink-0 transition-transform", !m(i) && "-rotate-90"]),
             "aria-hidden": "true"
           }, null, 8, ["class"]),
           re("span", i1, [
@@ -21095,7 +21095,7 @@ const n1 = ["data-collapsible", "aria-busy"], r1 = {
       ])) : W("", !0),
       Mr(re("div", {
         id: m(o),
-        class: ge(["ui-settings-section-body", c.value && "pt-3"])
+        class: ve(["ui-settings-section-body", c.value && "pt-3"])
       }, [
         e.description || u.$slots.description ? (w(), P("p", d1, [
           N(u.$slots, "description", {}, () => [
@@ -21151,7 +21151,7 @@ const n1 = ["data-collapsible", "aria-busy"], r1 = {
         e.title ? (w(), P("div", v1, ie(e.title), 1)) : W("", !0),
         s.$slots.default || e.code ? (w(), P("div", {
           key: 1,
-          class: ge(["flex flex-wrap items-baseline gap-x-2", e.title && "mt-0.5"])
+          class: ve(["flex flex-wrap items-baseline gap-x-2", e.title && "mt-0.5"])
         }, [
           s.$slots.default ? (w(), P("div", g1, [
             N(s.$slots, "default")
@@ -21248,7 +21248,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
         ref_key: "viewport",
         ref: t,
         "data-ui-scroll-edges-viewport": "",
-        class: ge(e.viewportClass),
+        class: ve(e.viewportClass),
         style: Me(e.viewportStyle)
       }, [
         N(o.$slots, "default")
@@ -21323,7 +21323,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
               re("tr", null, [
                 (w(!0), P(Se, null, St(m(n).columns, (u) => (w(), P("th", {
                   key: u.key,
-                  class: ge(["border-b border-[var(--ui-border)] px-3 py-2 font-medium", u.align === "right" ? "text-right" : u.align === "center" ? "text-center" : "text-left"]),
+                  class: ve(["border-b border-[var(--ui-border)] px-3 py-2 font-medium", u.align === "right" ? "text-right" : u.align === "center" ? "text-center" : "text-left"]),
                   style: Me(u.width ? { width: u.width } : void 0)
                 }, ie(u.label), 7))), 128))
               ])
@@ -21340,7 +21340,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
               }, [
                 (w(!0), P(Se, null, St(m(n).columns, (f) => (w(), P("td", {
                   key: f.key,
-                  class: ge([
+                  class: ve([
                     // The padding only shows in a row a two-line cell makes taller.
                     "px-3 py-1.5 text-[var(--ui-text)]",
                     m(n).compact ? "h-9" : "h-11",
@@ -21363,7 +21363,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
       }))
     ], 8, R1));
   }
-}), B1 = ["data-layout"], U1 = ["title", "disabled"], Z1 = ["title"], W1 = ["title"], K1 = /* @__PURE__ */ D({
+}), B1 = ["data-layout", "data-wrap"], U1 = ["title", "disabled"], Z1 = ["title"], W1 = ["title"], K1 = /* @__PURE__ */ D({
   __name: "CellText",
   props: {
     text: {},
@@ -21371,13 +21371,16 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
     layout: { default: "stacked" },
     icon: {},
     openLabel: {},
-    openDisabled: { type: Boolean, default: !1 }
+    openDisabled: { type: Boolean, default: !1 },
+    wrap: { type: Boolean, default: !1 }
   },
   emits: ["open"],
   setup(e) {
-    return (t, n) => (w(), P("div", {
+    const t = e, n = A(() => t.wrap ? "whitespace-normal [overflow-wrap:anywhere]" : "truncate");
+    return (r, o) => (w(), P("div", {
       class: "flex min-w-0 items-center gap-[var(--ui-space-2)]",
       "data-layout": e.layout,
+      "data-wrap": e.wrap ? "" : void 0,
       "data-syno-pkg-land-ui": ""
     }, [
       e.icon ? (w(), Z($n(e.icon), {
@@ -21387,7 +21390,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
       })) : W("", !0),
       re("div", {
         "data-ui-cell-lines": "",
-        class: ge([
+        class: ve([
           "min-w-0 flex-1",
           e.layout === "inline" ? "flex items-baseline gap-x-[var(--ui-space-2)]" : "flex flex-col gap-y-0.5"
         ])
@@ -21398,32 +21401,33 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
           "data-ui-cell-primary": "",
           title: e.openLabel,
           disabled: e.openDisabled,
-          class: "m-0 min-w-0 max-w-full truncate rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline",
-          onClick: n[0] || (n[0] = (r) => t.$emit("open"))
+          class: ve([n.value, "m-0 min-w-0 max-w-full rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-left text-[length:inherit] leading-5 text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)] disabled:cursor-default disabled:opacity-50 disabled:hover:no-underline"]),
+          onClick: o[0] || (o[0] = (i) => r.$emit("open"))
         }, [
-          N(t.$slots, "default", {}, () => [
+          N(r.$slots, "default", {}, () => [
             De(ie(e.text), 1)
           ])
-        ], 8, U1)) : (w(), P("span", {
+        ], 10, U1)) : (w(), P("span", {
           key: 1,
           "data-ui-cell-primary": "",
           title: e.text,
-          class: "min-w-0 truncate leading-5 text-[var(--ui-text)]"
+          class: ve([n.value, "min-w-0 leading-5 text-[var(--ui-text)]"])
         }, [
-          N(t.$slots, "default", {}, () => [
+          N(r.$slots, "default", {}, () => [
             De(ie(e.text), 1)
           ])
-        ], 8, Z1)),
-        e.secondary || t.$slots.secondary ? (w(), P("span", {
+        ], 10, Z1)),
+        e.secondary || r.$slots.secondary ? (w(), P("span", {
           key: 2,
           "data-ui-cell-secondary": "",
           title: e.secondary,
-          class: ge([
-            "min-w-0 truncate text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]",
+          class: ve([
+            "min-w-0 text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]",
+            n.value,
             e.layout === "inline" && "shrink-0"
           ])
         }, [
-          N(t.$slots, "secondary", {}, () => [
+          N(r.$slots, "secondary", {}, () => [
             De(ie(e.secondary), 1)
           ])
         ], 10, W1)) : W("", !0)
@@ -21569,7 +21573,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
       default: F(() => [
         e.hasHeader ? (w(), P("header", {
           key: 0,
-          class: ge(h.value)
+          class: ve(h.value)
         }, [
           d.value ? (w(), P("h3", {
             key: 0,
@@ -21595,7 +21599,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
               (...S) => m(u) && m(u)(...S))
             }, [
               J(m(ls), {
-                class: ge(m(bn)("size-4 transition-transform duration-[var(--ui-motion-fast)]", !m(c) && "-rotate-90")),
+                class: ve(m(bn)("size-4 transition-transform duration-[var(--ui-motion-fast)]", !m(c) && "-rotate-90")),
                 "aria-hidden": "true"
               }, null, 8, ["class"])
             ], 8, cP)) : W("", !0)
@@ -21603,7 +21607,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
         ], 2)) : W("", !0),
         Mr(re("div", {
           id: m(l),
-          class: ge(g.value),
+          class: ve(g.value),
           role: e.expandable ? "region" : void 0,
           "aria-labelledby": e.expandable && d.value ? m(a) : void 0
         }, [
@@ -21615,7 +21619,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
         ]),
         v.$slots.footer && !e.loading ? (w(), P("footer", {
           key: 1,
-          class: ge(m(bn)("flex flex-wrap items-center gap-2 border-t border-[var(--ui-border-subtle)] px-5 py-2.5", o[e.footerAlign]))
+          class: ve(m(bn)("flex flex-wrap items-center gap-2 border-t border-[var(--ui-border-subtle)] px-5 py-2.5", o[e.footerAlign]))
         }, [
           N(v.$slots, "footer")
         ], 2)) : W("", !0)
@@ -21696,7 +21700,7 @@ const T1 = ["data-overflow-start", "data-overflow-end"], I1 = /* @__PURE__ */ D(
       e.name ? (w(), P("span", {
         key: 1,
         "data-ui-brand-name": "",
-        class: ge(e.collapsed ? "sr-only" : "min-w-0 truncate")
+        class: ve(e.collapsed ? "sr-only" : "min-w-0 truncate")
       }, ie(e.name), 3)) : W("", !0)
     ], 64));
   }
@@ -21790,22 +21794,22 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
       Y.button === 0 && (Y.preventDefault(), T = { x: Y.clientX, width: h.width.value }, E.value = !0, document.addEventListener("pointermove", j), document.addEventListener("pointerup", ee), document.addEventListener("pointercancel", ee));
     }
     In(ee);
-    function ve(Y = !1) {
+    function ge(Y = !1) {
       u.value && (u.value = !1, Y && Ue(() => s.value?.focus()));
     }
     function de() {
       u.value = !0, Ue(() => i.value?.querySelector("[data-ui-close-navigation]")?.focus());
     }
     ue(c, (Y) => {
-      Y || ve();
+      Y || ge();
     });
     function Ne(Y) {
-      !c.value || !u.value || Y.target instanceof Element && Y.target.closest("[data-nav-item],a[href]") && ve();
+      !c.value || !u.value || Y.target instanceof Element && Y.target.closest("[data-nav-item],a[href]") && ge();
     }
     function be(Y) {
       if (!(!c.value || !u.value)) {
         if (Y.key === "Escape")
-          Y.preventDefault(), ve(!0);
+          Y.preventDefault(), ge(!0);
         else if (Y.key === "Tab" && i.value) {
           const oe = Array.from(i.value.querySelectorAll(
             'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
@@ -21818,7 +21822,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
     return (Y, oe) => (w(), P("section", {
       ref_key: "root",
       ref: o,
-      class: ge(["syno-pkg-land-ui-root relative grid min-w-0 overflow-hidden bg-[var(--ui-surface)] text-[var(--ui-text)]", Y.$slots.sidebar && !c.value ? "grid-cols-[var(--ui-app-sidebar-width)_minmax(0,1fr)]" : "grid-cols-1"]),
+      class: ve(["syno-pkg-land-ui-root relative grid min-w-0 overflow-hidden bg-[var(--ui-surface)] text-[var(--ui-text)]", Y.$slots.sidebar && !c.value ? "grid-cols-[var(--ui-app-sidebar-width)_minmax(0,1fr)]" : "grid-cols-1"]),
       style: Me({ "--ui-app-sidebar-width": y.value, minHeight: t.minHeight }),
       "data-ui-layout-mode": l.value,
       "data-ui-mobile-open": c.value && u.value ? "true" : void 0,
@@ -21832,7 +21836,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
         key: 0,
         "data-ui-mobile-backdrop": "",
         "aria-hidden": "true",
-        onClick: oe[0] || (oe[0] = (Pe) => ve())
+        onClick: oe[0] || (oe[0] = (Pe) => ge())
       })) : W("", !0),
       Y.$slots.sidebar ? (w(), P("aside", {
         key: 1,
@@ -21861,7 +21865,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
             "data-ui-close-navigation": "",
             type: "button",
             "aria-label": m(r)("Close"),
-            onClick: oe[1] || (oe[1] = (Pe) => ve(!0))
+            onClick: oe[1] || (oe[1] = (Pe) => ge(!0))
           }, [
             J(m(us), {
               size: 20,
@@ -22025,7 +22029,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
               disabled: u.disabled,
               "aria-current": u.selectable && n.modelValue === u.key ? "page" : void 0,
               "aria-expanded": o(u),
-              class: ge(s(u)),
+              class: ve(s(u)),
               style: Me(i(n.depth)),
               onClick: (d) => {
                 r("toggle", u.key), u.selectable && r("select", u);
@@ -22033,7 +22037,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
             }, [
               J(m(zx), {
                 "data-nav-chevron": "",
-                class: ge(["size-3.5 shrink-0 text-[var(--ui-text-muted)] transition-transform", o(u) && "rotate-90"]),
+                class: ve(["size-3.5 shrink-0 text-[var(--ui-text-muted)] transition-transform", o(u) && "rotate-90"]),
                 "aria-hidden": "true"
               }, null, 8, ["class"]),
               u.icon ? (w(), Z($n(u.icon), {
@@ -22043,7 +22047,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
               })) : W("", !0),
               re("span", {
                 "data-nav-label": "",
-                class: ge(n.collapsed ? "sr-only" : Gc)
+                class: ve(n.collapsed ? "sr-only" : Gc)
               }, ie(u.label), 3),
               u.badge !== void 0 ? (w(), P("span", VP, ie(u.badge), 1)) : W("", !0)
             ], 14, FP)) : (w(), P("button", {
@@ -22052,7 +22056,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
               "data-nav-item": "",
               disabled: u.disabled,
               "aria-current": n.modelValue === u.key ? "page" : void 0,
-              class: ge(s(u)),
+              class: ve(s(u)),
               style: Me(i(n.depth)),
               onClick: (d) => r("select", u)
             }, [
@@ -22063,7 +22067,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
               })) : W("", !0),
               re("span", {
                 "data-nav-label": "",
-                class: ge(n.collapsed ? "sr-only" : Gc)
+                class: ve(n.collapsed ? "sr-only" : Gc)
               }, ie(u.label), 3),
               u.badge !== void 0 ? (w(), P("span", qP, ie(u.badge), 1)) : W("", !0)
             ], 14, LP))
@@ -22169,7 +22173,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
       }, null, 8, ["modelValue", "placeholder", "clear-label"])) : W("", !0),
       (w(!0), P(Se, null, St(c.value, ({ group: $, id: O, items: k }, E) => (w(), P("section", {
         key: O,
-        class: ge(E > 0 && "mt-2 border-t border-[var(--ui-border-subtle)] pt-2")
+        class: ve(E > 0 && "mt-2 border-t border-[var(--ui-border-subtle)] pt-2")
       }, [
         $.label && m(r).collapsible && !m(i) ? (w(), P("button", {
           key: 0,
@@ -22181,7 +22185,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
           onClick: (T) => d(O)
         }, [
           J(m(ls), {
-            class: ge(["size-3 shrink-0 transition-transform", !f(O) && "-rotate-90"]),
+            class: ve(["size-3 shrink-0 transition-transform", !f(O) && "-rotate-90"]),
             "aria-hidden": "true"
           }, null, 8, ["class"]),
           De(" " + ie($.label), 1)
@@ -22249,7 +22253,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
   setup(e) {
     return (t, n) => (w(), P("div", {
       "data-ui-page-header": "",
-      class: ge([e.sticky && "sticky top-0 z-[2] bg-[var(--ui-surface)]", "flex items-start justify-between gap-[var(--ui-space-6)] px-[var(--ui-page-padding-x)] pt-[var(--ui-page-padding-y)] pb-[var(--ui-space-3)]"]),
+      class: ve([e.sticky && "sticky top-0 z-[2] bg-[var(--ui-surface)]", "flex items-start justify-between gap-[var(--ui-space-6)] px-[var(--ui-page-padding-x)] pt-[var(--ui-page-padding-y)] pb-[var(--ui-space-3)]"]),
       "data-syno-pkg-land-ui": ""
     }, [
       re("div", XP, [
@@ -22317,7 +22321,7 @@ const yP = ["data-ui-layout-mode", "data-ui-mobile-open", "data-ui-motion-ready"
           disabled: c.disabled,
           "data-ui-tab-value": c.value,
           "aria-current": r.modelValue === c.value ? "page" : void 0,
-          class: ge([
+          class: ve([
             "relative h-[30px] shrink-0 border-0 bg-transparent px-2 text-[length:var(--ui-font-size)] font-bold outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] focus-visible:shadow-[inset_0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
             r.modelValue === c.value ? "text-[var(--ui-primary)]" : "text-[var(--ui-text)] hover:text-[var(--ui-primary)]"
           ]),
@@ -22634,7 +22638,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
     function k() {
       x.value = y.value;
     }
-    const E = /* @__PURE__ */ V(""), T = /* @__PURE__ */ V(""), j = /* @__PURE__ */ V(""), ee = /* @__PURE__ */ V(""), we = /* @__PURE__ */ V(!1), ve = /* @__PURE__ */ V(!1), de = A(() => o.disabled === !0 || we.value), Ne = A(() => ee.value || a.value.validateStatus || E.value), be = A(() => Ne.value === "error"), Y = A(() => j.value || T.value || a.value.help), oe = A(() => j.value ? j.value : be.value && !a.value.hideValidateMessage && T.value || a.value.help), Pe = eo(u), me = A(() => {
+    const E = /* @__PURE__ */ V(""), T = /* @__PURE__ */ V(""), j = /* @__PURE__ */ V(""), ee = /* @__PURE__ */ V(""), we = /* @__PURE__ */ V(!1), ge = /* @__PURE__ */ V(!1), de = A(() => o.disabled === !0 || we.value), Ne = A(() => ee.value || a.value.validateStatus || E.value), be = A(() => Ne.value === "error"), Y = A(() => j.value || T.value || a.value.help), oe = A(() => j.value ? j.value : be.value && !a.value.hideValidateMessage && T.value || a.value.help), Pe = eo(u), me = A(() => {
       const B = a.value.direction ?? l?.direction ?? "auto";
       return B === "auto" ? Pe.value > 0 && Pe.value < 520 ? "vertical" : "horizontal" : B;
     }), xe = A(() => {
@@ -22652,7 +22656,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
       const B = be.value ? "text-[var(--ui-danger)]" : Ne.value === "warning" ? "text-[var(--ui-warning)]" : Ne.value === "success" ? "text-[var(--ui-success)]" : "text-[var(--ui-text-secondary)]";
       return xe.value === "text" ? bn("mt-1 text-[12px] leading-4", B) : bn(
         "absolute left-0 top-full z-[1100] mt-1 max-w-64 rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-2.5 py-1.5 text-[12px] leading-4 text-[var(--ui-tooltip-fg)] shadow-[var(--ui-shadow-menu)] transition-opacity duration-[var(--ui-motion-fast)]",
-        ve.value ? "opacity-100" : "pointer-events-none opacity-0"
+        ge.value ? "opacity-100" : "pointer-events-none opacity-0"
       );
     }), _t = { afterItem: "shrink-0 self-center" };
     function rt() {
@@ -22671,7 +22675,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
         defaultTrigger: a.value.defaultValidateTrigger,
         text: r
       });
-      return ye !== Dn || (T.value = Ce ?? "", E.value = Ce ? "error" : "success", Ce && xe.value === "popup" && (ve.value = !0), i("validated", { message: Ce ?? "", status: E.value })), Ce;
+      return ye !== Dn || (T.value = Ce ?? "", E.value = Ce ? "error" : "success", Ce && xe.value === "popup" && (ge.value = !0), i("validated", { message: Ce ?? "", status: E.value })), Ce;
     }
     async function C(B = null) {
       return !await b(B);
@@ -22683,22 +22687,22 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
       b("change");
     }
     function M(B) {
-      B !== void 0 && (j.value = B), ve.value = !0;
+      B !== void 0 && (j.value = B), ge.value = !0;
     }
     function L() {
-      ve.value = !1;
+      ge.value = !1;
     }
     function G(B, ne = "error") {
-      j.value = B, ee.value = ne, xe.value === "popup" && (ve.value = !0);
+      j.value = B, ee.value = ne, xe.value === "popup" && (ge.value = !0);
     }
     function H() {
-      j.value = "", ee.value = "", ve.value = !1;
+      j.value = "", ee.value = "", ge.value = !1;
     }
     function K(B) {
       we.value = B;
     }
     function q() {
-      Dn++, E.value = "", T.value = "", j.value = "", ee.value = "", ve.value = !1, o.initialValue !== void 0 && (g.value ? i("update:modelValue", o.initialValue) : v.value = o.initialValue);
+      Dn++, E.value = "", T.value = "", j.value = "", ee.value = "", ge.value = !1, o.initialValue !== void 0 && (g.value ? i("update:modelValue", o.initialValue) : v.value = o.initialValue);
     }
     function ce() {
       const B = u.value;
@@ -22778,7 +22782,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
       "data-form-item": "",
       "data-direction": me.value,
       style: Me(nr.value),
-      class: ge(m(bn)("min-w-0", be.value && !m(a).hideValidateStatusCls && "has-error")),
+      class: ve(m(bn)("min-w-0", be.value && !m(a).hideValidateStatusCls && "has-error")),
       "data-status": Ne.value || void 0,
       "data-syno-pkg-land-ui": "",
       onMouseenter: ne[1] || (ne[1] = (ye) => xe.value === "popup" && M()),
@@ -22790,7 +22794,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
         key: 0,
         "data-form-label": "",
         style: Me(et.value),
-        class: ge([
+        class: ve([
           "min-w-0 shrink-0 break-words [word-break:keep-all] text-[13px] leading-5 text-[var(--ui-text)]",
           me.value === "horizontal" ? "pt-[5px] text-left" : void 0,
           m(a).disableLabel || de.value ? "opacity-40" : void 0
@@ -22809,7 +22813,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
         ], 8, $T)
       ], 6)) : W("", !0),
       re("div", {
-        class: ge(["relative min-w-0 flex-1", m(a).disableControl ? "opacity-40" : void 0])
+        class: ve(["relative min-w-0 flex-1", m(a).disableControl ? "opacity-40" : void 0])
       }, [
         re("div", OT, [
           N(B.$slots, "before"),
@@ -22825,7 +22829,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
         Tt.value ? (w(), P("div", {
           key: 0,
           id: f.description,
-          class: ge([
+          class: ve([
             "mt-1 text-[12px] leading-4 text-[var(--ui-text-secondary)]",
             m(a).disableDescription || de.value ? "opacity-40" : void 0
           ])
@@ -22838,7 +22842,7 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
           key: 1,
           id: f.message,
           role: "alert",
-          class: ge(ut.value)
+          class: ve(ut.value)
         }, [
           N(B.$slots, "status", { field: le }, () => [
             De(ie(oe.value), 1)
@@ -23158,10 +23162,11 @@ const kT = ["data-direction", "data-status"], $T = ["id", "for"], AT = {
       secondary: z().optional(),
       layout: Oe(["stacked", "inline"]).optional(),
       openLabel: z().optional(),
-      openDisabled: _e().optional()
+      openDisabled: _e().optional(),
+      wrap: _e().optional()
     }),
     events: ["open"],
-    description: 'Main text with secondary information (size, time, path), truncated with a tooltip. With openLabel the main text is a link-styled button that emits open, e.g. "Open in File Station".'
+    description: 'Main text with secondary information (size, time, path), truncated with a tooltip; wrap: true wraps both lines instead. With openLabel the main text is a link-styled button that emits open, e.g. "Open in File Station".'
   },
   CellStatus: {
     props: te({