npm - @ecoma-io/loom - Versions diffs - 0.3.0 → 0.4.0 - Mend

@ecoma-io/loom 0.3.0 → 0.4.0

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 (398) hide show

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "./packages/core/src/cn.js";
 import { optional } from "./packages/core/src/props.js";
 import { useSplitAttrs } from "./packages/core/src/attrs.js";
-import { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, listStaggerDelay } from "./packages/core/src/motion.js";
+import { listStaggerDelay } from "./packages/core/src/motion.js";
 import { WCAG_TAGS } from "./packages/core/src/a11y-scope.js";
 import { themeScript, useTheme } from "./packages/core/src/theme.js";
 import { applyLoomIconDefaults } from "./packages/core/src/icon-defaults.js";
@@ -41,26 +41,40 @@ import "./packages/primitives/avatar/src/index.js";
 import { badgeVariants } from "./packages/primitives/badge/src/Badge.vue_vue_type_script_setup_true_lang.js";
 import Badge_default from "./packages/primitives/badge/src/Badge.js";
 import "./packages/primitives/badge/src/index.js";
+import { BREADCRUMB_LABELS } from "./packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js";
 import Breadcrumb_default from "./packages/primitives/breadcrumb/src/Breadcrumb.js";
 import "./packages/primitives/breadcrumb/src/index.js";
-import { buttonVariantClasses, buttonVariants } from "./packages/primitives/button/src/Button.vue_vue_type_script_setup_true_lang.js";
+import { buttonVariants } from "./packages/primitives/button/src/Button.vue_vue_type_script_setup_true_lang.js";
 import Button_default from "./packages/primitives/button/src/Button.js";
 import "./packages/primitives/button/src/index.js";
+import { iconButtonVariants } from "./packages/primitives/icon-button/src/IconButton.vue_vue_type_script_setup_true_lang.js";
+import IconButton_default from "./packages/primitives/icon-button/src/IconButton.js";
+import "./packages/primitives/icon-button/src/index.js";
+import { CAROUSEL_LABELS } from "./packages/primitives/carousel/src/Carousel.vue_vue_type_script_setup_true_lang.js";
+import Carousel_default from "./packages/primitives/carousel/src/Carousel.js";
+import "./packages/primitives/carousel/src/index.js";
+import Card_default from "./packages/primitives/card/src/Card.js";
+import "./packages/primitives/card/src/index.js";
 import { chipVariants } from "./packages/primitives/chip/src/Chip.vue_vue_type_script_setup_true_lang.js";
 import Chip_default from "./packages/primitives/chip/src/Chip.js";
 import "./packages/primitives/chip/src/index.js";
+import Collapse_default from "./packages/primitives/collapse/src/Collapse.js";
+import "./packages/primitives/collapse/src/index.js";
 import ContextMenu_default from "./packages/primitives/context-menu/src/ContextMenu.js";
 import "./packages/primitives/context-menu/src/index.js";
 import DropdownMenu_default from "./packages/primitives/dropdown-menu/src/DropdownMenu.js";
 import "./packages/primitives/dropdown-menu/src/index.js";
-import { iconButtonVariants } from "./packages/primitives/icon-button/src/IconButton.vue_vue_type_script_setup_true_lang.js";
-import IconButton_default from "./packages/primitives/icon-button/src/IconButton.js";
-import "./packages/primitives/icon-button/src/index.js";
 import InlineError_default from "./packages/primitives/inline-error/src/InlineError.js";
 import "./packages/primitives/inline-error/src/index.js";
+import { kbdVariants } from "./packages/primitives/kbd/src/Kbd.vue_vue_type_script_setup_true_lang.js";
+import Kbd_default from "./packages/primitives/kbd/src/Kbd.js";
+import "./packages/primitives/kbd/src/index.js";
 import { linkVariants } from "./packages/primitives/link/src/Link.vue_vue_type_script_setup_true_lang.js";
 import Link_default from "./packages/primitives/link/src/Link.js";
 import "./packages/primitives/link/src/index.js";
+import List_default from "./packages/primitives/list/src/List.js";
+import ListItem_default from "./packages/primitives/list/src/ListItem.js";
+import "./packages/primitives/list/src/index.js";
 import Menubar_default from "./packages/primitives/menubar/src/Menubar.js";
 import "./packages/primitives/menubar/src/index.js";
 import Popover_default from "./packages/primitives/popover/src/Popover.js";
@@ -71,6 +85,20 @@ import Tabs_default from "./packages/primitives/tabs/src/Tabs.js";
 import "./packages/primitives/tabs/src/index.js";
 import Tooltip_default from "./packages/primitives/tooltip/src/Tooltip.js";
 import "./packages/primitives/tooltip/src/index.js";
+import { TIMELINE_LABELS } from "./packages/primitives/timeline/src/Timeline.vue_vue_type_script_setup_true_lang.js";
+import Timeline_default from "./packages/primitives/timeline/src/Timeline.js";
+import TimelineItem_default from "./packages/primitives/timeline/src/TimelineItem.js";
+import "./packages/primitives/timeline/src/index.js";
+import { TABLE_LABELS } from "./packages/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js";
+import Table_default from "./packages/primitives/table/src/Table.js";
+import { tableRowVariants } from "./packages/primitives/table/src/TableRow.vue_vue_type_script_setup_true_lang.js";
+import TableRow_default from "./packages/primitives/table/src/TableRow.js";
+import TableHead_default from "./packages/primitives/table/src/TableHead.js";
+import TableCell_default from "./packages/primitives/table/src/TableCell.js";
+import "./packages/primitives/table/src/index.js";
+import { ALERT_LABELS } from "./packages/primitives/alert/src/Alert.vue_vue_type_script_setup_true_lang.js";
+import Alert_default from "./packages/primitives/alert/src/Alert.js";
+import "./packages/primitives/alert/src/index.js";
 import { ALERT_DIALOG_LABELS } from "./packages/primitives/alert-dialog/src/AlertDialog.vue_vue_type_script_setup_true_lang.js";
 import AlertDialog_default from "./packages/primitives/alert-dialog/src/AlertDialog.js";
 import "./packages/primitives/alert-dialog/src/index.js";
@@ -143,13 +171,16 @@ import "./packages/primitives/switch/src/index.js";
 import { TAGS_INPUT_LABELS } from "./packages/primitives/tags-input/src/TagsInput.vue_vue_type_script_setup_true_lang.js";
 import TagsInput_default from "./packages/primitives/tags-input/src/TagsInput.js";
 import "./packages/primitives/tags-input/src/index.js";
+import { TEXTAREA_LABELS } from "./packages/primitives/textarea/src/Textarea.vue_vue_type_script_setup_true_lang.js";
 import Textarea_default from "./packages/primitives/textarea/src/Textarea.js";
 import "./packages/primitives/textarea/src/index.js";
+import { TEXT_FIELD_LABELS } from "./packages/primitives/text-field/src/TextField.vue_vue_type_script_setup_true_lang.js";
 import TextField_default from "./packages/primitives/text-field/src/TextField.js";
 import "./packages/primitives/text-field/src/index.js";
 import TimePicker_default from "./packages/primitives/time-picker/src/TimePicker.js";
 import "./packages/primitives/time-picker/src/index.js";
 import { TOAST_LABELS } from "./packages/primitives/toast/src/ToastItem.vue_vue_type_script_setup_true_lang.js";
