@lar-works/design-system 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,3 +1,5 @@
+import { ambientMotion } from "./foundations/AmbientMotion.js";
+import { Loading } from "./feedback/Loading.js";
 import { tabbable } from "./foundations/KeyboardFocus.js";
 import { Button } from "./actions/Button.js";
 import { StatusIndicator } from "./feedback/StatusIndicator.js";
@@ -5,10 +7,66 @@ import { IconButton } from "./actions/IconButton.js";
 import { ButtonLink } from "./actions/ButtonLink.js";
 import { DesignSystemProvider, defaultDesignSystemLabels, useDesignSystemLabels } from "./foundations/DesignSystemProvider.js";
 import { ThemeSwitch } from "./actions/ThemeSwitch.js";
+import { Alert } from "./feedback/Alert.js";
+import { FormResult } from "./feedback/FormResult.js";
+import { Badge } from "./display/Badge.js";
+import { Grid, Inline, Stack } from "./layout/Flow.js";
+import { InsetPanel } from "./display/InsetPanel.js";
 import { SkeletonLoader } from "./feedback/SkeletonLoader.js";
+import { Popover } from "./overlays/Popover.js";
+import { HelpTip } from "./overlays/HelpTip.js";
 import { Heading, Text } from "./typography/Typography.js";
+import { Field } from "./forms/Field.js";
+import { Disclosure, FormAction, FormContent, FormField, FormFieldset, FormRow, FormSection, FormStack, FormUnit } from "./forms/FormSection.js";
+import { Input } from "./forms/Input.js";
+import { buttonKind } from "./board/ButtonKinds.js";
+import { AttachmentLink, ChangeFailed, CheckRun, ChipGroup, DetailFact, DetailsHeading, DetailsSection, DetailsText, EditActions, EditorSlot, FactList, FocusPanel, HeaderStatus, InlineList, KindQuestion, LabelEditorPanel, MainColumnSlot, MainSection, MetaArea, OutgoingTicket, SectionHeader, SpecSync, SprintCount, TextSection, TicketLink, TicketLinkList, WaitsOnList } from "./board/ItemDetails.js";
+import { AddItemButton, CreateIssueChoice, DraftFields, DraftTicketPart, PanelField, TicketSearch, TicketSearchPane } from "./board/AddItem.js";
+import { ActionStack, SettingConfirm, SettingLastRun } from "./board/Archive.js";
+import { BoardContent, BoardShell, ReadingLine } from "./board/BoardShell.js";
+import { BrandLink, BrandMark } from "./display/BrandMark.js";
+import { TitleBar, TitleBarTrail } from "./layout/TitleBar.js";
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./overlays/Tooltip.js";
+import { BoardBrand, BoardTitleBar, RefreshIndicator, TitleBarDivider } from "./board/BoardTitleBar.js";
+import { BoardCounter, BoardCounters, CounterAge, CounterDash, CounterDivider, CounterEmpty, CounterFigure, CounterGroup, CounterGroups, CounterItem, CounterList, CounterOfLimit, CounterPartial, LimitBars } from "./board/Counters.js";
+import { DeskCard, DeskHint, DeskMergeState, DeskSection } from "./board/Desk.js";
+import { Checkbox } from "./forms/Checkbox.js";
+import { FilterBar, FilterChip, FilterChoice, FilterChoices, FilterMenu } from "./board/Filters.js";
+import { SidebarNavigationItem } from "./layout/sidebar/SidebarNavigationItem.js";
+import { ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote } from "./board/List.js";
+import { LoadingScreen } from "./board/LoadingScreen.js";
+import { ReleaseNotes, UpdateDownloading, UpdatePill, UpdateStatusIcon } from "./board/UpdatePill.js";
+import { DismissButton } from "./feedback/DismissButton.js";
+import { BoardWarning, BoardWarnings, ToolMissing } from "./board/Warnings.js";
+import { ActivityLine, AgentAge, AgentList, AgentRow, WorkingAgents } from "./board/ActivityLine.js";
+import { ActivityLabel, ActivityTrack } from "./board/ActivityTrack.js";
+import { AttentionEntry, AttentionList, AttentionMark, AttentionNone, EntryButton, PartLink, PartName, RefButton } from "./board/Attention.js";
+import { LossList } from "./board/Cleanup.js";
+import { DependencyItem, DependencyList } from "./board/Dependencies.js";
+import { DossierBody, DossierChips, DossierFields, DossierLine, DossierList, DossierNext, DossierNote, DossierRepos, DossierRow, DossierTitle, DossierTitleCell, DossierToggle, DossierTools, PartsBar, PlanningNote } from "./board/Dossier.js";
+import { ItemFields, ItemTitle, KindMarker, RepoIdentity, RepoTag, TitleLink } from "./board/ItemParts.js";
+import { NeedsYouNotice, NeedsYouResult } from "./board/NeedsYou.js";
+import { PartKindLabel, PartRow, PartTrack, PartWaits, PartsList, ShowDoneToggle, ThreadLine } from "./board/PartsList.js";
+import { ChecksState, PullRequestList, PullRequestReadiness, PullRequestRef, PullRequestRow, ReadinessDetails } from "./board/PullRequests.js";
+import { SliceBar, SliceList, SliceMark, SliceRow } from "./board/Slices.js";
+import { SourceIcon } from "./board/SourceIcon.js";
+import { BuildLimit, HeaderSwitch, StageList, StagePane, StagePaneEmpty, StageSections } from "./board/StagePane.js";
+import { OnYourDesk, QueueAge, QueuePlace, RowBlocked, RowCells, RowCount, RowFirst, RowFoot, RowGlyph, RowIdentity, RowKindCell, RowOpen, RowPartOf, RowSecondLine, RowSide, RowSliceNote, RowSliceToggle, RowSlices, RowState, RowStateCell, RowTitle, RowTitleCell, StageRowItem, UsageFigures } from "./board/StageRow.js";
+import { StageTrack } from "./board/StageTrack.js";
+import { ActionError, StartGroup, StartLine, StartNote, StartTag } from "./board/StartControls.js";
+import { statusColor } from "./board/StatusColors.js";
+import { StatusGlyph } from "./board/StatusGlyph.js";
+import { EarlierThread, EarlierThreadList } from "./board/Threads.js";
+import { HistoryRow, MapBand, MapCanvas, MapCheckNode, MapEdgeLabel, MapEdges, MapHistoryGroup, MapHistoryList, MapLaneName, MapNode, MapPartNode, WorkMapFrame } from "./board/WorkMap.js";
+import { AccessNotice, DialogActions, ItemDialogAside, ItemDialogBody, ItemDialogColumns, ItemSummary, SummaryAge, SummaryBlocked, SummaryPanel, SummaryParent, SummaryStatus, WarningNote } from "./board/ItemDialog.js";
+import { ItemProgressPanel, PartsProgress, ProgressActivity, ProgressCount, SliceChip, SliceChips, WorkflowSteps } from "./board/ItemProgress.js";
+import { ProjectIcon } from "./board/ProjectIcon.js";
+import { SidebarNavigationGroup, SidebarPane } from "./layout/sidebar/SidebarPane.js";
+import { OpenSettingsButton, ProjectValueList, ReasonNote, SettingControl, SettingDetails, SettingsNav, SettingsNote } from "./board/Settings.js";
+import { CreateLabelForm, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow } from "./board/TrackerLabels.js";
+import { LabelChooser, LabelChooserEmpty, LabelChooserFooter, LabelChooserList, LabelChooserOption, VocabularyMore, VocabularyRow, VocabularySuggestion } from "./board/Vocabulary.js";
+import { AddFolderLine, ChoiceDetails, EmptyBoard, ProjectLine, ProjectList, ProjectListItem, SetupCardList, SetupHeader, SetupStep } from "./board/Onboarding.js";
 import { CollectionSectionHeader } from "./collections/CollectionSectionHeader.js";
