npm - @urbicon-ui/blocks - Versions diffs - 6.9.0 → 6.10.1 - Mend

@urbicon-ui/blocks 6.9.0 → 6.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/primitives/JourneyTimeline/JourneyTimeline.svelte +178 -95
package/dist/primitives/JourneyTimeline/index.d.ts +71 -36
package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts +174 -27
package/dist/primitives/JourneyTimeline/journey-timeline.variants.js +223 -69
package/dist/primitives/Tab/tab.variants.d.ts +8 -8
package/package.json +3 -3

package/dist/primitives/JourneyTimeline/journey-timeline.variants.js CHANGED Viewed

@@ -1,95 +1,139 @@
 import { tv } from '../../utils/variants.js';
 export const journeyTimelineVariants = tv({
     slots: {
-        // Root wrapper. Always a <div> so the same element hosts the marker rail
-        // AND (horizontal only) the shared detail panel beneath it. The last node's
-        // connector is hidden in both orientations — nothing to connect onward to.
-        base: 'w-full [&_[data-journey-node]:last-child_[data-journey-connector]]:hidden',
+        // Root wrapper. Hosts the rail and — in panel mode — the shared readout.
+        base: 'w-full',
         // The ordered list of nodes. `flex-col` vertical, `flex-row` horizontal.
         rail: 'flex list-none m-0 p-0',
-        // A single node <li>.
+        // A single node <li>. Vertical: grid of [meta?] [marker column] [content];
+        // horizontal: flex row of trigger + connector group.
         node: 'group/node',
-        // The interactive header — marker + title/subtitle. A <button> for focusable
-        // nodes, a plain <div> for pure waypoints (focusable === false).
-        trigger: [
-            'flex items-center text-left w-full bg-transparent border-0 appearance-none p-1 -m-1',
-            'rounded-contain',
-            'transition-[color,background-color] duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        // Chronicle-axis column (vertical): right-aligned, tabular — times, dates,
+        // versions. Rendered only when any node provides `meta` (or a meta snippet).
+        metaColumn: 'shrink-0 text-right',
+        meta: [
+            'font-mono tabular-nums leading-tight text-text-tertiary',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
         ],
-        // The status-coloured circle.
+        // The spine: marker + connector line. Vertical: a narrow column the line
+        // grows down inside; horizontal: a full-width row the line grows right in.
+        markerColumn: 'flex items-center',
+        // The status dot. Deliberately small — the line is the protagonist, the
+        // dots are punctuation (contrast: Stepper's large glyph discs).
         marker: [
-            'flex items-center justify-center shrink-0 font-semibold rounded-commit border-2 box-border',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)]'
+            'box-border shrink-0 rounded-commit border-2',
+            'transition-[background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)]'
         ],
-        // Column (marker width) that carries the vertical connector below a marker.
-        // `flex-col` is essential: it makes the connector's `flex-1` grow *down* the
-        // column (a thin vertical line) instead of *across* it (a fat block).
-        connectorColumn: 'flex flex-col shrink-0 items-center',
-        // The connecting line between markers.
+        // The connecting line. Drawn with borders so `connectorStyle` can switch
+        // solid/dashed/dotted — the connector carries meaning, not just geometry.
         connector: [
-            'bg-border-subtle',
-            'transition-[background-color] duration-[var(--blocks-duration-normal)]'
+            'border-border-default',
+            'transition-[border-color] duration-[var(--blocks-duration-normal)]'
+        ],
+        // Content cell (vertical): card + segment label.
+        content: 'min-w-0',
+        // The focus surface around header + inline detail. Transparent at rest,
+        // elevated card when focused inline, selected tint when focused in panel
+        // mode — never a bare full-width grey block.
+        card: [
+            'rounded-contain border border-transparent',
+            'transition-[background-color,border-color,box-shadow] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-gentle)]'
         ],
-        // Title + subtitle wrapper.
-        labelGroup: 'flex flex-col min-w-0',
+        // The interactive header — title + subtitle. A <button> for focusable
+        // nodes, a plain <div> for pure waypoints (focusable === false).
+        trigger: [
+            'flex w-full appearance-none flex-col items-start gap-0.5 border-0 bg-transparent p-0 text-left',
+            'rounded-contain',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        ],
+        labelGroup: 'flex min-w-0 flex-col',
         title: [
-            'font-medium leading-tight truncate',
+            'font-medium leading-tight',
             'transition-colors duration-[var(--blocks-duration-fast)]'
         ],
-        subtitle: 'text-text-tertiary leading-tight mt-0.5 truncate',
-        // Lower row (vertical only): connector column + inline detail region.
-        body: 'flex',
+        subtitle: 'text-text-tertiary leading-tight mt-0.5',
+        // Label for the stretch between two nodes (duration, transport, gap…).
+        segment: 'text-text-quaternary leading-tight',
         // Grid-rows collapse wrapper (0fr → 1fr). Reduced-motion safe: the duration
         // token collapses to 1ms under prefers-reduced-motion (interaction.css).
         detail: [
             'grid',
             'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
         ],
-        detailInner: 'overflow-hidden min-h-0',
+        detailInner: 'min-h-0 overflow-hidden',
         detailContent: 'text-text-secondary',
-        // Shared detail panel (horizontal only) rendered beneath the rail.
-        panel: 'text-text-secondary border border-border-subtle rounded-contain bg-surface-quiet'
+        // The stable readout (detail="panel" and every horizontal timeline).
+        panel: [
+            'text-text-secondary border border-border-default bg-surface-elevated rounded-contain',
+            'shadow-[var(--blocks-shadow-md)]'
+        ]
     },
     variants: {
         orientation: {
             vertical: {
-                rail: 'flex-col'
+                rail: 'flex-col',
+                node: 'grid',
+                markerColumn: 'flex-col',
+                connector: 'my-1 w-0 min-h-3 flex-1 border-l-2',
+                segment: 'flex items-center'
             },
             horizontal: {
-                // Column layout so the shared detail panel sits below the rail.
+                // Column layout so the shared panel sits below the rail.
                 base: 'flex flex-col',
                 rail: 'flex-row items-start',
-                // Each node grows to spread markers evenly; the last one hugs its content.
-                node: 'flex items-center [&:not(:last-child)]:flex-1',
-                // Compact header (marker + label side by side) so the connector can grow.
-                trigger: 'w-auto shrink-0'
+                // Stacked station: meta row above the spine, label pill below. Every
+                // node but the last stretches so the spine distributes the stations.
+                node: 'flex flex-col [&:not(:last-child)]:flex-1',
+                // Visual order is meta → spine → labels, but the DOM keeps the trigger
+                // before the spine so a segment label is read *after* its node.
+                metaColumn: 'order-1 text-left',
+                markerColumn: 'order-2 w-full flex-row',
+                // Shrink-to-fit pill around the labels only — the marker sits on the
+                // spine above, so the whole rail reads as stations on one line.
+                trigger: 'order-3 w-auto self-start',
+                connector: 'h-0 min-w-3 flex-1 border-t-2',
+                // Segment labels sit *in* the line (line — label — line); they widen
+                // the gap instead of overlapping the next station's marker.
+                segment: 'shrink-0 whitespace-nowrap',
+                panel: 'mt-4 w-full'
             }
         },
         size: {
             sm: {
-                marker: 'size-7 text-xs',
-                connectorColumn: 'w-7',
-                trigger: 'gap-2',
+                meta: 'text-[11px]',
+                marker: 'size-2.5',
+                node: 'gap-x-2.5',
+                card: '-mx-1.5 px-1.5 py-1.5',
                 title: 'text-xs',
                 subtitle: 'text-[11px]',
-                detailContent: 'text-sm pl-2'
+                segment: 'text-[11px]',
+                content: 'pb-4',
+                detailContent: 'text-xs pt-2',
+                panel: 'p-3 text-xs'
             },
             md: {
-                marker: 'size-9 text-sm',
-                connectorColumn: 'w-9',
-                trigger: 'gap-2.5',
+                meta: 'text-xs',
+                marker: 'size-3',
+                node: 'gap-x-3',
+                card: '-mx-2 px-2 py-2',
                 title: 'text-sm',
                 subtitle: 'text-xs',
-                detailContent: 'text-sm pl-2.5'
+                segment: 'text-xs',
+                content: 'pb-5',
+                detailContent: 'text-sm pt-2.5',
+                panel: 'p-4 text-sm'
             },
             lg: {
-                marker: 'size-11 text-base',
-                connectorColumn: 'w-11',
-                trigger: 'gap-3',
+                meta: 'text-sm',
+                marker: 'size-3.5',
+                node: 'gap-x-3.5',
+                card: '-mx-2.5 px-2.5 py-2.5',
                 title: 'text-base',
                 subtitle: 'text-sm',
-                detailContent: 'text-base pl-3'
+                segment: 'text-sm',
+                content: 'pb-6',
+                detailContent: 'text-base pt-3',
+                panel: 'p-5 text-base'
             }
         },
         // Marker colour + title tone per journey status. Mirrors the semantic intent
@@ -97,71 +141,178 @@ export const journeyTimelineVariants = tv({
         // Progress and Stepper.
         status: {
             complete: {
-                marker: 'border-success bg-success text-text-on-primary'
+                marker: 'bg-success border-success',
+                title: 'text-text-primary'
             },
             active: {
-                marker: 'border-primary bg-primary text-text-on-primary shadow-[var(--blocks-shadow-sm)]',
+                marker: 'bg-primary border-primary ring-4 ring-primary/15',
                 title: 'text-text-primary'
             },
             pending: {
-                marker: 'border-border-default bg-surface-base text-text-tertiary'
+                marker: 'bg-surface-base border-border-strong',
+                title: 'text-text-secondary'
             },
             blocked: {
-                marker: 'border-danger bg-danger text-text-on-primary',
+                marker: 'bg-danger border-danger',
                 title: 'text-danger'
             },
             skipped: {
-                marker: 'border-border-subtle bg-surface-subtle text-text-tertiary opacity-70',
+                marker: 'bg-surface-subtle border-border-subtle opacity-80',
                 title: 'text-text-tertiary'
             }
         },
-        // The currently expanded node. Distinct from DOM focus (focus-visible ring).
+        // The currently focused node. Distinct from DOM focus (focus-visible ring).
         focused: {
             true: {
-                trigger: 'bg-surface-subtle',
-                title: 'text-text-primary font-semibold'
+                meta: 'text-text-primary',
+                title: 'font-semibold text-text-primary'
             },
             false: {}
         },
         // Focusable nodes react to hover + show a pointer; pure waypoints do not.
         interactive: {
             true: {
-                trigger: 'cursor-pointer hover:bg-surface-hover'
+                trigger: 'cursor-pointer'
             },
             false: {
                 trigger: 'cursor-default'
             }
         },
-        // The connector segment leading out of a completed node reads as "travelled".
-        connectorComplete: {
+        // The connector leaving a completed node reads as "travelled".
+        travelled: {
             true: {
-                connector: 'bg-success'
+                connector: 'border-success'
             },
             false: {}
+        },
+        // Per-node line style — solid ride, dashed/dotted transfer or gap.
+        connectorStyle: {
+            solid: { connector: 'border-solid' },
+            dashed: { connector: 'border-dashed' },
+            dotted: { connector: 'border-dotted' }
+        },
+        // Where the focused detail lives (vertical only; horizontal is always panel).
+        detail: {
+            inline: {},
+            panel: {}
+        },
+        // Whether the chronicle axis (meta rail) is rendered — adds the grid column.
+        withMeta: {
+            true: { node: 'grid-cols-[auto_auto_minmax(0,1fr)]' },
+            false: { node: 'grid-cols-[auto_minmax(0,1fr)]' }
         }
     },
     compoundVariants: [
-        // Vertical connector geometry: a thin line that grows down the marker column.
+        // Size geometry that only applies to one orientation. Vertical: fixed
+        // meta/marker column widths + baseline offsets that align dot and title;
+        // horizontal: spine gaps + the label pill's optical left edge (-mx
+        // compensates px so title, marker and meta share one left line).
+        {
+            orientation: 'vertical',
+            size: 'sm',
+            class: {
+                metaColumn: 'w-10 pt-1.5',
+                markerColumn: 'w-3.5',
+                marker: 'mt-2',
+                segment: 'mt-1.5 gap-1'
+            }
+        },
         {
             orientation: 'vertical',
+            size: 'md',
+            class: {
+                metaColumn: 'w-12 pt-2',
+                markerColumn: 'w-4',
+                marker: 'mt-2.5',
+                segment: 'mt-2 gap-1.5'
+            }
+        },
+        {
+            orientation: 'vertical',
+            size: 'lg',
+            class: {
+                metaColumn: 'w-14 pt-2.5',
+                markerColumn: 'w-5',
+                marker: 'mt-3',
+                segment: 'mt-2.5 gap-2'
+            }
+        },
+        // The fixed spine height keeps every marker on one line whether or not the
+        // station's outgoing segment carries a (taller) text label. The metaColumn
+        // min-height is the same guarantee for the chronicle row: it holds even
+        // when a consumer `meta` snippet renders nothing for some stations.
+        {
+            orientation: 'horizontal',
+            size: 'sm',
             class: {
-                connector: 'w-0.5 flex-1 my-1 min-h-4 rounded-commit'
+                node: 'gap-y-0.5',
+                metaColumn: 'min-h-3.5',
+                markerColumn: 'h-4 gap-1 pr-1',
+                trigger: '-mx-1.5 px-1.5 py-1'
             }
         },
-        // Horizontal connector geometry: a thin line filling the gap to the next marker.
         {
             orientation: 'horizontal',
+            size: 'md',
+            class: {
+                node: 'gap-y-1',
+                metaColumn: 'min-h-4',
+                markerColumn: 'h-4 gap-1.5 pr-1.5',
+                trigger: '-mx-2 px-2 py-1.5'
+            }
+        },
+        {
+            orientation: 'horizontal',
+            size: 'lg',
+            class: {
+                node: 'gap-y-1',
+                metaColumn: 'min-h-4.5',
+                markerColumn: 'h-5 gap-2 pr-2',
+                trigger: '-mx-2.5 px-2.5 py-2'
+            }
+        },
+        // Vertical + panel: two-column layout on wide viewports; on narrow ones the
+        // readout docks to the viewport bottom while the rail scrolls behind it.
+        {
+            orientation: 'vertical',
+            detail: 'panel',
             class: {
-                connector: 'h-0.5 flex-1 mx-2 self-center rounded-commit'
+                base: 'sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)] sm:items-start sm:gap-x-6',
+                panel: 'max-sm:sticky max-sm:bottom-4 max-sm:z-[var(--z-docked)] max-sm:mt-4 sm:sticky sm:top-4'
             }
         },
-        // A focused pure waypoint keeps a bold title but gains no hover surface.
+        // Focused inline node: the elevated card — the focus IS a surface change,
+        // not a grey backdrop.
         {
-            interactive: false,
+            detail: 'inline',
+            focused: true,
+            class: {
+                card: 'border-border-default bg-surface-elevated shadow-[var(--blocks-shadow-md)]'
+            }
+        },
+        // Focused row while the detail lives in the panel: quiet selected tint.
+        {
+            orientation: 'vertical',
+            detail: 'panel',
             focused: true,
             class: {
-                trigger: 'bg-transparent'
+                card: 'bg-surface-selected'
             }
+        },
+        { orientation: 'horizontal', focused: true, class: { trigger: 'bg-surface-selected' } },
+        // Hover affordance only on non-focused interactive nodes (a focused inline
+        // card must not flicker back to the hover tint).
+        {
+            orientation: 'vertical',
+            interactive: true,
+            focused: false,
+            class: { card: 'hover:bg-surface-hover' }
+        },
+        {
+            orientation: 'horizontal',
+            interactive: true,
+            focused: false,
+            class: { trigger: 'hover:bg-surface-hover' }
         }
     ],
     defaultVariants: {
@@ -170,6 +321,9 @@ export const journeyTimelineVariants = tv({
         status: 'pending',
         focused: false,
         interactive: true,
-        connectorComplete: false
+        travelled: false,
+        connectorStyle: 'solid',
+        detail: 'inline',
+        withMeta: false
     }
 });

package/dist/primitives/Tab/tab.variants.d.ts CHANGED Viewed

@@ -62,7 +62,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
     };
 }> | undefined) => {
     base: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -72,7 +72,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     list: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -82,7 +82,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     trigger: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -92,7 +92,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     icon: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -102,7 +102,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     label: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -112,7 +112,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     badge: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -122,7 +122,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     panel: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
@@ -132,7 +132,7 @@ export declare const tabVariants: (props?: import("../../utils/variants.js").TVP
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
     indicator: (props?: ({
-        variant?: "line" | "pills" | "enclosed" | "solid" | undefined;
+        variant?: "line" | "solid" | "pills" | "enclosed" | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.9.0",
+  "version": "6.10.1",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.9.0",
-    "@urbicon-ui/shared-types": "6.9.0",
+    "@urbicon-ui/i18n": "6.10.1",
+    "@urbicon-ui/shared-types": "6.10.1",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",