+import ToastItem_default from "./packages/primitives/toast/src/ToastItem.js";
 import Toast_default from "./packages/primitives/toast/src/Toast.js";
 import "./packages/primitives/toast/src/index.js";
 import { WINDOW_CONTROLS_LABELS } from "./packages/primitives/window-controls/src/WindowControls.vue_vue_type_script_setup_true_lang.js";
@@ -163,6 +194,7 @@ import Grid_default from "./packages/composition/grid/src/Grid.js";
 import "./packages/composition/grid/src/index.js";
 import Inline_default from "./packages/composition/inline/src/Inline.js";
 import "./packages/composition/inline/src/index.js";
+import { SCROLL_REEL_LABELS } from "./packages/composition/scroll-reel/src/ScrollReel.vue_vue_type_script_setup_true_lang.js";
 import ScrollReel_default from "./packages/composition/scroll-reel/src/ScrollReel.js";
 import "./packages/composition/scroll-reel/src/index.js";
 import Sidebar_default from "./packages/composition/sidebar/src/Sidebar.js";
@@ -215,4 +247,4 @@ import SidebarNav_default from "./packages/blocks/sidebar-nav/src/SidebarNav.js"
 import "./packages/blocks/sidebar-nav/src/index.js";
 import ToastStack_default from "./packages/blocks/toast-stack/src/ToastStack.js";
 import "./packages/blocks/toast-stack/src/index.js";
-export { ALERT_DIALOG_LABELS, AVATAR_GROUP_LABELS, Accordion_default as Accordion, AlertDialog_default as AlertDialog, AppHeader_default as AppHeader, AppShell_default as AppShell, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, Badge_default as Badge, Breadcrumb_default as Breadcrumb, Button_default as Button, CALENDAR_PANEL_LABELS, COLOR_PICKER_LABELS, COMBOBOX_LABELS, COUNT_LABELS, Center_default as Center, Centered_default as Centered, Checkbox_default as Checkbox, Chip_default as Chip, ColorPicker_default as ColorPicker, Combobox_default as Combobox, ContextMenu_default as ContextMenu, DATE_RANGE_LABELS, DATE_SEGMENT_LABELS, DATE_TIME_RANGE_LABELS, DIALOG_LABELS, DRAWER_LABELS, Dashboard_default as Dashboard, DashboardGrid_default as DashboardGrid, DatePicker_default as DatePicker, DateRangePicker_default as DateRangePicker, DateTimePicker_default as DateTimePicker, DateTimeRangePicker_default as DateTimeRangePicker, DesktopAppShell_default as DesktopAppShell, Dialog_default as Dialog, Drawer_default as Drawer, DropdownMenu_default as DropdownMenu, EDITABLE_LABELS, Editable_default as Editable, EmptyState_default as EmptyState, ErrorState_default as ErrorState, FILE_UPLOAD_LABELS, Field_default as Field, Fieldset_default as Fieldset, FileUpload_default as FileUpload, FormActions_default as FormActions, FormLayout_default as FormLayout, FormSection_default as FormSection, Frame_default as Frame, Grid_default as Grid, HoverCard_default as HoverCard, INDICATOR_LABELS, IconButton_default as IconButton, Indicator_default as Indicator, Inline_default as Inline, InlineError_default as InlineError, LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, Link_default as Link, LoadingState_default as LoadingState, MasterDetail_default as MasterDetail, Menubar_default as Menubar, MetricCard_default as MetricCard, NUMBER_FIELD_LABELS, NumberField_default as NumberField, OTP_INPUT_LABELS, OtpInput_default as OtpInput, PAGINATION_LABELS, PROGRESS_LABELS, PageHeader_default as PageHeader, Pagination_default as Pagination, Popover_default as Popover, Progress_default as Progress, RADIAL_PROGRESS_LABELS, RANGE_CELL_LABELS, RATING_LABELS, RadialProgress_default as RadialProgress, RadioGroup_default as RadioGroup, Rating_default as Rating, Reading_default as Reading, RowActions_default as RowActions, STEPPER_LABELS, ScrollArea_default as ScrollArea, ScrollReel_default as ScrollReel, SegmentedControl_default as SegmentedControl, Select_default as Select, Separator_default as Separator, Settings_default as Settings, Sidebar_default as Sidebar, SidebarNav_default as SidebarNav, Skeleton_default as Skeleton, Slider_default as Slider, SpeedDial_default as SpeedDial, Spinner_default as Spinner, Split_default as Split, SplitLayout_default as SplitLayout, Stack_default as Stack, Stepper_default as Stepper, Surface_default as Surface, Switch_default as Switch, TAGS_INPUT_LABELS, TIME_SEGMENT_LABELS, TOAST_LABELS, Tabs_default as Tabs, TagsInput_default as TagsInput, TextField_default as TextField, Textarea_default as Textarea, TimePicker_default as TimePicker, TitleBar_default as TitleBar, Toast_default as Toast, ToastStack_default as ToastStack, Tooltip_default as Tooltip, WCAG_TAGS, WINDOW_CONTROLS_LABELS, WindowControls_default as WindowControls, applyLoomIconDefaults, avatarVariants, badgeVariants, buttonVariantClasses, buttonVariants, chipVariants, cn, comboboxVariants, iconButtonVariants, indicatorToneVariants, indicatorVariants, linkVariants, listStaggerDelay, optional, paginationVariants, progressVariants, provideFieldContext, provideLoomLabels, radialProgressVariants, selectVariants, skeletonVariants, spinnerVariants, surfaceVariants, themeScript, useAncestorDisabled, useFieldControl, useLabels, useOuterFieldContext, useSplitAttrs, useTheme, warningWindow };
+export { ALERT_DIALOG_LABELS, ALERT_LABELS, AVATAR_GROUP_LABELS, Accordion_default as Accordion, Alert_default as Alert, AlertDialog_default as AlertDialog, AppHeader_default as AppHeader, AppShell_default as AppShell, Avatar_default as Avatar, AvatarGroup_default as AvatarGroup, BREADCRUMB_LABELS, Badge_default as Badge, Breadcrumb_default as Breadcrumb, Button_default as Button, CALENDAR_PANEL_LABELS, CAROUSEL_LABELS, COLOR_PICKER_LABELS, COMBOBOX_LABELS, COUNT_LABELS, Card_default as Card, Carousel_default as Carousel, Center_default as Center, Centered_default as Centered, Checkbox_default as Checkbox, Chip_default as Chip, Collapse_default as Collapse, ColorPicker_default as ColorPicker, Combobox_default as Combobox, ContextMenu_default as ContextMenu, DATE_RANGE_LABELS, DATE_SEGMENT_LABELS, DATE_TIME_RANGE_LABELS, DIALOG_LABELS, DRAWER_LABELS, Dashboard_default as Dashboard, DashboardGrid_default as DashboardGrid, DatePicker_default as DatePicker, DateRangePicker_default as DateRangePicker, DateTimePicker_default as DateTimePicker, DateTimeRangePicker_default as DateTimeRangePicker, DesktopAppShell_default as DesktopAppShell, Dialog_default as Dialog, Drawer_default as Drawer, DropdownMenu_default as DropdownMenu, EDITABLE_LABELS, Editable_default as Editable, EmptyState_default as EmptyState, ErrorState_default as ErrorState, FILE_UPLOAD_LABELS, Field_default as Field, Fieldset_default as Fieldset, FileUpload_default as FileUpload, FormActions_default as FormActions, FormLayout_default as FormLayout, FormSection_default as FormSection, Frame_default as Frame, Grid_default as Grid, HoverCard_default as HoverCard, INDICATOR_LABELS, IconButton_default as IconButton, Indicator_default as Indicator, Inline_default as Inline, InlineError_default as InlineError, Kbd_default as Kbd, Link_default as Link, List_default as List, ListItem_default as ListItem, LoadingState_default as LoadingState, MasterDetail_default as MasterDetail, Menubar_default as Menubar, MetricCard_default as MetricCard, NUMBER_FIELD_LABELS, NumberField_default as NumberField, OTP_INPUT_LABELS, OtpInput_default as OtpInput, PAGINATION_LABELS, PROGRESS_LABELS, PageHeader_default as PageHeader, Pagination_default as Pagination, Popover_default as Popover, Progress_default as Progress, RADIAL_PROGRESS_LABELS, RANGE_CELL_LABELS, RATING_LABELS, RadialProgress_default as RadialProgress, RadioGroup_default as RadioGroup, Rating_default as Rating, Reading_default as Reading, RowActions_default as RowActions, SCROLL_REEL_LABELS, STEPPER_LABELS, ScrollArea_default as ScrollArea, ScrollReel_default as ScrollReel, SegmentedControl_default as SegmentedControl, Select_default as Select, Separator_default as Separator, Settings_default as Settings, Sidebar_default as Sidebar, SidebarNav_default as SidebarNav, Skeleton_default as Skeleton, Slider_default as Slider, SpeedDial_default as SpeedDial, Spinner_default as Spinner, Split_default as Split, SplitLayout_default as SplitLayout, Stack_default as Stack, Stepper_default as Stepper, Surface_default as Surface, Switch_default as Switch, TABLE_LABELS, TAGS_INPUT_LABELS, TEXTAREA_LABELS, TEXT_FIELD_LABELS, TIMELINE_LABELS, TIME_SEGMENT_LABELS, TOAST_LABELS, Table_default as Table, TableCell_default as TableCell, TableHead_default as TableHead, TableRow_default as TableRow, Tabs_default as Tabs, TagsInput_default as TagsInput, TextField_default as TextField, Textarea_default as Textarea, TimePicker_default as TimePicker, Timeline_default as Timeline, TimelineItem_default as TimelineItem, TitleBar_default as TitleBar, Toast_default as Toast, ToastItem_default as ToastItem, ToastStack_default as ToastStack, Tooltip_default as Tooltip, WCAG_TAGS, WINDOW_CONTROLS_LABELS, WindowControls_default as WindowControls, applyLoomIconDefaults, avatarVariants, badgeVariants, buttonVariants, chipVariants, cn, comboboxVariants, iconButtonVariants, indicatorToneVariants, indicatorVariants, kbdVariants, linkVariants, listStaggerDelay, optional, paginationVariants, progressVariants, provideFieldContext, provideLoomLabels, radialProgressVariants, selectVariants, skeletonVariants, spinnerVariants, surfaceVariants, tableRowVariants, themeScript, useAncestorDisabled, useFieldControl, useLabels, useOuterFieldContext, useSplitAttrs, useTheme, warningWindow };