-import { Grid, Inline, Stack } from "./layout/Flow.js";
 import { CollectionState } from "./collections/CollectionState.js";
 import { InlineLink, Link, LinkBox, LinkOverlay } from "./typography/Link.js";
 import { DataRow } from "./collections/DataRow.js";
@@ -22,61 +80,62 @@ import { ActivityCard, ActivityCardSkeleton } from "./display/ActivityCard.js";
 import { ItemAction } from "./display/ItemAction.js";
 import { Artwork } from "./display/Artwork.js";
 import { Avatar } from "./display/Avatar.js";
-import { Badge } from "./display/Badge.js";
 import { BadgeList } from "./display/BadgeList.js";
-import { BrandLink, BrandMark } from "./display/BrandMark.js";
 import { ChangeList } from "./display/ChangeList.js";
 import { CheckList } from "./display/CheckList.js";
 import { CodeBlock } from "./display/CodeBlock.js";
+import { Comment, CommentList } from "./display/Comment.js";
 import { CopyButton } from "./display/CopyButton.js";
 import { DataTable } from "./display/DataTable.js";
-import { Popover } from "./overlays/Popover.js";
 import { Modal } from "./overlays/Modal.js";
 import { TextPreview } from "./display/TextPreview.js";
 import { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags } from "./display/DetailHero.js";
 import { DetailList } from "./display/DetailList.js";
 import { DeviceCard } from "./display/DeviceCard.js";
+import { Diagram } from "./display/Diagram.js";
 import { Identity } from "./display/Identity.js";
 import { ImageCard } from "./display/ImageCard.js";
 import { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload } from "./display/ImagePicker.js";
 import { InfoBox } from "./display/InfoBox.js";
-import { InsetPanel } from "./display/InsetPanel.js";
 import { Kbd } from "./display/Kbd.js";
 import { KindIcon } from "./display/KindIcon.js";
+import { LabelChip } from "./display/LabelChip.js";
 import { NoticeCard } from "./display/NoticeCard.js";
 import { PairingList } from "./display/PairingList.js";
 import { PathList } from "./display/PathList.js";
 import { PeoplePreview } from "./display/PeoplePreview.js";
+import { Person } from "./display/Person.js";
 import { PropertySheet } from "./display/PropertySheet.js";
 import { QrCode } from "./display/QrCode.js";
 import { RadioChoice } from "./display/RadioChoice.js";
 import { RatingLink } from "./display/RatingLink.js";
 import { ResourceCard, ResourceCardSkeleton } from "./display/ResourceCard.js";
+import { RichText } from "./display/RichText.js";
 import { RowList, RowListItem } from "./display/RowList.js";
 import { MeterLegend, StackedMeter } from "./display/StackedMeter.js";
 import { StatTile } from "./display/StatTile.js";
 import { StepList } from "./display/StepList.js";
 import { TimeSeriesChart, TimeSeriesChartSkeleton } from "./display/TimeSeriesChart.js";
-import { Alert } from "./feedback/Alert.js";
 import { AsyncState } from "./feedback/AsyncState.js";
