@urbicon-ui/blocks 6.24.0 → 6.26.0

package/dist/components/Calendar/calendar.variants.js

@@ -114,7 +114,9 @@ export const calendarVariants = tv({
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
         ],
         allDayArea: ['border-b border-border-hairline'],
-        currentTimeLine: 'absolute left-0 right-0 z-10 pointer-events-none border-t-2 border-red-500',
+        // `live` is the dedicated "now" accent (red by convention, themes via
+        // --color-live) — deliberately not `danger`, which signals errors.
+        currentTimeLine: 'absolute left-0 right-0 z-10 pointer-events-none border-t-2 border-live',
         // Week time grid mode (replaces weekGrid when showTimeGrid)
         weekTimeLayout: ['w-full flex flex-col', 'border-t border-border-hairline'],
         // Event popover
@@ -191,7 +193,7 @@ export const calendarVariants = tv({
                 yearGrid: 'gap-1 p-1',
                 yearMonth: 'p-1 gap-0.5',
                 yearMonthTitle: 'text-xs mb-0.5',
-                yearMiniDay: 'text-[9px] size-3',
+                yearMiniDay: 'text-3xs size-3',
                 yearMiniDot: 'size-0.5',
                 weekGrid: 'gap-px',
                 weekColumn: 'min-h-16',
@@ -244,7 +246,7 @@ export const calendarVariants = tv({
                 yearGrid: 'gap-2 p-2',
                 yearMonth: 'p-2 gap-1',
                 yearMonthTitle: 'text-sm mb-1',
-                yearMiniDay: 'text-[10px] size-4',
+                yearMiniDay: 'text-3xs size-4',
                 yearMiniDot: 'size-1',
                 weekGrid: 'gap-px',
                 weekColumn: 'min-h-24',

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -13,6 +13,7 @@
     emptyText: emptyTextProp,
     showFooter = true,
     open = $bindable(false),
+    query = $bindable(''),
     shortcut = 'mod+k',
     filter,
     onSelect,
@@ -32,7 +33,6 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
-  let query = $state('');
   let selectedIndex = $state(0);
   let inputEl: HTMLInputElement | undefined = $state();
 
@@ -58,18 +58,25 @@
     return items.filter((item) => fn(item, query));
   });
 
+  /**
+   * Entries carry their index into `filtered` so the markup does not have to
+   * look it up per row — that was an `indexOf` per item, i.e. quadratic in the
+   * item count on every render.
+   */
+  type GroupEntry = { item: CommandPaletteItem; flatIdx: number };
+
   const grouped = $derived.by(() => {
-    const groups: { category: string; items: CommandPaletteItem[] }[] = [];
-    const seen: Record<string, CommandPaletteItem[]> = {};
-    for (const item of filtered) {
+    const groups: { category: string; entries: GroupEntry[] }[] = [];
+    const seen: Record<string, GroupEntry[]> = {};
+    filtered.forEach((item, flatIdx) => {
       const cat = item.category ?? '';
       if (!seen[cat]) {
-        const arr: CommandPaletteItem[] = [];
+        const arr: GroupEntry[] = [];
         seen[cat] = arr;
-        groups.push({ category: cat, items: arr });
+        groups.push({ category: cat, entries: arr });
       }
-      seen[cat].push(item);
-    }
+      seen[cat].push({ item, flatIdx });
+    });
     return groups;
   });
 
@@ -129,10 +136,6 @@
     }
   }
 
-  function getFlatIndex(item: CommandPaletteItem): number {
-    return filtered.indexOf(item);
-  }
-
   export function toggle() {
     setOpen(!open);
   }
@@ -251,8 +254,7 @@
               {group.category}
             </div>
           {/if}
-          {#each group.items as item (item.id ?? item.label)}
-            {@const flatIdx = getFlatIndex(item)}
+          {#each group.entries as { item, flatIdx } (item.id ?? item.label)}
             {@const isHighlighted = flatIdx === selectedIndex}
             {@const isDisabled = item.disabled ?? false}
             {#if customItem}
@@ -312,9 +314,23 @@
                 {/if}
                 <span
                   class={unstyled
-                    ? (slotClasses?.itemLabel ?? '')
-                    : styles.itemLabel({ class: slotClasses?.itemLabel })}>{item.label}</span
+                    ? (slotClasses?.itemText ?? '')
+                    : styles.itemText({ class: slotClasses?.itemText })}
                 >
+                  <span
+                    class={unstyled
+                      ? (slotClasses?.itemLabel ?? '')
+                      : styles.itemLabel({ class: slotClasses?.itemLabel })}>{item.label}</span
+                  >
+                  {#if item.excerpt}
+                    <span
+                      class={unstyled
+                        ? (slotClasses?.itemExcerpt ?? '')
+                        : styles.itemExcerpt({ class: slotClasses?.itemExcerpt })}
+                      >{item.excerpt}</span
+                    >
+                  {/if}
+                </span>
                 {#if item.shortcut}
                   <kbd
                     class={unstyled

package/dist/components/CommandPalette/CommandPalette.svelte.d.ts

@@ -3,6 +3,6 @@ declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {
     toggle: () => void;
     show: () => void;
     hide: () => void;
-}, "open">;
+}, "open" | "query">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

package/dist/components/CommandPalette/commandPalette.variants.d.ts

@@ -62,11 +62,21 @@ export declare const commandPaletteVariants: ((props?: {
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    itemText: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     itemLabel: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    itemExcerpt: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     itemShortcut: (props?: ({
         size?: "sm" | "md" | "lg" | undefined;
     } & {

package/dist/components/CommandPalette/commandPalette.variants.js

@@ -16,9 +16,7 @@ export const commandPaletteVariants = tv({
         inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',
         clearButton: 'text-text-quaternary hover:text-text-secondary',
         list: 'max-h-72 overflow-y-auto p-1.5',
-        groupLabel: [
-            'px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-text-quaternary'
-        ],
+        groupLabel: ['px-2 py-1.5 text-2xs font-semibold uppercase tracking-wide text-text-quaternary'],
         // tier: modify — palette items are selectable actions.
         item: [
             'flex w-full items-center gap-3 rounded-modify px-3 py-2 text-sm',
@@ -28,20 +26,24 @@ export const commandPaletteVariants = tv({
         itemDefault: 'text-text-secondary hover:bg-surface-hover',
         itemDisabled: 'text-text-quaternary cursor-not-allowed opacity-50',
         itemIcon: 'h-4 w-4 shrink-0',
-        itemLabel: 'flex-1 text-left',
+        itemText: 'flex min-w-0 flex-1 flex-col items-start gap-0.5',
+        itemLabel: 'text-left',
+        // One line only: excerpts are prose around a search match and would
+        // otherwise reflow every row to a different height.
+        itemExcerpt: 'w-full truncate text-left text-2xs text-text-tertiary',
         itemShortcut: [
             'rounded border border-border-subtle bg-surface-subtle',
-            'px-1.5 py-0.5 font-mono text-[10px] text-text-quaternary'
+            'px-1.5 py-0.5 font-mono text-3xs text-text-quaternary'
         ],
         empty: 'py-8 text-center text-sm text-text-tertiary',
         footer: [
             'flex items-center gap-4 border-t border-border-hairline',
-            'px-4 py-2 text-[11px] text-text-quaternary'
+            'px-4 py-2 text-2xs text-text-quaternary'
         ],
         footerHint: 'flex items-center gap-1',
         kbd: [
             'rounded border border-border-subtle bg-surface-subtle',
-            'px-1 py-0.5 font-mono text-[10px]'
+            'px-1 py-0.5 font-mono text-3xs'
         ],
         separator: 'my-1'
     },

package/dist/components/CommandPalette/index.d.ts

@@ -18,6 +18,12 @@ export interface CommandPaletteItem {
     id?: string;
     /** Display text shown in the list. */
     label: string;
+    /**
+     * Secondary line rendered under the label, truncated to one line. Use it for
+     * context the label cannot carry — a description, or an excerpt around a
+     * search match.
+     */
+    excerpt?: string;
     /** Group header this item belongs to. Items with the same category are grouped together. */
     category?: string;
     /** Optional keyboard shortcut displayed on the right side. */
@@ -38,6 +44,8 @@ export interface CommandPaletteItem {
  *
  * @tag action
  * @related Dialog
+ * @related Menu
+ * @related Combobox
  *
  * @example
  * ```svelte
@@ -76,6 +84,17 @@ export interface CommandPaletteProps {
     showFooter?: boolean;
     /** Controls visibility. Supports `bind:open`. @default false */
     open?: boolean;
+    /**
+     * Current search text. Supports `bind:query`. Reset to `''` whenever the
+     * palette opens.
+     *
+     * Bind it to source `items` asynchronously — derive your results from the
+     * query and pass them back in via `items`, with `filter={() => true}` so the
+     * built-in label match does not filter them a second time.
+     *
+     * @default ''
+     */
+    query?: string;
     /**
      * Register a global keyboard shortcut that toggles the palette.
      * Set to `false` to disable. @default 'mod+k' (Cmd+K / Ctrl+K)

package/dist/components/CompositionBar/CompositionBar.svelte

@@ -147,7 +147,7 @@
     primary: 'text-text-on-primary',
     secondary: 'text-text-on-primary',
     success: 'text-text-on-primary',
-    warning: 'text-text-on-surface',
+    warning: 'text-text-on-warning',
     danger: 'text-text-on-primary',
     neutral: 'text-text-on-primary'
   };
@@ -318,7 +318,7 @@
               <span
                 aria-hidden="true"
                 class={[
-                  'pointer-events-none truncate px-1.5 text-[10px] font-medium tabular-nums',
+                  'pointer-events-none truncate px-1.5 text-3xs font-medium tabular-nums',
                   !unstyled && getOnColorClass(item)
                 ]
                   .filter(Boolean)

package/dist/components/CompositionBar/composition-bar.variants.js

@@ -71,7 +71,7 @@ export const compositionBarVariants = tv({
             sm: {
                 legendItem: 'text-xs',
                 legendDot: 'h-2 w-2',
-                tooltip: 'text-[11px]'
+                tooltip: 'text-2xs'
             },
             md: {
                 legendItem: 'text-sm',

package/dist/components/Planner/planner.variants.js

@@ -67,7 +67,7 @@ export const plannerVariants = tv({
                 headerTitle: 'text-sm',
                 navButton: 'h-7 w-7',
                 weekday: 'text-xs',
-                weekNumber: 'text-[0.65rem]',
+                weekNumber: 'text-3xs',
                 cellDate: 'text-xs h-5 min-w-5',
                 cellWeekday: 'text-xs',
                 cellItems: 'text-xs',

package/dist/components/Sankey/sankey.variants.js

@@ -14,7 +14,7 @@ export const sankeyVariants = tv({
             'fill-text-primary text-xs font-medium',
             'transition-[opacity] duration-[var(--blocks-duration-fast)]'
         ],
-        nodeValue: ['pointer-events-none select-none', 'fill-text-tertiary text-[10px] tabular-nums'],
+        nodeValue: ['pointer-events-none select-none', 'fill-text-tertiary text-3xs tabular-nums'],
         link: [
             'cursor-default fill-none',
             'transition-[opacity,stroke-opacity,stroke-width] duration-[var(--blocks-duration-fast)]',