package/dist/packages/blocks/app-header/src/AppHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.js","names":[],"sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n \n - `PageHeader` — a surface's own pinned title band, sitting inside\n * the content area this bar sits above.\n * - `TitleBar` — the desktop window's native chrome (drag region, window\n * controls). This bar is browser content, not window furniture.\n \n Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for a leading control, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this block owns the strip's geometry and elevation, never its content or\n * behavior.\n \n The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n \n *Below `sm` the bar is two rows, and that is the point of this block's\n responsive behavior.** A brand, a real search field, and a leading control +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a block does not get to decide they need\n * it less on a phone.\n \n The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-` to the other regions.\n \n * Pinned, and separated by a hairline — never a shadow. It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls under it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n \n Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n \n Deliberately neutral: this is shell chrome shared by every user and every\n * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\n /\ndefineProps<{\n /* Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n ariaLabel?: string;\n}>();\n</script>\n\n<template>\n <header\n :aria-label=\"ariaLabel\"\n class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n >\n <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n <!-- @slot The product mark and name, leftmost. -->\n <slot name=\"brand\" />\n </div>\n\n <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n from `sm` up it rejoins the row and takes a cap so it never stretches\n into a banner on a wide canvas. -->\n <div\n v-if=\"$slots.search\"\n class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n >\n <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n <slot name=\"search\" />\n </div>\n\n <div\n v-if=\"$slots.leading \|\| $slots.notifications \|\| $slots.userMenu\"\n class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n >\n <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n <slot name=\"leading\" />\n <!-- @slot The notifications trigger, between the leading control and the account menu. -->\n <slot name=\"notifications\" />\n <!-- @slot The account menu, trailing the cluster. -->\n <slot name=\"userMenu\" />\n </div>\n </header>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"AppHeader.js","names":[],"sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n \n - `PageHeader` — a surface's own pinned title band, sitting inside\n * the content area this bar sits above.\n * - `TitleBar` — the desktop window's native chrome (drag region, window\n * controls). This bar is browser content, not window furniture.\n \n Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for a leading control, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this block owns the strip's geometry and elevation, never its content or\n * behavior.\n \n The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n \n *Below `sm` the bar is two rows, and that is the point of this block's\n responsive behavior.** A brand, a real search field, and a leading control +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a block does not get to decide they need\n * it less on a phone.\n \n The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-` to the other regions.\n \n * Pinned, and separated by a hairline — never a shadow. It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls under it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n \n Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n \n Deliberately neutral: this is shell chrome shared by every user and every\n * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\n /\ndefineProps<{\n /* Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n ariaLabel?: string;\n}>();\n</script>\n\n<template>\n <!-- `data-loom-app-header` is the hook `global.css` uses to add the\n safe-area inset to the bar's top padding (the same vendor-rule pattern\n as `[data-loom-titlebar]`): a PWA under a notch or a title-bar overlay\n must not paint its first row into reserved space. -->\n <header\n data-loom-app-header=\"\"\n :aria-label=\"ariaLabel\"\n class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n >\n <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n <!-- @slot The product mark and name, leftmost. -->\n <slot name=\"brand\" />\n </div>\n\n <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n from `sm` up it rejoins the row and takes a cap so it never stretches\n into a banner on a wide canvas. -->\n <div\n v-if=\"$slots.search\"\n class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n >\n <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n <slot name=\"search\" />\n </div>\n\n <div\n v-if=\"$slots.leading \|\| $slots.notifications \|\| $slots.userMenu\"\n class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n >\n <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n <slot name=\"leading\" />\n <!-- @slot The notifications trigger, between the leading control and the account menu. -->\n <slot name=\"notifications\" />\n <!-- @slot The account menu, trailing the cluster. -->\n <slot name=\"userMenu\" />\n </div>\n </header>\n</template>\n"],"mappings":""}

package/dist/packages/blocks/app-header/src/AppHeader.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"names":[],"mappings":"~~AAoGA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,KAAK,WAAW,GAAG;IACjB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;~~AAyFF~~,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACpG,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"names":[],"mappings":"AAyGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,KAAK,WAAW,GAAG;IACjB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0FF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACpG,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/blocks/app-header/src/AppHeader.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -75,6 +75,7 @@ var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", {
+				"data-loom-app-header": "",
 				"aria-label": __props.ariaLabel,
 				class: "sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8"
 			}, [

package/dist/packages/blocks/app-header/src/AppHeader.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n \n - `PageHeader` — a surface's own pinned title band, sitting inside\n * the content area this bar sits above.\n * - `TitleBar` — the desktop window's native chrome (drag region, window\n * controls). This bar is browser content, not window furniture.\n \n Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for a leading control, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this block owns the strip's geometry and elevation, never its content or\n * behavior.\n \n The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n \n *Below `sm` the bar is two rows, and that is the point of this block's\n responsive behavior.** A brand, a real search field, and a leading control +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a block does not get to decide they need\n * it less on a phone.\n \n The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-` to the other regions.\n \n * Pinned, and separated by a hairline — never a shadow. It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls under it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n \n Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n \n Deliberately neutral: this is shell chrome shared by every user and every\n * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\n /\ndefineProps<{\n /* Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n ariaLabel?: string;\n}>();\n</script>\n\n<template>\n <header\n :aria-label=\"ariaLabel\"\n class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n >\n <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n <!-- @slot The product mark and name, leftmost. -->\n <slot name=\"brand\" />\n </div>\n\n <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n from `sm` up it rejoins the row and takes a cap so it never stretches\n into a banner on a wide canvas. -->\n <div\n v-if=\"$slots.search\"\n class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n >\n <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n <slot name=\"search\" />\n </div>\n\n <div\n v-if=\"$slots.leading \|\| $slots.notifications \|\| $slots.userMenu\"\n class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n >\n <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n <slot name=\"leading\" />\n <!-- @slot The notifications trigger, between the leading control and the account menu. -->\n <slot name=\"notifications\" />\n <!-- @slot The account menu, trailing the cluster. -->\n <slot name=\"userMenu\" />\n </div>\n </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GAgEE~~,OAAA,UAAA,GAAA,~~mBA+BS~~,UAAA;~~IA9BN~~,cAAY,QAAA;IACb,OAAM;;IAEKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOfA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAIhBA,KAAAA,OAAO,WAAWA,KAAAA,OAAO,iBAAiBA,KAAAA,OAAO,YADzD,UAAA,GAAA,mBAUM,OAVN,YAUM;KALJ,WAAuB,KAAA,QAAA,SAAA;KAEvB,WAA6B,KAAA,QAAA,eAAA;KAE7B,WAAwB,KAAA,QAAA,UAAA"}
1	+ {"version":3,"file":"AppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/app-header/src/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n \n - `PageHeader` — a surface's own pinned title band, sitting inside\n * the content area this bar sits above.\n * - `TitleBar` — the desktop window's native chrome (drag region, window\n * controls). This bar is browser content, not window furniture.\n \n Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for a leading control, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this block owns the strip's geometry and elevation, never its content or\n * behavior.\n \n The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n \n *Below `sm` the bar is two rows, and that is the point of this block's\n responsive behavior.** A brand, a real search field, and a leading control +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a block does not get to decide they need\n * it less on a phone.\n \n The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-` to the other regions.\n \n * Pinned, and separated by a hairline — never a shadow. It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls under it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n \n Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n \n Deliberately neutral: this is shell chrome shared by every user and every\n * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\n /\ndefineProps<{\n /* Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n ariaLabel?: string;\n}>();\n</script>\n\n<template>\n <!-- `data-loom-app-header` is the hook `global.css` uses to add the\n safe-area inset to the bar's top padding (the same vendor-rule pattern\n as `[data-loom-titlebar]`): a PWA under a notch or a title-bar overlay\n must not paint its first row into reserved space. -->\n <header\n data-loom-app-header=\"\"\n :aria-label=\"ariaLabel\"\n class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n >\n <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n <!-- @slot The product mark and name, leftmost. -->\n <slot name=\"brand\" />\n </div>\n\n <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n from `sm` up it rejoins the row and takes a cap so it never stretches\n into a banner on a wide canvas. -->\n <div\n v-if=\"$slots.search\"\n class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n >\n <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n <slot name=\"search\" />\n </div>\n\n <div\n v-if=\"$slots.leading \|\| $slots.notifications \|\| $slots.userMenu\"\n class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n >\n <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n <slot name=\"leading\" />\n <!-- @slot The notifications trigger, between the leading control and the account menu. -->\n <slot name=\"notifications\" />\n <!-- @slot The account menu, trailing the cluster. -->\n <slot name=\"userMenu\" />\n </div>\n </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEE,OAAA,UAAA,GAAA,mBAgCS,UAAA;IA/BP,wBAAqB;IACpB,cAAY,QAAA;IACb,OAAM;;IAEKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOfA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAIhBA,KAAAA,OAAO,WAAWA,KAAAA,OAAO,iBAAiBA,KAAAA,OAAO,YADzD,UAAA,GAAA,mBAUM,OAVN,YAUM;KALJ,WAAuB,KAAA,QAAA,SAAA;KAEvB,WAA6B,KAAA,QAAA,eAAA;KAE7B,WAAwB,KAAA,QAAA,UAAA"}

package/dist/packages/blocks/desktop-app-shell/src/DesktopAppShell.vue.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
+import { type WindowControlsLabels } from "../../../primitives/window-controls/src/index";
 /**
  * DesktopAppShell — the ready-made layout a desktop (Electron/Tauri) app
  * reaches for. It composes TitleBar, a sidebar, and a content area into a
@@ -20,8 +20,8 @@ import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
  * Every TitleBar event is re-emitted so the host wires its own window bridge;
  * the shell itself owns no IPC.
  */
-import type { MenubarMenu } from "@ecoma-io/loom-menubar";
-import type { WindowPlatform } from "@ecoma-io/loom-window-controls";
+import type { MenubarMenu } from "../../../primitives/menubar/src/index";
+import type { WindowPlatform } from "../../../primitives/window-controls/src/index";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/packages/blocks/metric-card/src/MetricCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n \n The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n \n Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n /\nexport type MetricCardTrend = \"up\" \| \"down\" \| \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\~~ndefineProps~~<{\n /* The metric value — a formatted string or number the host has already\n * localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n * formatted by the card; the host owns formatting so the same value\n * can be \"$42k\" in one place and \"42,000\" in another. /\n value: string \| number;\n /* What the metric measures — always shown. /\n label: string;\n /* Direction of change. When absent, no trend indicator is rendered. /\n trend?: MetricCardTrend;\n /* The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n * is also provided; a magnitude with no direction has no meaning. */\n trendValue?: string;\n}>();\n</script>\n\n<template>\n <div :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n <!-- Decorative icon — hidden from assistive tech because the label and\n value already carry the metric's meaning. -->\n <div\n v-if=\"$slots.icon\"\n aria-hidden=\"true\"\n class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n >\n <slot name=\"icon\" />\n </div>\n <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n <div class=\"flex items-baseline gap-1.5\">\n ~~<span~~ ~~class=\"~~text-2xl font-semibold tracking-tight text-foreground\">\n {{ value }}\n </span>\n <span\n v-if=\"trend\"\n :class=\"\n cn('inline-flex items-center gap-0.5 text-small font-medium', {\n 'text-success-text': trend === 'up',\n 'text-destructive-text': trend === 'down',\n 'text-muted-foreground': trend === 'flat',\n })\n \"\n >\n <!-- Up arrow: a single upward stroke with a chevron head. -->\n <svg\n v-if=\"trend === 'up'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 2v8M3 5l3-3 3 3\" />\n </svg>\n <!-- Down arrow: a single downward stroke with a chevron head. -->\n <svg\n v-else-if=\"trend === 'down'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 10V2M3 7l3 3 3-3\" />\n </svg>\n <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n arrow at this size reads as a minus sign or a separator. -->\n <span v-else aria-hidden=\"true\">—</span>\n <span v-if=\"trendValue\">{{ trendValue }}</span>\n </span>\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n \n The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n \n Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n /\nexport type MetricCardTrend = \"up\" \| \"down\" \| \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n /* The metric value — a formatted string or number the host has already\n * localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n * formatted by the card; the host owns formatting so the same value\n * can be \"$42k\" in one place and \"42,000\" in another. Optional only\n * while `loading`. /\n value?: string \| number;\n /* What the metric measures — always shown. /\n label: string;\n /* Direction of change. When absent, no trend indicator is rendered. /\n trend?: MetricCardTrend;\n /* The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n * is also provided; a magnitude with no direction has no meaning. /\n trendValue?: string;\n /* Context line under the value row — a period, a comparison base. /\n description?: string;\n /\n Renders the label and value as Skeleton placeholders sized to the real\n * layout, so the card keeps its height and does not reflow when data\n * lands.\n */\n loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n if (!props.loading && props.value === undefined) {\n console.warn(\n \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n );\n }\n});\n</script>\n\n<template>\n <div :aria-busy=\"loading \|\| undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n <!-- Decorative icon — hidden from assistive tech because the label and\n value already carry the metric's meaning. -->\n <div\n v-if=\"$slots.icon\"\n aria-hidden=\"true\"\n class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n >\n <slot name=\"icon\" />\n </div>\n <!-- Loading keeps the card's height by sizing each placeholder to the\n row it stands in for — a single generic bar would let the value\n land with a jolt. aria-hidden pairs with the parent's own\n aria-busy below. -->\n <template v-if=\"loading\">\n <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n <div class=\"flex items-baseline gap-1.5\">\n <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n </div>\n </template>\n <template v-else>\n <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n <div class=\"flex items-baseline gap-1.5\">\n <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n tracking-tight`: the named rung is near-parity with that stack\n (1.5rem, weight 600) by design, and composing it here meant the KPI\n drifted silently if the scale ever moved. The two real deltas are\n deliberate — letter-spacing slackens from tight's −0.025em to the\n heading rung's −0.01em, and the line-height comes down to 1.2 —\n both invisible on a single baseline row like this one. -->\n <span class=\"text-heading text-foreground\">\n {{ value }}\n </span>\n <span\n v-if=\"trend\"\n :class=\"\n cn('inline-flex items-center gap-0.5 text-small font-medium', {\n 'text-success-text': trend === 'up',\n 'text-destructive-text': trend === 'down',\n 'text-muted-foreground': trend === 'flat',\n })\n \"\n >\n <!-- Up arrow: a single upward stroke with a chevron head. -->\n <svg\n v-if=\"trend === 'up'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 2v8M3 5l3-3 3 3\" />\n </svg>\n <!-- Down arrow: a single downward stroke with a chevron head. -->\n <svg\n v-else-if=\"trend === 'down'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 10V2M3 7l3 3 3-3\" />\n </svg>\n <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n arrow at this size reads as a minus sign or a separator. -->\n <span v-else aria-hidden=\"true\">—</span>\n <span v-if=\"trendValue\">{{ trendValue }}</span>\n </span>\n </div>\n <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n {{ description }}\n </p>\n </template>\n </div>\n</template>\n"],"mappings":""}

