@urbicon-ui/blocks 6.34.0 → 6.36.0

package/README.md

@@ -107,7 +107,17 @@ Re-exports `@urbicon-ui/i18n`. Components with text content (Pagination, Menu, C
 </I18nProvider>
 ```
 
-For the provider/hook API, typed keys, SSR locale resolution, and opt-in lazy loading see the [@urbicon-ui/i18n](../i18n/) package.
+**English is bundled eagerly; German is lazy.** The `de` catalog is a dynamic-import chunk, so an English-only app never bundles it. Before that chunk loads, `de` keys resolve to the English fallback (never the raw key). The provider loads `de` client-side on mount, which means a **server-rendered German app** would paint English first and flip on hydration. Fix it by registering `de` eagerly once at server start:
+
+```ts
+// src/hooks.server.ts (evaluated once at server start — SSR-safe, static data)
+import { registerBlocksLocale } from '@urbicon-ui/blocks';
+import de from '@urbicon-ui/blocks/i18n/de';
+
+registerBlocksLocale('de', de);
+```
+
+For the provider/hook API, typed keys, SSR locale resolution, and the code-splitting + eager-register details see the [@urbicon-ui/i18n](../i18n/) package.
 
 ## Development
 

package/dist/components/Calendar/CalendarHeader.svelte

@@ -3,7 +3,8 @@
   import { Tooltip } from '../../primitives/Tooltip';
   import { Popover } from '../../primitives/Popover';
   import { SegmentGroup, SegmentItem } from '../../primitives/SegmentGroup';
-  import { Button } from '../../primitives/Button';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import CoreIconButton from '../../internal/core/CoreIconButton.svelte';
   import ChevronLeftIcon from '../../icons/ChevronLeftIcon.svelte';
   import ChevronRightIcon from '../../icons/ChevronRightIcon.svelte';
   import ChevronDownIcon from '../../icons/ChevronDownIcon.svelte';
@@ -125,18 +126,24 @@
     {@render children()}
   </div>
 {:else}
+  <!--
+    All header buttons render on the internal CoreIconButton (was `<Button
+    unstyled mint="none">`, which emitted only the call-site classes). The
+    core's plumbing overlaps the navButton slot's old baseline (inline-flex
+    centring, focus-visible reset, disabled opacity/cursor — now supplied by
+    the core, stripped from the slot); the deliberate deltas it introduces are
+    documented on the slot in calendar.variants.ts.
+  -->
   <div class={slot('header', className)} {...restProps}>
     <div class={slot('nav')}>
-      <Button
-        unstyled
-        mint="none"
+      <CoreIconButton
         class={slot('navButton')}
         onclick={() => ctx.navigate(-1)}
         disabled={!ctx.canGoBack || ctx.disabled}
         aria-label={prevLabel}
       >
         <ChevronLeftIcon size={navIconSize} />
-      </Button>
+      </CoreIconButton>
     </div>
 
     <div class="flex items-center gap-2">
@@ -162,40 +169,43 @@
         {/snippet}
         <div class="min-w-48 p-3">
           <div class="mb-2 flex items-center justify-between">
-            <Button
-              unstyled
-              mint="none"
+            <CoreIconButton
               class={slot('navButton')}
               onclick={() => pickerYear--}
               aria-label={bt('calendar.previousYear')}
             >
               <ChevronLeftIcon size={pickerIconSize} />
-            </Button>
+            </CoreIconButton>
             <span class="text-text-primary font-semibold tabular-nums">{pickerYear}</span>
-            <Button
-              unstyled
-              mint="none"
+            <CoreIconButton
               class={slot('navButton')}
               onclick={() => pickerYear++}
               aria-label={bt('calendar.nextYear')}
             >
               <ChevronRightIcon size={pickerIconSize} />
-            </Button>
+            </CoreIconButton>
           </div>
           <div class="grid grid-cols-3 gap-1">
             {#each months as m (m.index)}
-              <Button
-                unstyled
-                mint="none"
+              <!--
+                Text-labelled month cell on the same CoreIconButton as the nav
+                buttons (removes the last CalendarHeader→Button edge). The core
+                REQUIRES aria-label, so it gets the visible label — the accessible
+                name stays the identical string. Never rendered disabled (the
+                picker closes when the calendar is disabled), so the core's
+                disabled plumbing is inert here.
+              -->
+              <CoreIconButton
                 class="text-text-primary rounded-md px-2 py-1.5 text-sm transition-colors
                   {m.isCurrent
                   ? 'bg-primary-subtle ring-primary text-primary font-semibold ring-1'
                   : 'hover:bg-surface-hover'}
-                  focus-visible:ring-primary/50 focus-visible:ring-2 focus-visible:outline-none"
+                  focus-visible:ring-primary/50 focus-visible:ring-2"
                 onclick={() => selectMonth(m.index)}
+                aria-label={m.label}
               >
                 {m.label}
-              </Button>
+              </CoreIconButton>
             {/each}
           </div>
         </div>
@@ -221,29 +231,25 @@
 
       {#if showToday}
         <Tooltip label={bt('calendar.today')}>
-          <Button
-            unstyled
-            mint="none"
+          <CoreIconButton
             class="{slot('navButton')} ml-1"
             onclick={() => ctx.goToToday()}
             disabled={!ctx.canGoToToday || ctx.disabled}
             aria-label={bt('calendar.today')}
           >
             <CalendarIcon size={navIconSize} />
-          </Button>
+          </CoreIconButton>
         </Tooltip>
       {/if}
 
-      <Button
-        unstyled
-        mint="none"
+      <CoreIconButton
         class={slot('navButton')}
         onclick={() => ctx.navigate(1)}
         disabled={!ctx.canGoForward || ctx.disabled}
         aria-label={nextLabel}
       >
         <ChevronRightIcon size={navIconSize} />
-      </Button>
+      </CoreIconButton>
     </div>
   </div>
 {/if}

package/dist/components/Calendar/CalendarMiniMonth.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
-  import { Button } from '../../primitives/Button';
+  // internal core, not the public component — keeps the public-to-public import graph clean (see internal/core/)
+  import CoreIconButton from '../../internal/core/CoreIconButton.svelte';
   import { getCalendarContext, createSlotHelper } from './calendar.context';
   import {
     getMonthGrid,
@@ -118,27 +119,26 @@
 </script>
 
 <div class={slot('miniCalendar', className)}>
-  <!-- Mini header -->
+  <!-- Mini header. Nav buttons render on the internal CoreIconButton (was
+       `<Button unstyled mint="none">`); the plumbing/slot split is documented
+       on the miniCalendarNavButton slot in calendar.variants.ts. Never
+       disabled, so the core's disabled plumbing is inert here. -->
   <div class={slot('miniCalendarHeader')}>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={slot('miniCalendarNavButton')}
       onclick={() => navigateMini(-1)}
       aria-label={bt('calendar.previousMonth')}
     >
       ‹
-    </Button>
+    </CoreIconButton>
     <span class={slot('miniCalendarTitle')}>{miniTitle}</span>
-    <Button
-      unstyled
-      mint="none"
+    <CoreIconButton
       class={slot('miniCalendarNavButton')}
       onclick={() => navigateMini(1)}
       aria-label={bt('calendar.nextMonth')}
     >
       ›
-    </Button>
+    </CoreIconButton>
   </div>
 
   <!-- Weekday headers — narrow names duplicate in many locales (de-DE: M, D,

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

@@ -7,12 +7,23 @@ export const calendarVariants = tv({
         header: ['flex items-center justify-between', 'border-b border-border-hairline'],
         title: 'font-semibold text-text-primary select-none',
         nav: 'flex items-center gap-1',
+        // Rendered on the internal CoreIconButton (behaviour-only base: inline-flex
+        // centring, cursor/select affordance, focus-visible reset, disabled
+        // opacity/cursor/inertness), so this slot carries only the visual identity
+        // on top — the classes the core already supplies (inline-flex items-center
+        // justify-center, focus-visible:outline-none, disabled:opacity-50,
+        // disabled:cursor-not-allowed) are not repeated here. Deliberate deltas vs.
+        // the old `<Button unstyled mint="none">` render (which had NO plumbing):
+        // `cursor-pointer` (was the UA arrow — Tailwind 4 preflight doesn't set it;
+        // now consistent with every styled Button) and `disabled:pointer-events-none`
+        // (a disabled nav button is fully inert: no more hover-bg feedback or
+        // not-allowed cursor while disabled — matching the styled Button base).
+        // Mirrors planner.variants navButton. See internal/core/.
         navButton: [
-            'inline-flex items-center justify-center rounded-md',
+            'rounded-md',
             'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',
-            'disabled:opacity-50 disabled:cursor-not-allowed'
+            'focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2'
         ],
         // Grid
         grid: 'w-full',
@@ -131,11 +142,14 @@ export const calendarVariants = tv({
         miniCalendar: ['shrink-0 flex flex-col', 'border-r border-border-hairline'],
         miniCalendarHeader: 'flex items-center justify-between',
         miniCalendarTitle: 'font-semibold text-text-primary text-center select-none',
+        // Rendered on the internal CoreIconButton — same plumbing/slot split as
+        // `navButton` above (and the same deliberate cursor-pointer delta); these
+        // buttons are never disabled, so the disabled plumbing is inert.
         miniCalendarNavButton: [
-            'inline-flex items-center justify-center rounded-md',
+            'rounded-md',
             'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+            'focus-visible:ring-2 focus-visible:ring-primary/50'
         ],
         miniCalendarWeekday: 'text-center text-text-tertiary select-none font-medium',
         miniCalendarDay: [

package/dist/components/Chat/Chat/Chat.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { chatVariants } from './chat.variants';
+  import type { ChatProps } from './index';
+
+  let {
+    children,
+    header,
+    composer,
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: ChatProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const styles = chatVariants();
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Chat', preset, {}, slotClassesProp)
+  );
+
+  function cls(name: keyof typeof slotClasses, extra?: string | (string | undefined)[]) {
+    if (unstyled) {
+      const own = slotClasses?.[name];
+      return [own, ...(Array.isArray(extra) ? extra : [extra])].filter(Boolean).join(' ');
+    }
+    const slotFns = styles as Record<string, (args: { class?: unknown }) => string>;
+    return slotFns[name]({
+      class: [slotClasses?.[name], ...(Array.isArray(extra) ? extra : [extra])]
+    });
+  }
+</script>
+
+<div class={cls('root', className)} {...restProps}>
+  {#if header}
+    <div class={cls('header')}>
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class={cls('body')}>
+    {@render children?.()}
+  </div>
+
+  {#if composer}
+    <div class={cls('composer')}>
+      {@render composer()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { ChatProps } from './index.js';
+declare const Chat: import("svelte").Component<ChatProps, {}, "">;
+type Chat = ReturnType<typeof Chat>;
+export default Chat;

package/dist/components/Chat/Chat/chat.variants.d.ts

@@ -0,0 +1,20 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const chatVariants: ((props?: {} | undefined) => {
+    root: (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;
+    header: (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;
+    body: (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;
+    composer: (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;
+}) & {
+    readonly config: import("../../../utils/variants.js").TVConfig;
+};
+export type ChatVariants = VariantProps<typeof chatVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ChatSlots = SlotNames<typeof chatVariants>;

package/dist/components/Chat/Chat/chat.variants.js

@@ -0,0 +1,15 @@
+import { tv } from '../../../utils/variants.js';
+export const chatVariants = tv({
+    slots: {
+        // Fills its parent's height as a flex column. `min-h-0` is the discipline
+        // that lets the body child own the scroll instead of overflowing the page.
+        root: ['flex h-full min-h-0 w-full flex-col bg-surface-base'],
+        // Pinned header — never scrolls.
+        header: ['shrink-0 border-b border-border-subtle'],
+        // The conversation area. Flexes to fill and clamps to min-h-0 so its own
+        // scrollable child (ChatMessageList) can scroll; the container never does.
+        body: ['min-h-0 min-w-0 flex-1'],
+        // Pinned composer at the bottom.
+        composer: ['shrink-0 border-t border-border-subtle bg-surface-base']
+    }
+});

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChatSlots, ChatVariants } from './chat.variants.js';
+/**
+ * @description Thin full-height layout shell for a chat surface: an optional pinned
+ * `header` (border-b), the scrollable conversation area as `children` (the consumer
+ * drops a ChatMessageList here — the shell itself never scrolls, the body child does),
+ * and an optional pinned `composer` at the bottom (border-t, e.g. PromptInput). No
+ * state, no context, no provider — pure structure with `min-h-0` flex discipline so it
+ * fills its parent and hands scrolling to its body.
+ *
+ * @tag ai
+ * @tag layout
+ * @related ChatMessageList
+ * @related PromptInput
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <Chat>
+ *   {#snippet header()}<Toolbar>…</Toolbar>{/snippet}
+ *   <ChatMessageList {messages} />
+ *   {#snippet composer()}<PromptInput onSubmit={send} />{/snippet}
+ * </Chat>
+ * ```
+ */
+export interface ChatProps extends ChatVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** The scrollable conversation area — typically a ChatMessageList. */
+    children?: Snippet;
+    /** Optional pinned header rendered above the conversation (border-b). */
+    header?: Snippet;
+    /** Optional pinned composer rendered below the conversation (border-t) — e.g. PromptInput. */
+    composer?: Snippet;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: root | header | body | composer */
+    slotClasses?: Partial<Record<ChatSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Chat: {...} }}>`.
+     * Prefer this over `class` overrides for reusable custom looks.
+     */
+    preset?: string;
+}
+export { default as Chat } from './Chat.svelte';
+export { type ChatSlots, type ChatVariants, chatVariants } from './chat.variants.js';

package/dist/components/Chat/Chat/index.js

@@ -0,0 +1,2 @@
+export { default as Chat } from './Chat.svelte';
+export { chatVariants } from './chat.variants.js';