@almadar/ui 4.51.15 → 4.52.0

package/dist/components/molecules/CalendarGrid.d.ts

@@ -14,6 +14,12 @@ export interface CalendarEvent {
     endTime?: string | Date;
     color?: string;
 }
+/**
+ * Number of day columns rendered at once. Matches the responsiveness-
+ * audit tiers exactly: 1 day on mobile (≤640), 3 on tablet (641–1024),
+ * 7 on laptop+ (≥1025).
+ */
+export type CalendarDayWindow = 1 | 3 | 7;
 export interface CalendarGridProps {
     /** Start of the week (defaults to current week's Monday) */
     weekStart?: Date;
@@ -40,8 +46,15 @@ export interface CalendarGridProps {
     swipeLeftEvent?: EventEmit<Record<string, never>>;
     /** Event emitted on swipe right (prev week): UI:{swipeRightEvent} */
     swipeRightEvent?: EventEmit<Record<string, never>>;
+    /**
+     * Override the viewport-driven day window. `'auto'` (default) tracks
+     * `window.innerWidth` — 1 day on mobile, 3 on tablet, 7 on laptop+.
+     * Pass an explicit number to force a fixed window (useful for print
+     * layouts or screenshot tests).
+     */
+    dayWindow?: CalendarDayWindow | 'auto';
 }
-export declare function CalendarGrid({ weekStart, timeSlots, events, onSlotClick, onDayClick, onEventClick, className, longPressEvent, longPressPayload, swipeLeftEvent, swipeRightEvent, }: CalendarGridProps): React.JSX.Element;
+export declare function CalendarGrid({ weekStart, timeSlots, events, onSlotClick, onDayClick, onEventClick, className, longPressEvent, longPressPayload, swipeLeftEvent, swipeRightEvent, dayWindow, }: CalendarGridProps): React.JSX.Element;
 export declare namespace CalendarGrid {
     var displayName: string;
 }

package/dist/components/molecules/SidePanel.d.ts

@@ -24,8 +24,13 @@ export interface SidePanelProps {
      */
     onClose: () => void;
     /**
-     * Panel width
-     * @default 'w-96'
+     * Panel width as Tailwind class string. Default fills the viewport on
+     * mobile and snaps to `w-96` (384 px) at `sm:` and above so phones
+     * don't lose content to a fixed 384 px column. Consumers passing a
+     * custom value should include a `w-full` mobile fallback in the same
+     * string (e.g. `"w-full sm:w-[480px]"`) — Tailwind's JIT can't see
+     * dynamically-concatenated class names.
+     * @default 'w-full sm:w-96'
      */
     width?: string;
     /**

package/dist/components/molecules/Tabs.d.ts

@@ -8,8 +8,16 @@ import React from 'react';
 import type { LucideIcon } from 'lucide-react';
 import type { EventEmit } from '@almadar/core';
 export interface TabItem {
-    /** Tab ID */
-    id: string;
+    /**
+     * Tab ID. Optional — schema-driven callers may pass `value` instead;
+     * it gets normalized to `id` at the call boundary.
+     */
+    id?: string;
+    /**
+     * Alternative key when `id` isn't set. Used by `.orb` schema-driven
+     * call sites that emit `{ value, label }` for tab items.
+     */
+    value?: string;
     /** Tab label */
     label: string;
     /** Tab content - optional for event-driven tabs */

package/dist/components/molecules/avl/avl-preview-types.d.ts

@@ -10,15 +10,36 @@
 import type { Expression, UISlot } from '@almadar/core';
 /** The two navigation levels of the FlowCanvas. */
 export type ViewLevel = 'overview' | 'expanded';
-/** Screen size preset for OrbPreview rendering inside nodes. */
-export type ScreenSize = 'mobile' | 'tablet' | 'desktop';
-/** Width for each screen size preset. Height is auto (expands to fit content). */
+/**
+ * Screen size preset for OrbPreview rendering inside nodes.
+ *
+ * Aligned with the four-breakpoint responsiveness audit:
+ *   mobile  — phone portrait  (≤640px)
+ *   tablet  — iPad / small landscape (641–1024px)
+ *   laptop  — 13–15" notebook (1025–1440px)
+ *   wide    — desktop / monitor (≥1441px)
+ *
+ * Preset widths are representative viewport widths within each range; the
+ * preview renders at exactly this width so the embedded UI experiences
+ * the same media-query / container-query behavior it would at the real
+ * viewport. `minHeight` only floors the preview frame; vertical sizing is
+ * content-driven (BrowserPlayground height="auto").
+ */
+export type ScreenSize = 'mobile' | 'tablet' | 'laptop' | 'wide';
 export declare const SCREEN_SIZE_PRESETS: Record<ScreenSize, {
     width: number;
     minHeight: number;
     label: string;
     icon: string;
 }>;
+/**
+ * Map a raw viewport width (px) to the nearest preset. Used by FlowCanvas
+ * to auto-pick the default ScreenSize based on the user's actual canvas
+ * pane width on mount + on window resize. The breakpoint edges match the
+ * responsiveness-audit tiers exactly (640 / 1024 / 1440) so what the
+ * preview renders matches the tier the audit graded against.
+ */
+export declare function detectScreenSize(viewportWidth: number): ScreenSize;
 /**
  * An interactive element inside a render-ui pattern that fires an event.
  * For example, a button with `event: "CHECKOUT"` is an event source.