package/dist/packages/blocks/metric-card/src/MetricCard.vue.d.ts CHANGED Viewed

@@ -26,8 +26,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The metric value — a formatted string or number the host has already
      *  localised (e.g. "1,234", "98.5%", "$42k"). Raw numbers are not
      *  formatted by the card; the host owns formatting so the same value
-     *  can be "$42k" in one place and "42,000" in another. */
-    value: string | number;
+     *  can be "$42k" in one place and "42,000" in another. Optional only
+     *  while `loading`. */
+    value?: string | number;
     /** What the metric measures — always shown. */
     label: string;
     /** Direction of change. When absent, no trend indicator is rendered. */
@@ -35,12 +36,21 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The trend magnitude (e.g. "+12.5%", "-3.2%"). Shown only when `trend`
      *  is also provided; a magnitude with no direction has no meaning. */
     trendValue?: string;
+    /** Context line under the value row — a period, a comparison base. */
+    description?: string;
+    /**
+     * Renders the label and value as Skeleton placeholders sized to the real
+     * layout, so the card keeps its height and does not reflow when data
+     * lands.
+     */
+    loading?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The metric value — a formatted string or number the host has already
      *  localised (e.g. "1,234", "98.5%", "$42k"). Raw numbers are not
      *  formatted by the card; the host owns formatting so the same value