+import { Notifications, clearNotification, showNotification, useNotificationControls } from "./feedback/Notifications.js";
 import { dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./feedback/ErrorNotification.js";
-import { Notifications } from "./feedback/Notifications.js";
+import { LiveRegion } from "./feedback/LiveRegion.js";
+import { Progress } from "./feedback/Progress.js";
 import { ProgressStatusRow } from "./feedback/ProgressStatusRow.js";
 import { StatusPopoverContent } from "./feedback/StatusPopoverContent.js";
 import { StatusRow } from "./feedback/StatusRow.js";
-import { Loading } from "./feedback/index.js";
-import { Checkbox } from "./forms/Checkbox.js";
-import { Field } from "./forms/Field.js";
-import { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack } from "./forms/FormSection.js";
+import { ColorSwatches } from "./forms/ColorSwatches.js";
+import { HiddenField } from "./forms/HiddenField.js";
 import { InlineFields } from "./forms/InlineFields.js";
-import { Input } from "./forms/Input.js";
+import { LabelPicker } from "./forms/LabelPicker.js";
+import { applePlatform, isShortcut } from "./foundations/KeyboardShortcut.js";
+import { MarkdownEditor } from "./forms/MarkdownEditor.js";
 import { Select, SelectItem } from "./forms/Select.js";
 import { OptionSelect } from "./forms/OptionSelect.js";
 import { RadioGroup, RadioGroupItem } from "./forms/RadioGroup.js";
 import { Switch } from "./forms/Switch.js";
 import { TagInput } from "./forms/TagInput.js";
 import { Textarea } from "./forms/Textarea.js";
-import { applePlatform, isShortcut } from "./foundations/KeyboardShortcut.js";
 import { createThemeController, isThemePreference } from "./foundations/Theme.js";
 import { AppShell } from "./layout/AppShell.js";
 import { AuthLayout } from "./layout/AuthLayout.js";
@@ -84,9 +143,6 @@ import { ContentContainer } from "./layout/ContentContainer.js";
 import { PageLayout } from "./layout/PageLayout.js";
 import { ScrollArea } from "./layout/ScrollArea.js";
 import { Section } from "./layout/Section.js";
-import { SidebarNavigationItem } from "./layout/sidebar/SidebarNavigationItem.js";
-import { SidebarNavigationGroup, SidebarPane } from "./layout/sidebar/SidebarPane.js";
-import { TitleBar, TitleBarTrail } from "./layout/TitleBar.js";
 import { CommandPaletteTrigger } from "./layout/toolbar/CommandPaletteTrigger.js";
 import { ToolbarStatusGroup } from "./layout/toolbar/ToolbarStatusGroup.js";
 import { ToolbarStatusItem } from "./layout/toolbar/ToolbarStatusItem.js";
@@ -98,15 +154,16 @@ import { ArtworkTabs } from "./navigation/ArtworkTabs.js";
 import { Breadcrumbs } from "./navigation/Breadcrumbs.js";
 import { DropdownMenu } from "./overlays/DropdownMenu.js";
 import { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger } from "./navigation/CollectionBrowseSelector.js";
-import { CollectionViewToggle } from "./navigation/CollectionViewToggle.js";
+import { CollectionViewToggle, ViewToggle } from "./navigation/CollectionViewToggle.js";
 import { DrilldownBrowseSelector } from "./navigation/DrilldownBrowseSelector.js";
 import { FolderSelector } from "./navigation/FolderSelector.js";
+import { SortMenu } from "./navigation/SortMenu.js";
 import { ViewTabs } from "./navigation/ViewTabs.js";
 import { ActionModal } from "./overlays/ActionModal.js";
-import { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from "./overlays/CommandPalette.js";
+import { CommandPalette, CommandPaletteGroup, CommandPaletteOption, useCommandPaletteOption } from "./overlays/CommandPalette.js";
 import { Drawer } from "./overlays/Drawer.js";
 import { ImageViewer } from "./overlays/ImageViewer.js";
-import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./overlays/Tooltip.js";
+import { ModalExpandButton } from "./overlays/ModalExpandButton.js";
 import { CallToAction } from "./showcase/CallToAction.js";
 import { FeatureGrid, FeatureTile, ProductCard, ProductGrid } from "./showcase/Cards.js";
 import { AppWindow, BrowserFrame, Callout, CalloutPair, CalloutStack, GuidedMedia, LaptopFrame, PhoneFrame, Screenshot, TabletFrame, TvFrame } from "./showcase/Devices.js";
@@ -121,5 +178,5 @@ import { Roadmap } from "./showcase/Roadmap.js";
 import { RouteDiagram } from "./showcase/RouteDiagram.js";
 import { ReadinessLegend, ReadinessPanel, ServerUnit } from "./showcase/ServerUnit.js";
 import { StepFlow } from "./showcase/StepFlow.js";
-import { Code } from "./typography/index.js";
-export { ActionModal, ActivityCard, ActivityCardSkeleton, Alert, AngledDevice, Announcement, AppIcon, AppShell, AppWindow, Artwork, ArtworkTabs, AsyncState, AuthLayout, Avatar, Backdrop, Badge, BadgeList, Box, BrandLink, BrandMark, Breadcrumbs, BrowserFrame, Button, ButtonLink, CallToAction, Callout, CalloutPair, CalloutStack, ChangeList, CheckList, Checkbox, Code, CodeBlock, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, CollectionSectionHeader, CollectionState, CollectionViewToggle, CommandPalette, CommandPaletteGroup, CommandPaletteTrigger, ContentContainer, CopyButton, DataRow, DataTable, DesignSystemProvider, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, DeviceStage, Disclosure, Divider, Drawer, DrilldownBrowseSelector, DropdownMenu, Eyebrow, FeatureGrid, FeatureRow, FeatureRows, FeatureTile, Field, FolderSelector, FormAction, FormContent, FormField, FormRow, FormSection, FormStack, Grid, GuidedMedia, Heading, Hero, IconButton, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, ImageViewer, InfoBox, Inline, InlineFields, InlineLink, Input, InsetPanel, ItemAction, Kbd, KindIcon, LaptopFrame, Link, LinkBox, LinkOverlay, Loading, MeterLegend, Modal, NoticeCard, Notifications, OptionSelect, PageLayout, PageSection, PairingList, PathList, PeoplePreview, PhoneFrame, PhotoSearchConcept, PlatformGrid, PointList, Popover, ProductBand, ProductBands, ProductCard, ProductGrid, ProductIndex, ProgressStatusRow, PropertySheet, QrCode, RadioChoice, RadioGroup, RadioGroupItem, RatingLink, ReadinessLegend, ReadinessPanel, ResourceCard, ResourceCardSkeleton, ResponsiveMedia, ResultEmpty, ResultList, ResultRow, Reveal, Roadmap, RouteDiagram, RowList, RowListItem, Screenshot, ScrollArea, ScrollRow, ScrollRowArrows, ScrollRowItem, Section, SectionHeading, Select, SelectItem, ServerUnit, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, SiteShell, SkeletonLoader, Stack, StackedMeter, StatTile, StatusIndicator, StatusLight, StatusPill, StatusPopoverContent, StatusRow, StepFlow, StepList, Switch, TabletFrame, TagInput, Text, TextPreview, Textarea, ThemeSwitch, TimeSeriesChart, TimeSeriesChartSkeleton, TitleBar, TitleBarTrail, ToolbarStatusGroup, ToolbarStatusItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, TvFrame, ViewTabs, VirtualGrid, VirtualList, WorkspaceActionsHeader, applePlatform, createThemeController, defaultDesignSystemLabels, dismissAllNotifications, isShortcut, isThemePreference, revealInRow, showErrorNotification, showSuccessNotification, tabbable, useCollectionMotion, useCommandPaletteOption, useDesignSystemLabels, useScrollRow };
+import { Code } from "./typography/Code.js";
+export { AccessNotice, ActionError, ActionModal, ActionStack, ActivityCard, ActivityCardSkeleton, ActivityLabel, ActivityLine, ActivityTrack, AddFolderLine, AddItemButton, AgentAge, AgentList, AgentRow, Alert, AngledDevice, Announcement, AppIcon, AppShell, AppWindow, Artwork, ArtworkTabs, AsyncState, AttachmentLink, AttentionEntry, AttentionList, AttentionMark, AttentionNone, AuthLayout, Avatar, Backdrop, Badge, BadgeList, BoardBrand, BoardContent, BoardCounter, BoardCounters, BoardShell, BoardTitleBar, BoardWarning, BoardWarnings, Box, BrandLink, BrandMark, Breadcrumbs, BrowserFrame, BuildLimit, Button, ButtonLink, CallToAction, Callout, CalloutPair, CalloutStack, ChangeFailed, ChangeList, CheckList, CheckRun, Checkbox, ChecksState, ChipGroup, ChoiceDetails, Code, CodeBlock, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, CollectionSectionHeader, CollectionState, CollectionViewToggle, ColorSwatches, CommandPalette, CommandPaletteGroup, CommandPaletteOption, CommandPaletteTrigger, Comment, CommentList, ContentContainer, CopyButton, CounterAge, CounterDash, CounterDivider, CounterEmpty, CounterFigure, CounterGroup, CounterGroups, CounterItem, CounterList, CounterOfLimit, CounterPartial, CreateIssueChoice, CreateLabelForm, DataRow, DataTable, DependencyItem, DependencyList, DesignSystemProvider, DeskCard, DeskHint, DeskMergeState, DeskSection, DetailFact, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DetailsHeading, DetailsSection, DetailsText, DeviceCard, DeviceStage, Diagram, DialogActions, Disclosure, DismissButton, Divider, DossierBody, DossierChips, DossierFields, DossierLine, DossierList, DossierNext, DossierNote, DossierRepos, DossierRow, DossierTitle, DossierTitleCell, DossierToggle, DossierTools, DraftFields, DraftTicketPart, Drawer, DrilldownBrowseSelector, DropdownMenu, EarlierThread, EarlierThreadList, EditActions, EditorSlot, EmptyBoard, EntryButton, Eyebrow, FactList, FeatureGrid, FeatureRow, FeatureRows, FeatureTile, Field, FilterBar, FilterChip, FilterChoice, FilterChoices, FilterMenu, FocusPanel, FolderSelector, FormAction, FormContent, FormField, FormFieldset, FormResult, FormRow, FormSection, FormStack, FormUnit, Grid, GuidedMedia, HeaderStatus, HeaderSwitch, Heading, HelpTip, Hero, HiddenField, HistoryRow, IconButton, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, ImageViewer, InfoBox, Inline, InlineFields, InlineLink, InlineList, Input, InsetPanel, ItemAction, ItemDialogAside, ItemDialogBody, ItemDialogColumns, ItemFields, ItemProgressPanel, ItemSummary, ItemTitle, Kbd, KindIcon, KindMarker, KindQuestion, LabelChip, LabelChooser, LabelChooserEmpty, LabelChooserFooter, LabelChooserList, LabelChooserOption, LabelEditorPanel, LabelPicker, LaptopFrame, LimitBars, Link, LinkBox, LinkOverlay, ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote, LiveRegion, Loading, LoadingScreen, LossList, MainColumnSlot, MainSection, MapBand, MapCanvas, MapCheckNode, MapEdgeLabel, MapEdges, MapHistoryGroup, MapHistoryList, MapLaneName, MapNode, MapPartNode, MarkdownEditor, MetaArea, MeterLegend, Modal, ModalExpandButton, NeedsYouNotice, NeedsYouResult, NoticeCard, Notifications, OnYourDesk, OpenSettingsButton, OptionSelect, OutgoingTicket, PageLayout, PageSection, PairingList, PanelField, PartKindLabel, PartLink, PartName, PartRow, PartTrack, PartWaits, PartsBar, PartsList, PartsProgress, PathList, PeoplePreview, Person, PhoneFrame, PhotoSearchConcept, PlanningNote, PlatformGrid, PointList, Popover, ProductBand, ProductBands, ProductCard, ProductGrid, ProductIndex, Progress, ProgressActivity, ProgressCount, ProgressStatusRow, ProjectIcon, ProjectLine, ProjectList, ProjectListItem, ProjectValueList, PropertySheet, PullRequestList, PullRequestReadiness, PullRequestRef, PullRequestRow, QrCode, QueueAge, QueuePlace, RadioChoice, RadioGroup, RadioGroupItem, RatingLink, ReadinessDetails, ReadinessLegend, ReadinessPanel, ReadingLine, ReasonNote, RefButton, RefreshIndicator, ReleaseNotes, RepoIdentity, RepoTag, ResourceCard, ResourceCardSkeleton, ResponsiveMedia, ResultEmpty, ResultList, ResultRow, Reveal, RichText, Roadmap, RouteDiagram, RowBlocked, RowCells, RowCount, RowFirst, RowFoot, RowGlyph, RowIdentity, RowKindCell, RowList, RowListItem, RowOpen, RowPartOf, RowSecondLine, RowSide, RowSliceNote, RowSliceToggle, RowSlices, RowState, RowStateCell, RowTitle, RowTitleCell, Screenshot, ScrollArea, ScrollRow, ScrollRowArrows, ScrollRowItem, Section, SectionHeader, SectionHeading, Select, SelectItem, ServerUnit, SettingConfirm, SettingControl, SettingDetails, SettingLastRun, SettingsNav, SettingsNote, SetupCardList, SetupHeader, SetupStep, ShowDoneToggle, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, SiteShell, SkeletonLoader, SliceBar, SliceChip, SliceChips, SliceList, SliceMark, SliceRow, SortMenu, SourceIcon, SpecSync, SprintCount, Stack, StackedMeter, StageList, StagePane, StagePaneEmpty, StageRowItem, StageSections, StageTrack, StartGroup, StartLine, StartNote, StartTag, StatTile, StatusGlyph, StatusIndicator, StatusLight, StatusPill, StatusPopoverContent, StatusRow, StepFlow, StepList, SummaryAge, SummaryBlocked, SummaryPanel, SummaryParent, SummaryStatus, Switch, TabletFrame, TagInput, Text, TextPreview, TextSection, Textarea, ThemeSwitch, ThreadLine, TicketLink, TicketLinkList, TicketSearch, TicketSearchPane, TimeSeriesChart, TimeSeriesChartSkeleton, TitleBar, TitleBarDivider, TitleBarTrail, TitleLink, ToolMissing, ToolbarStatusGroup, ToolbarStatusItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow, TvFrame, UpdateDownloading, UpdatePill, UpdateStatusIcon, UsageFigures, ViewTabs, ViewToggle, VirtualGrid, VirtualList, VocabularyMore, VocabularyRow, VocabularySuggestion, WaitsOnList, WarningNote, WorkMapFrame, WorkflowSteps, WorkingAgents, WorkspaceActionsHeader, ambientMotion, applePlatform, buttonKind, clearNotification, createThemeController, defaultDesignSystemLabels, dismissAllNotifications, isShortcut, isThemePreference, revealInRow, showErrorNotification, showNotification, showSuccessNotification, statusColor, tabbable, useCollectionMotion, useCommandPaletteOption, useDesignSystemLabels, useNotificationControls, useScrollRow };

package/dist/layout/Site.js

@@ -1,7 +1,7 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MenuIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/layout/Site.tsx
 /** The website frame: a glass header that stays on top while the document scrolls under it, then the footer. */
 function SiteShell({ skipLabel, header, footer, children }) {

package/dist/layout/TitleBar.js

@@ -1,7 +1,7 @@
 import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
 import { tabbable } from "../foundations/KeyboardFocus.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/layout/TitleBar.tsx
 /** T3 Code's 52px title bar: the brand and where you are on the left, tools on the right. Its own width,
 *  not the window's, decides when search folds to an icon; narrow screens close the gaps so the title keeps

package/dist/layout/index.d.ts

@@ -7,7 +7,7 @@ import { Section } from "./Section.js";
 import { SidebarNavigationItem } from "./sidebar/SidebarNavigationItem.js";
 import { SidebarNavigationGroup, SidebarPane } from "./sidebar/SidebarPane.js";
 import { TitleBar, TitleBarTrail, TitleBarTrailItem } from "./TitleBar.js";
-import { CommandPaletteTrigger } from "./toolbar/CommandPaletteTrigger.js";
+import { CommandPaletteTrigger, CommandPaletteTriggerToken } from "./toolbar/CommandPaletteTrigger.js";
 import { ToolbarStatusGroup } from "./toolbar/ToolbarStatusGroup.js";
 import { ToolbarStatusItem } from "./toolbar/ToolbarStatusItem.js";
 import { WorkspaceActionsHeader } from "./WorkspaceActionsHeader.js";
@@ -16,4 +16,4 @@ import { Eyebrow, PageSection, SectionHeading } from "./PageSection.js";
 import { SiteFooter, SiteHeader, SiteLink, SiteShell } from "./Site.js";
 import { Divider } from "@ninna-ui/primitives";
 import { Box as Box$1 } from "@ninna-ui/layout";
-export { AppShell, AuthLayout, Box$1 as Box, CommandPaletteTrigger, ContentContainer, Divider, Eyebrow, type FlowSpace, Grid$1 as Grid, Inline, PageLayout, PageSection, ScrollArea, type ScrollAreaProps, Section, SectionHeading, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, type SiteLink, SiteShell, Stack$1 as Stack, type StackProps$1 as StackProps, TitleBar, TitleBarTrail, type TitleBarTrailItem, ToolbarStatusGroup, ToolbarStatusItem, WorkspaceActionsHeader };
+export { AppShell, AuthLayout, Box$1 as Box, CommandPaletteTrigger, type CommandPaletteTriggerToken, ContentContainer, Divider, Eyebrow, type FlowSpace, Grid$1 as Grid, Inline, PageLayout, PageSection, ScrollArea, type ScrollAreaProps, Section, SectionHeading, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, type SiteLink, SiteShell, Stack$1 as Stack, type StackProps$1 as StackProps, TitleBar, TitleBarTrail, type TitleBarTrailItem, ToolbarStatusGroup, ToolbarStatusItem, WorkspaceActionsHeader };

package/dist/layout/index.js

@@ -1,13 +1,13 @@
 import { Grid as Grid$1, Inline, Stack as Stack$1 } from "./Flow.js";
+import { TitleBar, TitleBarTrail } from "./TitleBar.js";
+import { SidebarNavigationItem } from "./sidebar/SidebarNavigationItem.js";
+import { SidebarNavigationGroup, SidebarPane } from "./sidebar/SidebarPane.js";
 import { AppShell } from "./AppShell.js";
 import { AuthLayout } from "./AuthLayout.js";
 import { ContentContainer } from "./ContentContainer.js";
 import { PageLayout } from "./PageLayout.js";
 import { ScrollArea } from "./ScrollArea.js";
 import { Section } from "./Section.js";
-import { SidebarNavigationItem } from "./sidebar/SidebarNavigationItem.js";
-import { SidebarNavigationGroup, SidebarPane } from "./sidebar/SidebarPane.js";
-import { TitleBar, TitleBarTrail } from "./TitleBar.js";
 import { CommandPaletteTrigger } from "./toolbar/CommandPaletteTrigger.js";
 import { ToolbarStatusGroup } from "./toolbar/ToolbarStatusGroup.js";
 import { ToolbarStatusItem } from "./toolbar/ToolbarStatusItem.js";

package/dist/layout/toolbar/CommandPaletteTrigger.d.ts

@@ -1,11 +1,26 @@
+import { ReactNode } from "react";
+/** What narrows the palette, shown in the trigger as a small chip. */
+export interface CommandPaletteTriggerToken {
+  id: string;
+  label: string;
+  /** An icon or colour mark before the label. */
+  leading?: ReactNode;
+  /** A lar-brand app hue that colours the chip, as a kind's badge. */
+  hue?: number;
+}
 interface CommandPaletteTriggerProps {
   label: string;
   onOpen: () => void;
   /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */
   shortcut: string;
+  /** What narrows the palette now, such as filters. With tokens, the trigger measures its own room: the chips go
+   *  into a count from the last, then it folds to its icon. */
+  tokens?: readonly CommandPaletteTriggerToken[];
+  /** The accessible name's addition while tokens show, such as "filtered by bug, docs". */
+  filterLabel?: (labels: readonly string[]) => string;
 }
 /** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
- *  icon when the title bar is narrow. */
-export declare function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps): import("react").JSX.Element;
+ *  icon when the title bar is narrow. With tokens, it also says what narrows the palette. */
+export declare const CommandPaletteTrigger: import("react").ForwardRefExoticComponent<CommandPaletteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=CommandPaletteTrigger.d.ts.map

package/dist/layout/toolbar/CommandPaletteTrigger.js

@@ -1,31 +1,57 @@
 import { Kbd } from "../../display/Kbd.js";
 import { tabbable } from "../../foundations/KeyboardFocus.js";
 import { applePlatform, isShortcut } from "../../foundations/KeyboardShortcut.js";
-import { useEffect, useEffectEvent, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { fitTrigger, useTriggerRoom } from "./TriggerFit.js";
+import { forwardRef, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react";
 import { SearchIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/layout/toolbar/CommandPaletteTrigger.tsx
+const chip = "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-base-200 px-1 text-2xs font-medium text-base-800 dark:bg-base-300 dark:text-base-content [&_svg]:size-3";
+function TokenChip({ token }) {
+	const hued = token.hue !== void 0;
+	return /* @__PURE__ */ jsxs("span", {
+		title: token.label,
+		className: `${chip} ${hued ? "kind-badge!" : ""}`,
+		style: hued ? { "--lar-kind-hue": token.hue } : void 0,
+		children: [token.leading, /* @__PURE__ */ jsx("span", {
+			className: "max-w-32 min-w-0 truncate",
+			children: token.label
+		})]
+	});
+}
 /** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
-*  icon when the title bar is narrow. */
-function CommandPaletteTrigger({ label, onOpen, shortcut }) {
+*  icon when the title bar is narrow. With tokens, it also says what narrows the palette. */
+const CommandPaletteTrigger = forwardRef(({ label, onOpen, shortcut, tokens, filterLabel }, ref) => {
 	const button = useRef(null);
 	const openFromShortcut = useEffectEvent((event) => {
 		if (!isShortcut(event, shortcut) || button.current?.closest("[aria-hidden=\"true\"]")) return;
 		event.preventDefault();
 		onOpen();
 	});
+	useImperativeHandle(ref, () => button.current);
 	useEffect(() => {
 		const listener = (event) => openFromShortcut(event);
 		document.addEventListener("keydown", listener);
 		return () => document.removeEventListener("keydown", listener);
 	}, []);
+	const keys = `${applePlatform ? "Meta" : "Control"}+${shortcut.toUpperCase()}`;
+	const hint = applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`;
+	if (tokens) return /* @__PURE__ */ jsx(FittedTrigger, {
+		button,
+		label,
+		onOpen,
+		tokens,
+		filterLabel,
+		keys,
+		hint
+	});
 	return /* @__PURE__ */ jsxs("button", {
 		...tabbable,
 		ref: button,
 		type: "button",
 		"aria-label": label,
 		"aria-haspopup": "dialog",
-		"aria-keyshortcuts": `${applePlatform ? "Meta" : "Control"}+${shortcut.toUpperCase()}`,
+		"aria-keyshortcuts": keys,
 		onClick: onOpen,
 		className: "text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0",
 		children: [
@@ -36,10 +62,67 @@ function CommandPaletteTrigger({ label, onOpen, shortcut }) {
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "hidden pointer-fine:@2xl:inline",
-				children: /* @__PURE__ */ jsx(Kbd, { children: applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}` })
+				children: /* @__PURE__ */ jsx(Kbd, { children: hint })
 			})
 		]
 	});
+});
+CommandPaletteTrigger.displayName = "CommandPaletteTrigger";
+/** The trigger with tokens, up to 26rem wide: it measures its room and the chips in a hidden copy, then shows what
+*  fits (TriggerFit.ts). */
+function FittedTrigger({ button, label, onOpen, tokens, filterLabel, keys, hint }) {
+	const wrapper = useRef(null);
+	const ghost = useRef(null);
+	const { room, widths } = useTriggerRoom(wrapper, ghost, tokens.map(({ id }) => id).join());
+	const { shown, keyHint, folded, width } = fitTrigger(room, widths);
+	const hidden = tokens.slice(shown);
+	const labels = tokens.map((token) => token.label);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapper,
+		className: "relative ml-auto flex max-w-[26rem] min-w-0 flex-1 justify-end",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: ghost,
+			"aria-hidden": "true",
+			className: "invisible absolute right-0 flex h-0 w-max gap-1 overflow-hidden",
+			children: tokens.map((token) => /* @__PURE__ */ jsx(TokenChip, { token }, token.id))
+		}), /* @__PURE__ */ jsxs("button", {
+			...tabbable,
+			ref: button,
+			type: "button",
+			"data-search-field": true,
+			"data-folded": folded || void 0,
+			"aria-haspopup": "dialog",
+			"aria-keyshortcuts": keys,
+			"aria-label": tokens.length && filterLabel ? `${label}, ${filterLabel(labels)}` : label,
+			onClick: onOpen,
+			style: folded ? void 0 : { width },
+			className: `text-base-700 focus-visible:outline-primary relative flex h-7 shrink-0 cursor-pointer items-center rounded-lg text-xs transition-colors focus-visible:outline-2 ${folded ? "hover:bg-base-200 hover:text-base-content dark:hover:bg-base-300 w-7 justify-center" : "border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-200 gap-1 border pr-2 pl-1.5"}`,
+			children: [/* @__PURE__ */ jsx(SearchIcon, {
+				"aria-hidden": "true",
+				className: `shrink-0 ${folded ? "size-4" : "mr-0.5 size-3.5"}`
+			}), folded ? tokens.length > 0 && /* @__PURE__ */ jsx("span", {
+				"data-search-count": true,
+				className: "bg-primary text-2xs text-primary-content absolute -top-0.5 -right-0.5 grid h-3.5 min-w-3.5 place-items-center rounded-full px-0.5 leading-none font-semibold tabular-nums",
+				children: tokens.length
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				tokens.slice(0, shown).map((token) => /* @__PURE__ */ jsx(TokenChip, { token }, token.id)),
+				hidden.length > 0 && /* @__PURE__ */ jsxs("span", {
+					"data-search-count": true,
+					title: hidden.map((token) => token.label).join(", "),
+					className: `${chip} tabular-nums`,
+					children: [shown > 0 ? "+" : "", hidden.length]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-0.5 min-w-0 flex-1 truncate text-left",
+					children: label
+				}),
+				keyHint && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 pointer-coarse:hidden",
+					children: /* @__PURE__ */ jsx(Kbd, { children: hint })
+				})
+			] })]
+		})]
+	});
 }
 export { CommandPaletteTrigger };
 

