From 76dd3e9d6617f58da2f40edcc5d5c80d190fed04 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 5 Jun 2026 05:08:02 +0200 Subject: [PATCH] refactor(uix): consolidate id library into $active-uix/id (createId + useId) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Finishes the move started in 9f007a84, which left the `id` concern split across TWO folders (createId in soma/id, useId in active-uix/id) — worse than one library, and the right call you pushed for. Both functions now live in a single `$active-uix/id`; `soma/id` is deleted. + src/uix/active-uix/id/{create-id,use-id,index}.ts (one authority) ~ 441 soma imports repointed: relative ../../id and ../../../id -> $active-uix/id - src/uix/soma/id/ (removed) ~ COMPONENT_GUIDE / README examples updated createId (wraps $props.id(), SSR/ARIA ids) and useId (client-only counter) sit together; any UIX layer — soma, eidos, demos, apps — shares one id authority without coupling to soma. Output format unchanged (`soma-{component}-{n}`) -> zero behavior change. `npm run check` 0 errors; accordion (createId+useId) verified on a fresh dev server, console clean. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/uix/active-uix/id/create-id.ts | 20 ++++++++++++++ src/uix/active-uix/id/index.ts | 26 ++----------------- src/uix/active-uix/id/use-id.ts | 18 +++++++++++++ src/uix/soma/COMPONENT_GUIDE.md | 2 +- src/uix/soma/README.md | 2 +- .../components/accordion-content.svelte | 2 +- .../components/accordion-header.svelte | 2 +- .../components/accordion-item.svelte | 3 +-- .../components/accordion-trigger.svelte | 2 +- .../accordion/components/accordion.svelte | 2 +- .../components/alert-dialog-action.svelte | 2 +- .../components/alert-dialog-cancel.svelte | 2 +- .../components/alert-dialog.svelte | 2 +- .../components/announce-region.svelte | 2 +- .../announce/components/announce.svelte | 2 +- .../components/breadcrumb-ellipsis.svelte | 2 +- .../components/breadcrumb-item.svelte | 2 +- .../components/breadcrumb-link.svelte | 2 +- .../components/breadcrumb-list.svelte | 2 +- .../components/breadcrumb-separator.svelte | 2 +- .../breadcrumb/components/breadcrumb.svelte | 2 +- .../button/components/button-spinner.svelte | 2 +- .../button/components/button.svelte | 2 +- .../calendar/components/calendar-cell.svelte | 2 +- .../calendar/components/calendar-day.svelte | 2 +- .../components/calendar-grid-body.svelte | 2 +- .../components/calendar-grid-head.svelte | 2 +- .../components/calendar-grid-row.svelte | 2 +- .../calendar/components/calendar-grid.svelte | 2 +- .../components/calendar-head-cell.svelte | 2 +- .../components/calendar-header.svelte | 2 +- .../components/calendar-heading.svelte | 2 +- .../components/calendar-month-select.svelte | 2 +- .../components/calendar-next-button.svelte | 2 +- .../components/calendar-prev-button.svelte | 2 +- .../components/calendar-year-select.svelte | 2 +- .../calendar/components/calendar.svelte | 2 +- .../carousel-indicator-group.svelte | 2 +- .../components/carousel-indicator.svelte | 2 +- .../components/carousel-item-group.svelte | 2 +- .../carousel/components/carousel-item.svelte | 2 +- .../components/carousel-next-trigger.svelte | 2 +- .../components/carousel-prev-trigger.svelte | 2 +- .../components/carousel-viewport.svelte | 2 +- .../carousel/components/carousel.svelte | 2 +- .../components/checkbox-group-label.svelte | 2 +- .../checkbox/components/checkbox-group.svelte | 2 +- .../components/checkbox-hidden-input.svelte | 2 +- .../components/checkbox-indicator.svelte | 2 +- .../checkbox/components/checkbox.svelte | 2 +- .../components/clipboard-indicator.svelte | 2 +- .../components/clipboard-trigger.svelte | 2 +- .../clipboard/components/clipboard.svelte | 2 +- .../components/collapsible-content.svelte | 2 +- .../components/collapsible-trigger.svelte | 2 +- .../collapsible/components/collapsible.svelte | 2 +- .../color-field-format-select.svelte | 2 +- .../color-field-hidden-input.svelte | 2 +- .../components/color-field-input.svelte | 2 +- .../components/color-field-label.svelte | 2 +- .../components/color-field-segment.svelte | 2 +- .../color-field/components/color-field.svelte | 2 +- .../color-picker-area-background.svelte | 2 +- .../components/color-picker-area-thumb.svelte | 2 +- .../components/color-picker-area.svelte | 2 +- .../color-picker-channel-slider.svelte | 2 +- .../components/color-picker-control.svelte | 2 +- .../color-picker-eye-dropper.svelte | 2 +- .../color-picker-hidden-input.svelte | 2 +- .../components/color-picker-label.svelte | 2 +- .../color-picker-swatch-group.svelte | 2 +- .../color-picker-swatch-indicator.svelte | 2 +- .../color-picker-swatch-trigger.svelte | 2 +- .../components/color-picker-swatch.svelte | 2 +- .../color-picker-transparency-grid.svelte | 2 +- .../components/color-picker-trigger.svelte | 2 +- .../color-picker-value-swatch.svelte | 2 +- .../components/color-picker-value-text.svelte | 2 +- .../components/color-picker.svelte | 2 +- .../combobox/components/combobox-arrow.svelte | 2 +- .../components/combobox-clear-button.svelte | 2 +- .../components/combobox-content.svelte | 2 +- .../components/combobox-group-heading.svelte | 2 +- .../combobox/components/combobox-group.svelte | 2 +- .../combobox/components/combobox-input.svelte | 2 +- .../combobox/components/combobox-item.svelte | 2 +- .../combobox-selected-tag-remove.svelte | 2 +- .../components/combobox-selected-tag.svelte | 2 +- .../components/combobox-selected-tags.svelte | 2 +- .../components/combobox-separator.svelte | 2 +- .../components/combobox-trigger.svelte | 2 +- .../components/combobox-viewport.svelte | 2 +- .../combobox/components/combobox.svelte | 2 +- .../command/components/command-empty.svelte | 2 +- .../components/command-group-heading.svelte | 2 +- .../components/command-group-items.svelte | 2 +- .../command/components/command-group.svelte | 2 +- .../command/components/command-input.svelte | 2 +- .../command/components/command-item.svelte | 2 +- .../components/command-link-item.svelte | 2 +- .../command/components/command-list.svelte | 2 +- .../command/components/command-loading.svelte | 2 +- .../components/command-separator.svelte | 2 +- .../components/command-viewport.svelte | 2 +- .../command/components/command.svelte | 2 +- .../components/context-menu-arrow.svelte | 2 +- .../context-menu-checkbox-item.svelte | 2 +- .../components/context-menu-content.svelte | 2 +- .../context-menu-group-heading.svelte | 2 +- .../components/context-menu-group.svelte | 2 +- .../components/context-menu-item.svelte | 2 +- .../context-menu-radio-group.svelte | 2 +- .../components/context-menu-radio-item.svelte | 2 +- .../components/context-menu-separator.svelte | 2 +- .../context-menu-sub-content.svelte | 2 +- .../context-menu-sub-trigger.svelte | 2 +- .../components/context-menu-trigger.svelte | 2 +- .../components/context-menu.svelte | 2 +- .../components/date-field-input.svelte | 2 +- .../components/date-field-label.svelte | 2 +- .../components/date-field-segment.svelte | 2 +- .../date-field/components/date-field.svelte | 2 +- .../components/date-picker-calendar.svelte | 2 +- .../components/date-picker-trigger.svelte | 2 +- .../date-picker/components/date-picker.svelte | 2 +- .../components/date-range-field-input.svelte | 2 +- .../components/date-range-field-label.svelte | 2 +- .../components/date-range-field.svelte | 2 +- .../date-range-picker-calendar.svelte | 2 +- .../date-range-picker-trigger.svelte | 2 +- .../components/date-range-picker.svelte | 2 +- .../dialog/components/dialog-close.svelte | 2 +- .../dialog/components/dialog-content.svelte | 2 +- .../components/dialog-description.svelte | 2 +- .../dialog/components/dialog-overlay.svelte | 2 +- .../dialog/components/dialog-title.svelte | 2 +- .../dialog/components/dialog-trigger.svelte | 2 +- .../dialog/components/dialog.svelte | 2 +- .../components/drag-drop-draggable.svelte | 2 +- .../components/drag-drop-droppable.svelte | 2 +- .../components/drag-drop-preview.svelte | 2 +- .../drag-drop/components/drag-drop.svelte | 2 +- .../drawer/components/drawer-close.svelte | 2 +- .../drawer/components/drawer-content.svelte | 2 +- .../components/drawer-description.svelte | 2 +- .../drawer/components/drawer-handle.svelte | 2 +- .../drawer/components/drawer-overlay.svelte | 2 +- .../drawer/components/drawer-title.svelte | 2 +- .../drawer/components/drawer-trigger.svelte | 2 +- .../drawer/components/drawer.svelte | 2 +- .../components/dropdown-menu-arrow.svelte | 2 +- .../dropdown-menu-checkbox-item.svelte | 2 +- .../components/dropdown-menu-content.svelte | 2 +- .../dropdown-menu-group-heading.svelte | 2 +- .../components/dropdown-menu-group.svelte | 2 +- .../components/dropdown-menu-item.svelte | 2 +- .../dropdown-menu-radio-group.svelte | 2 +- .../dropdown-menu-radio-item.svelte | 2 +- .../components/dropdown-menu-separator.svelte | 2 +- .../dropdown-menu-sub-content.svelte | 2 +- .../dropdown-menu-sub-trigger.svelte | 2 +- .../components/dropdown-menu-trigger.svelte | 2 +- .../components/dropdown-menu.svelte | 2 +- .../editable/components/editable-area.svelte | 2 +- .../components/editable-cancel-trigger.svelte | 2 +- .../components/editable-control.svelte | 2 +- .../components/editable-edit-trigger.svelte | 2 +- .../components/editable-hidden-input.svelte | 2 +- .../editable/components/editable-input.svelte | 2 +- .../components/editable-preview.svelte | 2 +- .../components/editable-submit-trigger.svelte | 2 +- .../editable/components/editable.svelte | 2 +- .../feed-article-description.svelte | 2 +- .../feed/components/feed-article-title.svelte | 2 +- .../feed/components/feed-article.svelte | 2 +- .../feed/components/feed-sentinel.svelte | 2 +- .../feed/components/feed-thread.svelte | 2 +- .../components/feed/components/feed.svelte | 2 +- .../field/components/field-control.svelte | 2 +- .../field/components/field-error-text.svelte | 2 +- .../field/components/field-helper-text.svelte | 2 +- .../field/components/field-input.svelte | 2 +- .../field/components/field-label.svelte | 2 +- .../field-optional-indicator.svelte | 2 +- .../field/components/field-prefix.svelte | 2 +- .../field-required-indicator.svelte | 2 +- .../field/components/field-suffix.svelte | 2 +- .../components/field/components/field.svelte | 2 +- .../file-upload-clear-trigger.svelte | 2 +- .../components/file-upload-dropzone.svelte | 2 +- .../components/file-upload-file-list.svelte | 2 +- .../file-upload-hidden-input.svelte | 2 +- .../components/file-upload-item-name.svelte | 2 +- .../file-upload-item-preview.svelte | 2 +- .../file-upload-item-progress.svelte | 2 +- .../components/file-upload-item-remove.svelte | 2 +- .../components/file-upload-item-size.svelte | 2 +- .../components/file-upload-item.svelte | 2 +- .../components/file-upload-label.svelte | 2 +- .../components/file-upload-trigger.svelte | 2 +- .../file-upload/components/file-upload.svelte | 2 +- .../form/components/form-error-summary.svelte | 2 +- .../form/components/form-reset.svelte | 2 +- .../form/components/form-submit.svelte | 2 +- .../components/form/components/form.svelte | 2 +- .../components/grid-list-cell.svelte | 2 +- .../grid-list/components/grid-list-row.svelte | 2 +- .../grid-list-selection-checkbox.svelte | 2 +- .../grid-list/components/grid-list.svelte | 2 +- .../components/link-preview-arrow.svelte | 2 +- .../components/link-preview-content.svelte | 2 +- .../components/link-preview-trigger.svelte | 2 +- .../components/link-preview.svelte | 2 +- .../components/listbox-group-label.svelte | 2 +- .../listbox/components/listbox-group.svelte | 2 +- .../components/listbox-item-indicator.svelte | 2 +- .../listbox/components/listbox-item.svelte | 2 +- .../listbox/components/listbox.svelte | 2 +- .../menubar/components/menubar-trigger.svelte | 2 +- .../menubar/components/menubar.svelte | 2 +- .../meter/components/meter-indicator.svelte | 2 +- .../components/meter/components/meter.svelte | 2 +- .../components/month-grid-cell.svelte | 2 +- .../components/month-grid-grid.svelte | 2 +- .../components/month-grid-header.svelte | 2 +- .../components/month-grid-heading.svelte | 2 +- .../components/month-grid-next-button.svelte | 2 +- .../components/month-grid-prev-button.svelte | 2 +- .../month-grid/components/month-grid.svelte | 2 +- .../components/navigation-menu-content.svelte | 2 +- .../navigation-menu-indicator.svelte | 2 +- .../components/navigation-menu-item.svelte | 2 +- .../components/navigation-menu-link.svelte | 2 +- .../components/navigation-menu-list.svelte | 2 +- .../components/navigation-menu-trigger.svelte | 2 +- .../components/navigation-menu.svelte | 2 +- .../number-field-decrement-trigger.svelte | 2 +- .../number-field-increment-trigger.svelte | 2 +- .../components/number-field-input.svelte | 2 +- .../components/number-field-scrubber.svelte | 2 +- .../components/number-field.svelte | 2 +- .../components/pagination-ellipsis.svelte | 2 +- .../pagination-first-trigger.svelte | 2 +- .../components/pagination-item.svelte | 2 +- .../components/pagination-last-trigger.svelte | 2 +- .../components/pagination-next-trigger.svelte | 2 +- .../components/pagination-prev-trigger.svelte | 2 +- .../pagination/components/pagination.svelte | 2 +- .../password-field-caps-lock-indicator.svelte | 2 +- .../components/password-field-input.svelte | 2 +- .../password-field-strength-meter.svelte | 2 +- .../password-field-visibility-trigger.svelte | 2 +- .../components/password-field.svelte | 2 +- .../components/picker-shell.svelte | 2 +- .../components/pin-input-cell.svelte | 2 +- .../pin-input/components/pin-input.svelte | 2 +- .../popover/components/popover-anchor.svelte | 2 +- .../popover/components/popover-arrow.svelte | 2 +- .../popover/components/popover-close.svelte | 2 +- .../popover/components/popover-content.svelte | 2 +- .../components/popover-description.svelte | 2 +- .../popover/components/popover-overlay.svelte | 2 +- .../popover/components/popover-title.svelte | 2 +- .../popover/components/popover-trigger.svelte | 2 +- .../popover/components/popover.svelte | 2 +- .../components/progress-indicator.svelte | 2 +- .../progress/components/progress-label.svelte | 2 +- .../components/progress-value-text.svelte | 2 +- .../progress/components/progress.svelte | 2 +- .../radio-group-hidden-input.svelte | 2 +- .../components/radio-group-indicator.svelte | 2 +- .../components/radio-group-item.svelte | 2 +- .../components/radio-group-label.svelte | 2 +- .../radio-group/components/radio-group.svelte | 2 +- .../components/range-calendar-cell.svelte | 2 +- .../components/range-calendar-day.svelte | 2 +- .../range-calendar-grid-body.svelte | 2 +- .../range-calendar-grid-head.svelte | 2 +- .../components/range-calendar-grid-row.svelte | 2 +- .../components/range-calendar-grid.svelte | 2 +- .../range-calendar-head-cell.svelte | 2 +- .../components/range-calendar-header.svelte | 2 +- .../components/range-calendar-heading.svelte | 2 +- .../range-calendar-month-select.svelte | 2 +- .../range-calendar-next-button.svelte | 2 +- .../range-calendar-prev-button.svelte | 2 +- .../range-calendar-year-select.svelte | 2 +- .../components/range-calendar.svelte | 2 +- .../components/rating-group-item.svelte | 2 +- .../components/rating-group.svelte | 2 +- .../components/scroll-area-corner.svelte | 2 +- .../components/scroll-area-scrollbar.svelte | 2 +- .../components/scroll-area-thumb.svelte | 2 +- .../components/scroll-area-viewport.svelte | 2 +- .../scroll-area/components/scroll-area.svelte | 2 +- .../search-field-clear-trigger.svelte | 2 +- .../components/search-field-icon.svelte | 2 +- .../components/search-field-input.svelte | 2 +- .../search-field-loading-indicator.svelte | 2 +- .../components/search-field.svelte | 2 +- .../select/components/select-arrow.svelte | 2 +- .../select/components/select-content.svelte | 2 +- .../components/select-group-heading.svelte | 2 +- .../select/components/select-group.svelte | 2 +- .../components/select-item-description.svelte | 2 +- .../select/components/select-item.svelte | 2 +- .../select/components/select-separator.svelte | 2 +- .../select/components/select-trigger.svelte | 2 +- .../select/components/select-value.svelte | 2 +- .../select/components/select-viewport.svelte | 2 +- .../select/components/select.svelte | 2 +- .../slider/components/slider-range.svelte | 2 +- .../slider/components/slider-thumb.svelte | 2 +- .../slider/components/slider-tick.svelte | 2 +- .../slider/components/slider.svelte | 2 +- .../splitter/components/splitter-panel.svelte | 2 +- .../components/splitter-resize-trigger.svelte | 2 +- .../splitter/components/splitter.svelte | 2 +- .../stepper-completed-content.svelte | 2 +- .../stepper/components/stepper-content.svelte | 2 +- .../components/stepper-indicator.svelte | 2 +- .../stepper/components/stepper-item.svelte | 2 +- .../stepper/components/stepper-list.svelte | 2 +- .../components/stepper-next-trigger.svelte | 2 +- .../components/stepper-prev-trigger.svelte | 2 +- .../components/stepper-separator.svelte | 2 +- .../stepper/components/stepper-trigger.svelte | 2 +- .../stepper/components/stepper.svelte | 2 +- .../switch/components/switch-thumb.svelte | 2 +- .../switch/components/switch.svelte | 2 +- .../table/components/table-body.svelte | 2 +- .../table/components/table-cell.svelte | 2 +- .../components/table-column-header.svelte | 2 +- .../table/components/table-footer.svelte | 2 +- .../table/components/table-header.svelte | 2 +- .../table-row-detail-trigger.svelte | 2 +- .../table/components/table-row-detail.svelte | 2 +- .../table/components/table-row.svelte | 2 +- .../components/table-sort-trigger.svelte | 2 +- .../components/table/components/table.svelte | 2 +- .../tabs/components/tabs-content.svelte | 2 +- .../tabs/components/tabs-indicator.svelte | 2 +- .../tabs/components/tabs-list.svelte | 2 +- .../tabs/components/tabs-trigger.svelte | 2 +- .../components/tabs/components/tabs.svelte | 2 +- .../components/tag-group-item.svelte | 2 +- .../components/tag-group-label.svelte | 2 +- .../components/tag-group-link.svelte | 2 +- .../components/tag-group-remove-button.svelte | 2 +- .../tag-group/components/tag-group.svelte | 2 +- .../tags-input-clear-trigger.svelte | 2 +- .../components/tags-input-control.svelte | 2 +- .../components/tags-input-input.svelte | 2 +- .../tags-input-item-delete-trigger.svelte | 2 +- .../components/tags-input-item-text.svelte | 2 +- .../components/tags-input-item.svelte | 2 +- .../tags-input/components/tags-input.svelte | 2 +- .../textarea/components/textarea-count.svelte | 2 +- .../textarea/components/textarea-input.svelte | 2 +- .../textarea/components/textarea.svelte | 2 +- .../components/time-field-hidden-input.svelte | 2 +- .../components/time-field-input.svelte | 2 +- .../components/time-field-label.svelte | 2 +- .../components/time-field-segment.svelte | 2 +- .../time-field/components/time-field.svelte | 2 +- .../components/time-picker-clock.svelte | 2 +- .../time-picker-day-period-toggle.svelte | 2 +- .../components/time-picker-hour-slider.svelte | 2 +- .../time-picker-minute-slider.svelte | 2 +- .../time-picker-second-slider.svelte | 2 +- .../components/time-picker-trigger.svelte | 2 +- .../time-picker/components/time-picker.svelte | 2 +- .../components/time-range-field-input.svelte | 2 +- .../components/time-range-field-label.svelte | 2 +- .../components/time-range-field.svelte | 2 +- .../components/time-range-picker-clock.svelte | 2 +- ...time-range-picker-day-period-toggle.svelte | 2 +- .../time-range-picker-hour-slider.svelte | 2 +- .../time-range-picker-minute-slider.svelte | 2 +- .../time-range-picker-second-slider.svelte | 2 +- .../time-range-picker-trigger.svelte | 2 +- .../components/time-range-picker.svelte | 2 +- .../toast/components/toast-action.svelte | 2 +- .../toast/components/toast-close.svelte | 2 +- .../toast/components/toast-description.svelte | 2 +- .../toast/components/toast-item.svelte | 2 +- .../toast/components/toast-main.svelte | 2 +- .../toast/components/toast-status.svelte | 2 +- .../toast/components/toast-title.svelte | 2 +- .../toast/components/toast-viewport.svelte | 2 +- .../components/toast/components/toast.svelte | 2 +- .../components/toggle-group-item.svelte | 2 +- .../components/toggle-group.svelte | 2 +- .../toggle/components/toggle.svelte | 2 +- .../toolbar/components/toolbar-button.svelte | 2 +- .../components/toolbar-group-item.svelte | 2 +- .../toolbar/components/toolbar-group.svelte | 2 +- .../toolbar/components/toolbar-link.svelte | 2 +- .../components/toolbar-separator.svelte | 2 +- .../toolbar/components/toolbar.svelte | 2 +- .../tooltip/components/tooltip-arrow.svelte | 2 +- .../tooltip/components/tooltip-content.svelte | 2 +- .../tooltip/components/tooltip-trigger.svelte | 2 +- .../tooltip/components/tooltip.svelte | 2 +- .../components/tree-grid-cell.svelte | 2 +- .../components/tree-grid-column-header.svelte | 2 +- .../tree-grid-expand-trigger.svelte | 2 +- .../components/tree-grid-header.svelte | 2 +- .../components/tree-grid-row-children.svelte | 2 +- .../tree-grid/components/tree-grid-row.svelte | 2 +- .../tree-grid/components/tree-grid.svelte | 2 +- .../tree-view-branch-content.svelte | 2 +- .../tree-view-branch-control.svelte | 2 +- .../tree-view-branch-indent-guide.svelte | 2 +- .../tree-view-branch-indicator.svelte | 2 +- .../components/tree-view-branch.svelte | 2 +- .../components/tree-view-item.svelte | 2 +- .../components/tree-view-label.svelte | 2 +- .../tree-view/components/tree-view.svelte | 2 +- .../components/virtual-grid-cell.svelte | 2 +- .../components/virtual-grid-viewport.svelte | 2 +- .../components/virtual-grid.svelte | 2 +- .../components/virtual-list-item.svelte | 2 +- .../components/virtual-list-viewport.svelte | 2 +- .../virtual-list-window-viewport.svelte | 2 +- .../components/virtual-list.svelte | 2 +- .../words/components/words-bubble-menu.svelte | 2 +- .../components/words-command-button.svelte | 2 +- .../words/components/words-content.svelte | 2 +- .../words/components/words-drawer.svelte | 2 +- .../components/words-find-replace.svelte | 2 +- .../components/words-hidden-input.svelte | 2 +- .../words/components/words-link-editor.svelte | 2 +- .../words/components/words-placeholder.svelte | 2 +- .../words/components/words-slash-menu.svelte | 2 +- .../words/components/words-status.svelte | 2 +- .../components/words-toolbar-group.svelte | 2 +- .../words/components/words-toolbar.svelte | 2 +- .../components/words/components/words.svelte | 2 +- .../components/year-grid-cell.svelte | 2 +- .../components/year-grid-grid.svelte | 2 +- .../components/year-grid-header.svelte | 2 +- .../components/year-grid-heading.svelte | 2 +- .../components/year-grid-next-button.svelte | 2 +- .../components/year-grid-prev-button.svelte | 2 +- .../year-grid/components/year-grid.svelte | 2 +- src/uix/soma/id/create-id.ts | 15 ----------- src/uix/soma/id/index.ts | 1 - 448 files changed, 483 insertions(+), 484 deletions(-) create mode 100644 src/uix/active-uix/id/create-id.ts create mode 100644 src/uix/active-uix/id/use-id.ts delete mode 100644 src/uix/soma/id/create-id.ts delete mode 100644 src/uix/soma/id/index.ts diff --git a/src/uix/active-uix/id/create-id.ts b/src/uix/active-uix/id/create-id.ts new file mode 100644 index 000000000..b687e4d01 --- /dev/null +++ b/src/uix/active-uix/id/create-id.ts @@ -0,0 +1,20 @@ +/** + * Create an id from a Svelte `$props.id()` uid, with optional component context. + * + * ```ts + * createId(uid) // "soma-c12" + * createId(uid, 'dialog-trigger') // "soma-dialog-trigger-c12" + * ``` + * + * The `uid` comes from the consuming component's `$props.id()`, so the output + * is hydration-stable (deterministic per render tree) — use this for SSR / ARIA + * element ids. For a generic client-only counter, use `useId` (same module). + * + * Lives in active-uix (imported by subpath `$active-uix/id`) so every UIX layer + * — soma, eidos, demos, apps — shares one id authority without cross-layer + * coupling. The `soma-` prefix is the UIX id convention, kept for output + * stability across the migration. + */ +export function createId(uid: string, component?: string): string { + return component ? `soma-${component}-${uid}` : `soma-${uid}` +} diff --git a/src/uix/active-uix/id/index.ts b/src/uix/active-uix/id/index.ts index 4c8e40f3b..0f9e99318 100644 --- a/src/uix/active-uix/id/index.ts +++ b/src/uix/active-uix/id/index.ts @@ -1,24 +1,2 @@ -/** - * Process-unique client-side id counter. - * - * `useId()` returns the next value of a monotonic module-level counter — - * cheaper than `Date.now()` and, unlike a timestamp, collision-free. Use it - * for client-only ephemeral ids (list keys, generated handles). - * - * NOT for SSR / ARIA element ids derived from the component tree — those use - * soma's `createId`, which wraps Svelte's `$props.id()` for hydration-stable - * output. A global counter would desync between server and client renders. - * - * Lives in active-uix (not soma) so any UIX layer — soma, eidos, demos, - * apps — can mint ids without coupling to soma. Imported by subpath - * (`$active-uix/id`), mirroring `$active-uix/prefs`, so it never pulls the - * runtime barrel. The `soma-` prefix is the shared UIX id convention (same - * shape `createId` emits), not a marker of where this lives. - */ - -let counter = 0 - -export function useId(component = ''): string { - const id = ++counter - return component ? `soma-${component}-${id}` : `soma-${id}` -} +export { createId } from './create-id' +export { useId } from './use-id' diff --git a/src/uix/active-uix/id/use-id.ts b/src/uix/active-uix/id/use-id.ts new file mode 100644 index 000000000..b321a5884 --- /dev/null +++ b/src/uix/active-uix/id/use-id.ts @@ -0,0 +1,18 @@ +/** + * Process-unique client-side id counter. + * + * `useId()` returns the next value of a monotonic module-level counter — + * cheaper than `Date.now()` and, unlike a timestamp, collision-free. Use it + * for client-only ephemeral ids (list keys, generated handles). + * + * NOT for SSR / ARIA element ids derived from the component tree — those use + * `createId` (same module), which wraps Svelte's `$props.id()` for + * hydration-stable output. A global counter would desync server / client. + */ + +let counter = 0 + +export function useId(component = ''): string { + const id = ++counter + return component ? `soma-${component}-${id}` : `soma-${id}` +} diff --git a/src/uix/soma/COMPONENT_GUIDE.md b/src/uix/soma/COMPONENT_GUIDE.md index 974685e82..7622499ab 100644 --- a/src/uix/soma/COMPONENT_GUIDE.md +++ b/src/uix/soma/COMPONENT_GUIDE.md @@ -205,7 +205,7 @@ Do NOT redeclare field types in both `types.ts` and the Opts interface.