-     *  can be "$42k" in one place and "42,000" in another. */
-    value: string | number;
+     *  can be "$42k" in one place and "42,000" in another. Optional only
+     *  while `loading`. */
+    value?: string | number;
     /** What the metric measures — always shown. */
     label: string;
     /** Direction of change. When absent, no trend indicator is rendered. */
@@ -48,6 +58,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The trend magnitude (e.g. "+12.5%", "-3.2%"). Shown only when `trend`
      *  is also provided; a magnitude with no direction has no meaning. */
     trendValue?: string;
+    /** Context line under the value row — a period, a comparison base. */
+    description?: string;
+    /**
+     * Renders the label and value as Skeleton placeholders sized to the real
+     * layout, so the card keeps its height and does not reflow when data
+     * lands.
+     */
+    loading?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 }>;

package/dist/packages/blocks/metric-card/src/MetricCard.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricCard.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"names":[],"mappings":"~~AA4GA~~;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;wBAChC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB~~;;;8DAG0D~~;~~WACnD~~,MAAM,GAAG,MAAM;~~IACtB~~,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;;~~IAXnB;;;8DAG0D~~;~~WACnD~~,MAAM,GAAG,MAAM;~~IACtB~~,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;;~~WAgHV~~,CAAC,KAAK,IAAgB,KAAK,GAAG;EASrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"MetricCard.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"names":[],"mappings":"AAyJA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;wBAChC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB;;;;2BAIuB;YACf,MAAM,GAAG,MAAM;IACvB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;IACnB,sEAAsE;kBACxD,MAAM;IACpB;;;;OAIG;cACO,OAAO;;IApBjB;;;;2BAIuB;YACf,MAAM,GAAG,MAAM;IACvB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;IACnB,sEAAsE;kBACxD,MAAM;IACpB;;;;OAIG;cACO,OAAO;;WA0KR,CAAC,KAAK,IAAgB,KAAK,GAAG;EASrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/blocks/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,16 +1,20 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import Skeleton_default from "../../../primitives/skeleton/src/Skeleton.js";
+import "../../../primitives/skeleton/src/index.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, watchEffect } from "vue";
 //#region packages/blocks/metric-card/src/MetricCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["aria-busy"];