package/dist/layout/toolbar/CommandPaletteTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteTrigger.js","names":[],"sources":["../../../src/layout/toolbar/CommandPaletteTrigger.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport { useEffect, useEffectEvent, useRef } from 'react';\n\nimport { Kbd } from '../../display/Kbd';\nimport { tabbable } from '../../foundations/KeyboardFocus';\nimport { applePlatform, isShortcut } from '../../foundations/KeyboardShortcut';\n\ninterface CommandPaletteTriggerProps {\n    label: string;\n    onOpen: () => void;\n    /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */\n    shortcut: string;\n}\n\n/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its\n *  icon when the title bar is narrow. */\nexport function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps) {\n    const button = useRef<HTMLButtonElement>(null);\n    const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {\n        // An open dialog hides the page behind it, the trigger included.\n        if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden=\"true\"]')) return;\n\n        event.preventDefault();\n        onOpen();\n    });\n\n    useEffect(() => {\n        const listener = (event: KeyboardEvent) => openFromShortcut(event);\n\n        document.addEventListener('keydown', listener);\n\n        return () => document.removeEventListener('keydown', listener);\n    }, []);\n\n    return (\n        <button\n            {...tabbable}\n            ref={button}\n            type=\"button\"\n            aria-label={label}\n            aria-haspopup=\"dialog\"\n            aria-keyshortcuts={`${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`}\n            onClick={onOpen}\n            className=\"text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0\"\n        >\n            <SearchIcon />\n            <span className=\"hidden flex-1 text-left @2xl:inline\">{label}</span>\n            <span className=\"hidden pointer-fine:@2xl:inline\">\n                <Kbd>{applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`}</Kbd>\n            </span>\n        </button>\n    );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,sBAAsB,EAAE,OAAO,QAAQ,YAAwC;CAC3F,MAAM,SAAS,OAA0B,IAAI;CAC7C,MAAM,mBAAmB,gBAAgB,UAAyB;EAE9D,IAAI,CAAC,WAAW,OAAO,QAAQ,KAAK,OAAO,SAAS,QAAQ,wBAAsB,GAAG;EAErF,MAAM,eAAe;EACrB,OAAO;CACX,CAAC;CAED,gBAAgB;EACZ,MAAM,YAAY,UAAyB,iBAAiB,KAAK;EAEjE,SAAS,iBAAiB,WAAW,QAAQ;EAE7C,aAAa,SAAS,oBAAoB,WAAW,QAAQ;CACjE,GAAG,CAAC,CAAC;CAEL,OACI,qBAAC,UAAD;EACI,GAAI;EACJ,KAAK;EACL,MAAK;EACL,cAAY;EACZ,iBAAc;EACd,qBAAmB,GAAG,gBAAgB,SAAS,UAAU,GAAG,SAAS,YAAY;EACjF,SAAS;EACT,WAAU;EARd,UAAA;GAUI,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA;GAAY,CAAA;GACnE,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,KAAD,EAAA,UAAM,gBAAgB,IAAI,SAAS,YAAY,MAAM,QAAQ,SAAS,YAAY,IAAS,CAAA;GACzF,CAAA;EACF;;AAEhB"}
+{"version":3,"file":"CommandPaletteTrigger.js","names":[],"sources":["../../../src/layout/toolbar/CommandPaletteTrigger.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\nimport {\n    type CSSProperties,\n    forwardRef,\n    type ReactNode,\n    type Ref,\n    useEffect,\n    useEffectEvent,\n    useImperativeHandle,\n    useRef,\n} from 'react';\n\nimport { Kbd } from '../../display/Kbd';\nimport { tabbable } from '../../foundations/KeyboardFocus';\nimport { applePlatform, isShortcut } from '../../foundations/KeyboardShortcut';\nimport { fitTrigger, useTriggerRoom } from './TriggerFit';\n\n/** What narrows the palette, shown in the trigger as a small chip. */\nexport interface CommandPaletteTriggerToken {\n    id: string;\n    label: string;\n    /** An icon or colour mark before the label. */\n    leading?: ReactNode;\n    /** A lar-brand app hue that colours the chip, as a kind's badge. */\n    hue?: number;\n}\n\ninterface CommandPaletteTriggerProps {\n    label: string;\n    onOpen: () => void;\n    /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */\n    shortcut: string;\n    /** What narrows the palette now, such as filters. With tokens, the trigger measures its own room: the chips go\n     *  into a count from the last, then it folds to its icon. */\n    tokens?: readonly CommandPaletteTriggerToken[];\n    /** The accessible name's addition while tokens show, such as \"filtered by bug, docs\". */\n    filterLabel?: (labels: readonly string[]) => string;\n}\n\nconst chip =\n    'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-base-200 px-1 text-2xs font-medium text-base-800 dark:bg-base-300 dark:text-base-content [&_svg]:size-3';\n\nfunction TokenChip({ token }: { token: CommandPaletteTriggerToken }) {\n    const hued = token.hue !== undefined;\n\n    return (\n        <span\n            title={token.label}\n            className={`${chip} ${hued ? 'kind-badge!' : ''}`}\n            style={hued ? ({ '--lar-kind-hue': token.hue } as CSSProperties) : undefined}\n        >\n            {token.leading}\n            <span className=\"max-w-32 min-w-0 truncate\">{token.label}</span>\n        </span>\n    );\n}\n\n/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its\n *  icon when the title bar is narrow. With tokens, it also says what narrows the palette. */\nexport const CommandPaletteTrigger = forwardRef<HTMLButtonElement, CommandPaletteTriggerProps>(\n    ({ label, onOpen, shortcut, tokens, filterLabel }, ref) => {\n        const button = useRef<HTMLButtonElement>(null);\n        const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {\n            // An open dialog hides the page behind it, the trigger included.\n            if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden=\"true\"]')) return;\n\n            event.preventDefault();\n            onOpen();\n        });\n\n        useImperativeHandle(ref, () => button.current!);\n        useEffect(() => {\n            const listener = (event: KeyboardEvent) => openFromShortcut(event);\n\n            document.addEventListener('keydown', listener);\n\n            return () => document.removeEventListener('keydown', listener);\n        }, []);\n\n        const keys = `${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`;\n        const hint = applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`;\n\n        if (tokens)\n            return (\n                <FittedTrigger\n                    button={button}\n                    label={label}\n                    onOpen={onOpen}\n                    tokens={tokens}\n                    filterLabel={filterLabel}\n                    keys={keys}\n                    hint={hint}\n                />\n            );\n\n        return (\n            <button\n                {...tabbable}\n                ref={button}\n                type=\"button\"\n                aria-label={label}\n                aria-haspopup=\"dialog\"\n                aria-keyshortcuts={keys}\n                onClick={onOpen}\n                className=\"text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0\"\n            >\n                <SearchIcon />\n                <span className=\"hidden flex-1 text-left @2xl:inline\">{label}</span>\n                <span className=\"hidden pointer-fine:@2xl:inline\">\n                    <Kbd>{hint}</Kbd>\n                </span>\n            </button>\n        );\n    },\n);\n\nCommandPaletteTrigger.displayName = 'CommandPaletteTrigger';\n\n/** The trigger with tokens, up to 26rem wide: it measures its room and the chips in a hidden copy, then shows what\n *  fits (TriggerFit.ts). */\nfunction FittedTrigger({\n    button,\n    label,\n    onOpen,\n    tokens,\n    filterLabel,\n    keys,\n    hint,\n}: {\n    button: Ref<HTMLButtonElement>;\n    label: string;\n    onOpen: () => void;\n    tokens: readonly CommandPaletteTriggerToken[];\n    filterLabel?: (labels: readonly string[]) => string;\n    keys: string;\n    hint: string;\n}) {\n    const wrapper = useRef<HTMLDivElement>(null);\n    const ghost = useRef<HTMLDivElement>(null);\n    const { room, widths } = useTriggerRoom(wrapper, ghost, tokens.map(({ id }) => id).join());\n    const { shown, keyHint, folded, width } = fitTrigger(room, widths);\n    const hidden = tokens.slice(shown);\n    const labels = tokens.map((token) => token.label);\n\n    return (\n        <div ref={wrapper} className=\"relative ml-auto flex max-w-[26rem] min-w-0 flex-1 justify-end\">\n            <div\n                ref={ghost}\n                aria-hidden=\"true\"\n                className=\"invisible absolute right-0 flex h-0 w-max gap-1 overflow-hidden\"\n            >\n                {tokens.map((token) => (\n                    <TokenChip key={token.id} token={token} />\n                ))}\n            </div>\n            <button\n                {...tabbable}\n                ref={button}\n                type=\"button\"\n                data-search-field\n                data-folded={folded || undefined}\n                aria-haspopup=\"dialog\"\n                aria-keyshortcuts={keys}\n                aria-label={tokens.length && filterLabel ? `${label}, ${filterLabel(labels)}` : label}\n                onClick={onOpen}\n                style={folded ? undefined : { width }}\n                className={`text-base-700 focus-visible:outline-primary relative flex h-7 shrink-0 cursor-pointer items-center rounded-lg text-xs transition-colors focus-visible:outline-2 ${\n                    folded\n                        ? 'hover:bg-base-200 hover:text-base-content dark:hover:bg-base-300 w-7 justify-center'\n                        : 'border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-200 gap-1 border pr-2 pl-1.5'\n                }`}\n            >\n                <SearchIcon aria-hidden=\"true\" className={`shrink-0 ${folded ? 'size-4' : 'mr-0.5 size-3.5'}`} />\n                {folded ? (\n                    tokens.length > 0 && (\n                        <span\n                            data-search-count\n                            className=\"bg-primary text-2xs text-primary-content absolute -top-0.5 -right-0.5 grid h-3.5 min-w-3.5 place-items-center rounded-full px-0.5 leading-none font-semibold tabular-nums\"\n                        >\n                            {tokens.length}\n                        </span>\n                    )\n                ) : (\n                    <>\n                        {tokens.slice(0, shown).map((token) => (\n                            <TokenChip key={token.id} token={token} />\n                        ))}\n                        {hidden.length > 0 && (\n                            <span\n                                data-search-count\n                                title={hidden.map((token) => token.label).join(', ')}\n                                className={`${chip} tabular-nums`}\n                            >\n                                {shown > 0 ? '+' : ''}\n                                {hidden.length}\n                            </span>\n                        )}\n                        <span className=\"ml-0.5 min-w-0 flex-1 truncate text-left\">{label}</span>\n                        {keyHint && (\n                            <span className=\"shrink-0 pointer-coarse:hidden\">\n                                <Kbd>{hint}</Kbd>\n                            </span>\n                        )}\n                    </>\n                )}\n            </button>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layout/toolbar/TriggerFit.js

@@ -0,0 +1,56 @@
+import { useLayoutEffect, useState } from "react";
+// src/layout/toolbar/TriggerFit.ts
+const KEY_HINT = 34;
+const GAP = 4;
+/** lar-server's trigger width, which the field keeps until its tokens ask for more. */
+const MIN_WIDTH = 224;
+/** Up to this title bar width, the smallest phones', the field folds. Its row there still has room for the word, as the
+*  bar gives its actions their own row, so the room alone would never fold it. */
+const NARROWEST_BAR = 340;
+function fitTrigger({ field: room, bar }, tokenWidths) {
+	const tokens = (count) => tokenWidths.slice(0, count).reduce((sum, width) => sum + width + GAP, 0);
+	const used = (count) => 76 + tokens(count) + (count < tokenWidths.length ? 28 : 0);
+	let shown = tokenWidths.length;
+	while (shown > 0 && used(shown) > room) shown--;
+	return {
+		shown,
+		keyHint: shown === tokenWidths.length && used(shown) + KEY_HINT + GAP <= room,
+		folded: bar <= NARROWEST_BAR || used(shown) > room,
+		width: Math.min(room, Math.max(MIN_WIDTH, used(tokenWidths.length) + KEY_HINT + GAP))
+	};
+}
+/** The room in `wrapper` and the title bar holding it, and each child's width in `ghost`, which draws every token out of
+*  sight to be measured. */
+function useTriggerRoom(wrapper, ghost, tokens) {
+	const [room, setRoom] = useState({
+		field: 0,
+		bar: 0
+	});
+	const [widths, setWidths] = useState([]);
+	useLayoutEffect(() => {
+		const measure = () => {
+			setRoom({
+				field: wrapper.current.getBoundingClientRect().width,
+				bar: (wrapper.current.closest("header") ?? wrapper.current).getBoundingClientRect().width
+			});
+			const next = [...ghost.current.children].map((child) => child.offsetWidth);
+			setWidths((now) => now.join() === next.join() ? now : next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(wrapper.current);
+		observer.observe(ghost.current);
+		return () => observer.disconnect();
+	}, [
+		wrapper,
+		ghost,
+		tokens
+	]);
+	return {
+		room,
+		widths
+	};
+}
+export { fitTrigger, useTriggerRoom };
+
+//# sourceMappingURL=TriggerFit.js.map

package/dist/layout/toolbar/TriggerFit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriggerFit.js","names":[],"sources":["../../../src/layout/toolbar/TriggerFit.ts"],"sourcesContent":["// What the command palette trigger shows, with tokens, in the room it has. Tokens go from the last, into a count,\n// while the word Search and the count still fit; the key hint shows only with every token and room to spare; below the\n// word's room, or on the narrowest title bar, the field folds to its magnifier with a count. Widths are in pixels, in\n// the field's `text-xs`.\nimport { type RefObject, useLayoutEffect, useState } from 'react';\n\n/** The field's left padding, magnifier, gap and right padding. */\nconst CHROME = 34;\nconst SEARCH_WORD = 42;\nconst COUNT = 24;\nconst KEY_HINT = 34;\nconst GAP = 4;\n/** lar-server's trigger width, which the field keeps until its tokens ask for more. */\nconst MIN_WIDTH = 224;\n/** Up to this title bar width, the smallest phones', the field folds. Its row there still has room for the word, as the\n *  bar gives its actions their own row, so the room alone would never fold it. */\nconst NARROWEST_BAR = 340;\n\ninterface FieldRoom {\n    /** What the field may fill. */\n    field: number;\n    /** The title bar's width. */\n    bar: number;\n}\n\nexport interface TriggerFit {\n    /** How many tokens show; the rest are in the count. */\n    shown: number;\n    keyHint: boolean;\n    folded: boolean;\n    width: number;\n}\n\nexport function fitTrigger({ field: room, bar }: FieldRoom, tokenWidths: readonly number[]): TriggerFit {\n    const tokens = (count: number) => tokenWidths.slice(0, count).reduce((sum, width) => sum + width + GAP, 0);\n    const used = (count: number) =>\n        CHROME + SEARCH_WORD + tokens(count) + (count < tokenWidths.length ? COUNT + GAP : 0);\n    let shown = tokenWidths.length;\n\n    while (shown > 0 && used(shown) > room) shown--;\n\n    return {\n        shown,\n        keyHint: shown === tokenWidths.length && used(shown) + KEY_HINT + GAP <= room,\n        folded: bar <= NARROWEST_BAR || used(shown) > room,\n        width: Math.min(room, Math.max(MIN_WIDTH, used(tokenWidths.length) + KEY_HINT + GAP)),\n    };\n}\n\n/** The room in `wrapper` and the title bar holding it, and each child's width in `ghost`, which draws every token out of\n *  sight to be measured. */\nexport function useTriggerRoom(\n    wrapper: RefObject<HTMLElement | null>,\n    ghost: RefObject<HTMLElement | null>,\n    tokens: string,\n) {\n    const [room, setRoom] = useState({ field: 0, bar: 0 });\n    const [widths, setWidths] = useState<number[]>([]);\n\n    useLayoutEffect(() => {\n        const measure = () => {\n            setRoom({\n                field: wrapper.current!.getBoundingClientRect().width,\n                bar: (wrapper.current!.closest('header') ?? wrapper.current!).getBoundingClientRect().width,\n            });\n\n            const next = [...ghost.current!.children].map((child) => (child as HTMLElement).offsetWidth);\n\n            setWidths((now) => (now.join() === next.join() ? now : next));\n        };\n\n        measure();\n\n        // The ghost resizes too when a late web font changes the tokens' widths.\n        const observer = new ResizeObserver(measure);\n\n        observer.observe(wrapper.current!);\n        observer.observe(ghost.current!);\n\n        return () => observer.disconnect();\n    }, [wrapper, ghost, tokens]);\n\n    return { room, widths };\n}\n"],"mappings":";;AAUA,MAAM,WAAW;AACjB,MAAM,MAAM;;AAEZ,MAAM,YAAY;;;AAGlB,MAAM,gBAAgB;AAiBtB,SAAgB,WAAW,EAAE,OAAO,MAAM,OAAkB,aAA4C;CACpG,MAAM,UAAU,UAAkB,YAAY,MAAM,GAAG,KAAK,CAAC,CAAC,QAAQ,KAAK,UAAU,MAAM,QAAQ,KAAK,CAAC;CACzG,MAAM,QAAQ,UACV,KAAuB,OAAO,KAAK,KAAK,QAAQ,YAAY,SAAS,KAAc;CACvF,IAAI,QAAQ,YAAY;CAExB,OAAO,QAAQ,KAAK,KAAK,KAAK,IAAI,MAAM;CAExC,OAAO;EACH;EACA,SAAS,UAAU,YAAY,UAAU,KAAK,KAAK,IAAI,WAAW,OAAO;EACzE,QAAQ,OAAO,iBAAiB,KAAK,KAAK,IAAI;EAC9C,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI,WAAW,KAAK,YAAY,MAAM,IAAI,WAAW,GAAG,CAAC;CACxF;AACJ;;;AAIA,SAAgB,eACZ,SACA,OACA,QACF;CACE,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,KAAK;CAAE,CAAC;CACrD,MAAM,CAAC,QAAQ,aAAa,SAAmB,CAAC,CAAC;CAEjD,sBAAsB;EAClB,MAAM,gBAAgB;GAClB,QAAQ;IACJ,OAAO,QAAQ,QAAS,sBAAsB,CAAC,CAAC;IAChD,MAAM,QAAQ,QAAS,QAAQ,QAAQ,KAAK,QAAQ,QAAA,CAAU,sBAAsB,CAAC,CAAC;GAC1F,CAAC;GAED,MAAM,OAAO,CAAC,GAAG,MAAM,QAAS,QAAQ,CAAC,CAAC,KAAK,UAAW,MAAsB,WAAW;GAE3F,WAAW,QAAS,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI,MAAM,IAAK;EAChE;EAEA,QAAQ;EAGR,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,QAAQ,OAAQ;EACjC,SAAS,QAAQ,MAAM,OAAQ;EAE/B,aAAa,SAAS,WAAW;CACrC,GAAG;EAAC;EAAS;EAAO;CAAM,CAAC;CAE3B,OAAO;EAAE;EAAM;CAAO;AAC1B"}

package/dist/navigation/CollectionBrowseSelector.js

@@ -2,8 +2,8 @@ import { Button } from "../actions/Button.js";
 import { Badge } from "../display/Badge.js";
 import { DropdownMenu } from "../overlays/DropdownMenu.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/navigation/CollectionBrowseSelector.tsx
 const CollectionBrowseTrigger = forwardRef(({ label, icon, active = false, ...props }, ref) => /* @__PURE__ */ jsxs(Button, {
 	ref,

package/dist/navigation/CollectionViewToggle.d.ts

@@ -1,4 +1,30 @@
+import { ReactNode } from "react";
 export type CollectionView = 'grid' | 'table';
+/** One way of drawing a view, as ViewToggle offers it: its icon, named by its label (or, as `text`, its label alone).
+ *  `attributes` are `data-*` markers for its button, such as the pane it shows. */
+export interface ViewToggleOption<V extends string> {
+  value: V;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  attributes?: {
+    [name: `data-${string}`]: string;
+  };
+}
+/**
+ * A group of icon buttons that picks one way of drawing a view, the picked one raised. `compact` draws 24px buttons with
+ * 14px icons, for a row's line. As `text`, each button is its label in small type, such as a dialog's panes in its
+ * header.
+ */
+export declare function ViewToggle<V extends string>({ label, options, value, onChange, compact, presentation }: {
+  /** Names the group; with none, the group is named by its options alone. */
+  label?: string;
+  options: readonly ViewToggleOption<V>[];
+  value: V;
+  onChange: (view: V) => void;
+  compact?: boolean;
+  presentation?: 'icons' | 'text';
+}): import("react").JSX.Element;
 interface CollectionViewToggleProps {
   disabledViews?: readonly CollectionView[];
   gridLabel: string;