+var _hoisted_2 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4"
 };
-var _hoisted_2 = { class: "text-small text-muted-foreground" };
 var _hoisted_3 = { class: "flex items-baseline gap-1.5" };
-var _hoisted_4 = { class: "text-2xl font-semibold tracking-tight text-foreground" };
-var _hoisted_5 = {
+var _hoisted_4 = { class: "text-small text-muted-foreground" };
+var _hoisted_5 = { class: "flex items-baseline gap-1.5" };
+var _hoisted_6 = { class: "text-heading text-foreground" };
+var _hoisted_7 = {
 	key: 0,
 	class: "inline h-3 w-3",
 	viewBox: "0 0 12 12",
@@ -19,7 +23,7 @@ var _hoisted_5 = {
 	"stroke-width": "2",
 	"aria-hidden": "true"
 };
-var _hoisted_6 = {
+var _hoisted_8 = {
 	key: 1,
 	class: "inline h-3 w-3",
 	viewBox: "0 0 12 12",
@@ -28,33 +32,52 @@ var _hoisted_6 = {
 	"stroke-width": "2",
 	"aria-hidden": "true"
 };
-var _hoisted_7 = {
+var _hoisted_9 = {
 	key: 2,
 	"aria-hidden": "true"
 };
-var _hoisted_8 = { key: 3 };
+var _hoisted_10 = { key: 3 };
+var _hoisted_11 = {
+	key: 0,
+	class: "mt-1 text-small text-muted-foreground"
+};
 var MetricCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "MetricCard",
 	props: {
 		value: {},
 		label: {},
 		trend: {},
-		trendValue: {}
+		trendValue: {},
+		description: {},
+		loading: { type: Boolean }
 	},
 	setup(__props) {
+		const props = __props;
+		watchEffect(() => {
+			if (!props.loading && props.value === void 0) console.warn("[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.");
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4")) }, [
-				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
-				createElementVNode("p", _hoisted_2, toDisplayString(__props.label), 1),
-				createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(__props.value), 1), __props.trend ? (openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock("div", {
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4"))
+			}, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), __props.loading ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "mb-2 h-3 w-20"
+			}), createElementVNode("div", _hoisted_3, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "h-7 w-24"
+			})])], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+				createElementVNode("p", _hoisted_4, toDisplayString(__props.label), 1),
+				createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.value), 1), __props.trend ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(unref(cn)("inline-flex items-center gap-0.5 text-small font-medium", {
 						"text-success-text": __props.trend === "up",
 						"text-destructive-text": __props.trend === "down",
 						"text-muted-foreground": __props.trend === "flat"
 					}))
-				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_7, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)])
-			], 2);
+				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_9, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)]),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+			], 64))], 10, _hoisted_1);
 		};
 	}
 });

package/dist/packages/blocks/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n \n The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n \n Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n /\nexport type MetricCardTrend = \"up\" \| \"down\" \| \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\~~ndefineProps~~<{\n /* The metric value — a formatted string or number the host has already\n * localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n * formatted by the card; the host owns formatting so the same value\n * can be \"$42k\" in one place and \"42,000\" in another. /\n value: string \| number;\n /* What the metric measures — always shown. /\n label: string;\n /* Direction of change. When absent, no trend indicator is rendered. /\n trend?: MetricCardTrend;\n /* The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n * is also provided; a magnitude with no direction has no meaning. */\n trendValue?: string;\n}>();\n</script>\n\n<template>\n <div :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n <!-- Decorative icon — hidden from assistive tech because the label and\n value already carry the metric's meaning. -->\n <div\n v-if=\"$slots.icon\"\n aria-hidden=\"true\"\n class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n >\n <slot name=\"icon\" />\n </div>\n <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n <div class=\"flex items-baseline gap-1.5\">\n ~~<span~~ ~~class=\"~~text-2xl font-semibold tracking-tight text-foreground\">\n {{ value }}\n </span>\n <span\n v-if=\"trend\"\n :class=\"\n cn('inline-flex items-center gap-0.5 text-small font-medium', {\n 'text-success-text': trend === 'up',\n 'text-destructive-text': trend === 'down',\n 'text-muted-foreground': trend === 'flat',\n })\n \"\n >\n <!-- Up arrow: a single upward stroke with a chevron head. -->\n <svg\n v-if=\"trend === 'up'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 2v8M3 5l3-3 3 3\" />\n </svg>\n <!-- Down arrow: a single downward stroke with a chevron head. -->\n <svg\n v-else-if=\"trend === 'down'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 10V2M3 7l3 3 3-3\" />\n </svg>\n <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n arrow at this size reads as a minus sign or a separator. -->\n <span v-else aria-hidden=\"true\">—</span>\n <span v-if=\"trendValue\">{{ trendValue }}</span>\n </span>\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CE~~,OAAA,UAAA,GAAA,~~mBAuDM~~,OAAA,~~EAvDA~~,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA,~~EAAA~~,~~GAAA;IAILA~~,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;~~IAEtB~~,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,~~mBA2CM~~,~~OA3CN~~,~~YA2CM~~,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,~~eAAa~~,MAAA,EAAA,CAAE,CAAA,2DAAA;~~MAA+F~~,qBAAA,QAAA,UAAK;~~MAAgD~~,yBAAA,QAAA,UAAK;~~MAAkD~~,yBAAA,QAAA,UAAK;;~~IAU7N~~,GAAA,CAAA,QAAA,UAAK,QADb,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+B,QAAA,EAAzB,GAAE,qBAAoB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAIjB,QAAA,UAAK,UADlB,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAI/B,UAAA,GAAA,mBAA8C,QAA9C,YAAgC,GAAO,IAC3B,QAAA,cAAZ,UAAA,GAAA,mBAA+C,QAAA,~~YAAA~~,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"MetricCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n \n The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n \n Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n /\nexport type MetricCardTrend = \"up\" \| \"down\" \| \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n /* The metric value — a formatted string or number the host has already\n * localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n * formatted by the card; the host owns formatting so the same value\n * can be \"$42k\" in one place and \"42,000\" in another. Optional only\n * while `loading`. /\n value?: string \| number;\n /* What the metric measures — always shown. /\n label: string;\n /* Direction of change. When absent, no trend indicator is rendered. /\n trend?: MetricCardTrend;\n /* The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n * is also provided; a magnitude with no direction has no meaning. /\n trendValue?: string;\n /* Context line under the value row — a period, a comparison base. /\n description?: string;\n /\n Renders the label and value as Skeleton placeholders sized to the real\n * layout, so the card keeps its height and does not reflow when data\n * lands.\n */\n loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n if (!props.loading && props.value === undefined) {\n console.warn(\n \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n );\n }\n});\n</script>\n\n<template>\n <div :aria-busy=\"loading \|\| undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n <!-- Decorative icon — hidden from assistive tech because the label and\n value already carry the metric's meaning. -->\n <div\n v-if=\"$slots.icon\"\n aria-hidden=\"true\"\n class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n >\n <slot name=\"icon\" />\n </div>\n <!-- Loading keeps the card's height by sizing each placeholder to the\n row it stands in for — a single generic bar would let the value\n land with a jolt. aria-hidden pairs with the parent's own\n aria-busy below. -->\n <template v-if=\"loading\">\n <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n <div class=\"flex items-baseline gap-1.5\">\n <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n </div>\n </template>\n <template v-else>\n <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n <div class=\"flex items-baseline gap-1.5\">\n <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n tracking-tight`: the named rung is near-parity with that stack\n (1.5rem, weight 600) by design, and composing it here meant the KPI\n drifted silently if the scale ever moved. The two real deltas are\n deliberate — letter-spacing slackens from tight's −0.025em to the\n heading rung's −0.01em, and the line-height comes down to 1.2 —\n both invisible on a single baseline row like this one. -->\n <span class=\"text-heading text-foreground\">\n {{ value }}\n </span>\n <span\n v-if=\"trend\"\n :class=\"\n cn('inline-flex items-center gap-0.5 text-small font-medium', {\n 'text-success-text': trend === 'up',\n 'text-destructive-text': trend === 'down',\n 'text-muted-foreground': trend === 'flat',\n })\n \"\n >\n <!-- Up arrow: a single upward stroke with a chevron head. -->\n <svg\n v-if=\"trend === 'up'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 2v8M3 5l3-3 3 3\" />\n </svg>\n <!-- Down arrow: a single downward stroke with a chevron head. -->\n <svg\n v-else-if=\"trend === 'down'\"\n class=\"inline h-3 w-3\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 10V2M3 7l3 3 3-3\" />\n </svg>\n <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n arrow at this size reads as a minus sign or a separator. -->\n <span v-else aria-hidden=\"true\">—</span>\n <span v-if=\"trendValue\">{{ trendValue }}</span>\n </span>\n </div>\n <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n {{ description }}\n </p>\n </template>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EA0Bd,kBAAkB;GAChB,IAAI,CAAC,MAAM,WAAW,MAAM,UAAU,KAAA,GACpC,QAAQ,KACN,0FACF;EAEJ,CAAC;;GAIC,OAAA,UAAA,GAAA,mBA6EM,OAAA;IA7EA,aAAW,QAAA,WAAW,KAAA;IAAY,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA;GAIvCA,GAAAA,CAAAA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAMN,QAAA,WAAhB,UAAA,GAAA,mBAKW,UAAA,EAAA,KAAA,EAAA,GAAA,CAJT,YAAiD,MAAA,gBAAA,GAAA;IAAvC,SAAQ;IAAO,OAAM;GAC/B,CAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,YAA4C,MAAA,gBAAA,GAAA;IAAlC,SAAQ;IAAO,OAAM;GAGnC,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAAA,mBAwDW,UAAA,EAAA,KAAA,EAAA,GAAA;IAvDT,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,mBAkDM,OAlDN,YAkDM,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,2DAAA;MAAiG,qBAAA,QAAA,UAAK;MAAkD,yBAAA,QAAA,UAAK;MAAoD,yBAAA,QAAA,UAAK;;IAUrO,GAAA,CAAA,QAAA,UAAK,QADb,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+B,QAAA,EAAzB,GAAE,qBAAoB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAIjB,QAAA,UAAK,UADlB,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAI/B,UAAA,GAAA,mBAA8C,QAA9C,YAAgC,GAAO,IAC3B,QAAA,cAAZ,UAAA,GAAA,mBAA+C,QAAA,aAAA,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAGhC,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,aAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/blocks/title-bar/src/TitleBar.vue.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
+import { type WindowControlsLabels } from "../../../primitives/window-controls/src/index";
 /**
  * TitleBar — a desktop app's custom window chrome (a block: composed from
  * primitives, domain-aware, but still presentational). Layout:
@@ -19,8 +19,8 @@ import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
  * the brand cluster shifts right to leave room for the native traffic-light
  * buttons, and WindowControls renders nothing (the OS owns those buttons).
  */
-import type { MenubarMenu } from "@ecoma-io/loom-menubar";
-import type { WindowPlatform } from "@ecoma-io/loom-window-controls";
+import type { MenubarMenu } from "../../../primitives/menubar/src/index";
+import type { WindowPlatform } from "../../../primitives/window-controls/src/index";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/packages/blocks/toast-stack/src/ToastStack.vue.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import { type ToastLabels } from "@ecoma-io/loom-toast";
-import type { ToastVariant } from "@ecoma-io/loom-toast";
+import { type LabelOverrides } from "../../../labels/src/index";
+import { type ToastLabels } from "../../../primitives/toast/src/index";
+import type { ToastVariant } from "../../../primitives/toast/src/index";
 /** One entry of a host-owned toast queue, rendered by `ToastStack`. */
 export interface ToastStackItem {
     readonly id: string | number;

package/dist/packages/composition/scroll-reel/src/ScrollReel.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import ScrollReel_vue_vue_type_script_setup_true_lang_default, { gapClass, snapClass } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
+import ScrollReel_vue_vue_type_script_setup_true_lang_default, { SCROLL_REEL_LABELS, gapClass, snapClass } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
 //#region packages/composition/scroll-reel/src/ScrollReel.vue
 var ScrollReel_default = ScrollReel_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { ScrollReel_default as default, gapClass, snapClass };
+export { SCROLL_REEL_LABELS, ScrollReel_default as default, gapClass, snapClass };
 //# sourceMappingURL=ScrollReel.js.map

package/dist/packages/composition/scroll-reel/src/ScrollReel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollReel.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n ScrollReel — horizontal scrolling strip with scroll-snap.\n \n A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n \n A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n /\nexport type ScrollReelSnap = \"start\" \| \"center\" \| \"end\" \| \"none\";\n\nexport type ScrollReelGap = \"sm\" \| \"md\" \| \"lg\";\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n start: \"snap-x snap-mandatory snap-start\",\n center: \"snap-x snap-mandatory snap-center\",\n end: \"snap-x snap-mandatory snap-end\",\n // `none` means no snap alignment — items scroll freely.\n none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n sm: \"gap-2 sm:gap-3\",\n md: \"gap-3 sm:gap-4\",\n lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\~~nwithDefaults~~(\n defineProps<{\n /* Scroll-snap alignment. \"none\" disables snap entirely. /\n snap?: ScrollReelSnap;\n /* Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. /\n gap?: ScrollReelGap;\n }>(),\n { snap: \"start\", gap: \"md\" },\n);\n\nconst reel = ref<HTMLDivElement \| null>(null);\n\n/\n Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n const el = reel.value;\n if (!el) return;\n\n const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n event.preventDefault();\n\n if (event.key === \"Home\") {\n el.scrollTo({ left: 0, behavior: ~~\"smooth\"~~ });\n return;\n }\n if (event.key === \"End\") {\n el.scrollTo({ left: el.scrollWidth, behavior: ~~\"smooth\"~~ });\n return;\n }\n\n // Find the next snap-aligned child in the scroll direction.\n const children = [...el.children] as HTMLElement[];\n const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n for (const child of direction === 1 ? children : children.reverse()) {\n const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n if (isNext) {\n child.scrollIntoView({ behavior~~: \"smooth\"~~, block: \"nearest\", inline: \"start\" });\n break;\n }\n }\n}\n</script>\n\n<template>\n <!-- `role=\"region\"` + `tabindex=\"0\"` + ~~`aria-label`~~ make this a named,\n focusable landmark region. The keyboard handler is what makes the\n scroll-snap strip navigable by arrow keys — a genuine interaction on\n a genuinely interactive element. The rule does not account for\n non-interactive ARIA roles with an explicit tabindex. -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <div\n ref=\"reel\"\n class=\"overflow-x-auto\"\n :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n tabindex=\"0\"\n role=\"region\"\n aria-label=\"~~Scrollable content~~\"\n @keydown=\"onKeydown\"\n >\n <slot />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ScrollReel.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n ScrollReel — horizontal scrolling strip with scroll-snap.\n \n A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n \n A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n /\nexport type ScrollReelSnap = \"start\" \| \"center\" \| \"end\" \| \"none\";\n\nexport type ScrollReelGap = \"sm\" \| \"md\" \| \"lg\";\n\n/\n Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it. The type itself lives in the\n * labels registry (`ScrollReelLabels`) like every other slot's, so\n * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as\n * it reaches every primitive — composition sits above labels in the layer\n * direction, and a host localising one reel should not have to learn a\n * second seam to do it.\n /\nexport const SCROLL_REEL_LABELS: ScrollReelLabels = {\n region: \"Scrollable content\",\n};\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n start: \"snap-x snap-mandatory snap-start\",\n center: \"snap-x snap-mandatory snap-center\",\n end: \"snap-x snap-mandatory snap-end\",\n // `none` means no snap alignment — items scroll freely.\n none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n sm: \"gap-2 sm:gap-3\",\n md: \"gap-3 sm:gap-4\",\n lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides, type ScrollReelLabels } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n defineProps<{\n /* Scroll-snap alignment. \"none\" disables snap entirely. /\n snap?: ScrollReelSnap;\n /* Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. /\n gap?: ScrollReelGap;\n /\n Names for what the reel says out loud, as any subset of\n * `ScrollReelLabels` — the per-instance correction over\n * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop\n * takes.\n /\n labels?: LabelOverrides<ScrollReelLabels>;\n }>(),\n { snap: \"start\", gap: \"md\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves (own prop, then the host vocabulary from `provideLoomLabels`, then\n// these English defaults), and a template reading the raw prop would be\n// reading the overrides rather than the answer.\nconst text = useLabels(\"scrollReel\", SCROLL_REEL_LABELS, () => props.labels);\n\nconst reel = ref<HTMLDivElement \| null>(null);\n\n// The reduced-motion softening lives in core (`smoothScrollBehavior`): an\n// explicit `\"smooth\"` in a scrollTo dictionary overrides the stylesheet's\n// kill-switch, so the question has to be answered at the call site — and\n// Carousel asks it too, which is why the answer is shared rather than owned.\nconst scrollBehavior = smoothScrollBehavior;\n\n/\n Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n const el = reel.value;\n if (!el) return;\n\n const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n event.preventDefault();\n\n const behavior = scrollBehavior();\n if (event.key === \"Home\") {\n el.scrollTo({ left: 0, behavior });\n return;\n }\n if (event.key === \"End\") {\n el.scrollTo({ left: el.scrollWidth, behavior });\n return;\n }\n\n // Find the next snap-aligned child in the scroll direction.\n const children = [...el.children] as HTMLElement[];\n const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n for (const child of direction === 1 ? children : children.reverse()) {\n const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n if (isNext) {\n child.scrollIntoView({ behavior, block: \"nearest\", inline: \"start\" });\n break;\n }\n }\n}\n</script>\n\n<template>\n <!-- `role=\"region\"` + `tabindex=\"0\"` + an accessible name make this a named,\n focusable landmark region. The keyboard handler is what makes the\n scroll-snap strip navigable by arrow keys — a genuine interaction on\n a genuinely interactive element. The rule does not account for\n non-interactive ARIA roles with an explicit tabindex. -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <div\n ref=\"reel\"\n class=\"overflow-x-auto\"\n :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n tabindex=\"0\"\n role=\"region\"\n :aria-label=\"text.region\"\n @keydown=\"onKeydown\"\n >\n <slot />\n </div>\n</template>\n"],"mappings":""}

package/dist/packages/composition/scroll-reel/src/ScrollReel.vue.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { type LabelOverrides, type ScrollReelLabels } from "../../../labels/src/index";
 /**
  * ScrollReel — horizontal scrolling strip with scroll-snap.
  *
@@ -13,6 +14,17 @@
  */
 export type ScrollReelSnap = "start" | "center" | "end" | "none";
 export type ScrollReelGap = "sm" | "md" | "lg";
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it,
+ * and exported so a host can build a partial vocabulary against the real
+ * thing rather than a transcription of it. The type itself lives in the
+ * labels registry (`ScrollReelLabels`) like every other slot's, so
+ * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as
+ * it reaches every primitive — composition sits above labels in the layer
+ * direction, and a host localising one reel should not have to learn a
+ * second seam to do it.
+ */
+export declare const SCROLL_REEL_LABELS: ScrollReelLabels;
 declare const snapClass: Record<ScrollReelSnap, string>;
 declare const gapClass: Record<ScrollReelGap, string>;
 export { snapClass, gapClass };
@@ -23,11 +35,25 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     snap?: ScrollReelSnap;
     /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
     gap?: ScrollReelGap;
+    /**
+     * Names for what the reel says out loud, as any subset of
+     * `ScrollReelLabels` — the per-instance correction over
+     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop
+     * takes.
+     */
+    labels?: LabelOverrides<ScrollReelLabels>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** Scroll-snap alignment. "none" disables snap entirely. */
     snap?: ScrollReelSnap;
     /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
     gap?: ScrollReelGap;
+    /**
+     * Names for what the reel says out loud, as any subset of
+     * `ScrollReelLabels` — the per-instance correction over
+     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop
+     * takes.
+     */
+    labels?: LabelOverrides<ScrollReelLabels>;
 }> & Readonly<{}>, {
     gap: ScrollReelGap;
     snap: ScrollReelSnap;