@synopackageland/ui 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog
 
-## Unreleased
+## 0.9.1 (2026-10-12)
+
+Two behavior changes: a Dialog without `width` is 520px wide inside `AppRoot`, and Breadcrumb's last level no longer emits `click-item`.
+兩項行為變化：`AppRoot` 內未指定 `width` 的 Dialog 寬 520px；Breadcrumb 最後一段不再發出 `click-item`。
+
+- **Behavior change.** Fix: Dialog's `width` applies again inside `AppRoot`. Since app-local modality, `max-width: calc(100% - 24px) !important` overrode it, so 480px or 800px dialogs stretched to almost the window width. A panel now narrows only when the app (or viewport) is narrower than `width`. Dialogs without `width` now take the 520px default instead of the window width; pass a larger `width` where a wide panel is wanted.
+- **行為變化。** 修正：`AppRoot` 內 Dialog 的 `width` 重新生效。自 app-local modal 起，`max-width: calc(100% - 24px) !important` 蓋掉它，480px／800px 的 Dialog 都被撐到接近視窗寬；現在只在 app（或 viewport）比 `width` 窄時才夾到可用寬度。未指定 `width` 的 Dialog 改用預設 520px，不再是視窗寬；需要寬面板請傳較大的 `width`。
+- Dialog takes `height` and `min-height`, so one row of content no longer leaves a flat panel. Both are capped to the available height, the body fills the panel and the footer stays at the bottom.
+- Dialog 新增 `height` 與 `min-height`，內容只有一列時不再變成扁平面板；兩者都夾到可用高度，內容區撐滿、footer 固定在底部。
+- `AppRoot` takes `dialog-bounds="viewport"` (app mode, default `app`): as in DSM, the mask covers only the owning window, while the Dialog panel can be dragged by its title bar (or moved with the arrow keys on its title) anywhere inside the browser viewport. It stacks with its window, hides with it, follows its moves, and becomes a bottom sheet below 600px or with a coarse pointer. Pressing it emits `activate` so the DSM host can bring the window forward. See `docs/app-local-modal.md`.
+- `AppRoot` 新增 `dialog-bounds="viewport"`（app 模式，預設 `app`）：與 DSM 原生一致，遮罩只蓋擁有它的視窗，Dialog 本體可用標題列拖移（或聚焦標題後用方向鍵）到瀏覽器 viewport 內任何位置；它隨視窗疊放與隱藏、跟著視窗移動，600px 以下或粗指標時改為底部 sheet。按下面板會發出 `activate`，讓 DSM host 把視窗帶到前面。詳見 `docs/app-local-modal.md`。
+- **Behavior change:** Breadcrumb's current (last) level is plain text with `aria-current="page"`, no longer a button that emits `click-item`. With an action menu it stays the menu trigger.
+- **行為變化：** Breadcrumb 的目前（最後）一段改為帶 `aria-current="page"` 的文字，不再是會發出 `click-item` 的按鈕；有 action menu 時仍是選單觸發鈕。
+- TreeView takes `selection-style="background"`: a selected row only gets the selected background, and its icon and text keep their colors, as in DSM File Station. The default `accent` is unchanged.
+- TreeView 新增 `selection-style="background"`：選中列只換背景，圖示與文字維持原色（DSM File Station 樣式）；預設 `accent` 不變。
+- DataGrid takes `single-select`: no checkbox column, a click selects one row, the rows are in the tab order (the selected row, else the first), the arrow keys move the selection and Enter emits `rowActivate`.
+- DataGrid 新增 `single-select`：無勾選框欄，點列單選；列可用鍵盤聚焦（選中列，否則第一列），方向鍵移動選取，Enter 觸發 `rowActivate`。
+- `FileTypeIcon` draws a folder (`kind="folder"`, `open`) or a file whose extension picks the icon (image, video, audio, archive, text, code, else a plain file). Its colours are the theme tokens `--ui-file-folder` (DSM 7 File Station yellow) and `--ui-file-icon`, so a theme recolours every file list; `fileTypeIcon(name)` returns the icon alone.
+- 新增 `FileTypeIcon`：畫資料夾（`kind="folder"`、`open`）或依副檔名選圖示的檔案（圖片、影片、音訊、壓縮檔、文字、程式碼，其餘為一般檔案）。顏色來自主題 token `--ui-file-folder`（DSM 7 File Station 黃色）與 `--ui-file-icon`，主題可一次改掉所有檔案列表的顏色；`fileTypeIcon(name)` 只回傳圖示元件。
 
 ## 0.9.0 (2026-10-11)
 

package/README.md

@@ -253,6 +253,12 @@ const open = ref(false)
 </template>
 ```
 
+`width` (default `520px`) is the panel's maximum width. `height` or
+`min-height` (for example `min-height="420px"`) keeps a panel with little
+content from collapsing. In a DSM window, `<AppRoot dialog-bounds="viewport">`
+lets dialogs be dragged out of the window, within the browser viewport. See
+[docs/app-local-modal.md](docs/app-local-modal.md#floating-dialogs-in-a-dsm-window).
+
 ### Toast notifications
 
 Wrap your page with `ToastProvider` in `App.vue`:

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -1,5 +1,11 @@
 type __VLS_Props = {
     modalScope?: 'document' | 'app';
+    /**
+     * `viewport` lets app-local dialogs leave the app window, as DSM's own
+     * dialogs do: the mask still covers only this root, the panel can be dragged
+     * anywhere in the viewport. Set it only inside a DSM window.
+     */
+    dialogBounds?: 'app' | 'viewport';
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -7,8 +13,13 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    activate: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: (() => any) | undefined;
+}>, {
     modalScope: "document" | "app";
+    dialogBounds: "app" | "viewport";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -103,6 +103,8 @@ type __VLS_Props = {
     selectable?: boolean;
     /** With `selectable`: a row click selects that row; Ctrl/Cmd-click toggles it. */
     selectOnRowClick?: boolean;
+    /** One selected row at a time, picked by clicking the row; no checkbox column. */
+    singleSelect?: boolean;
     page?: number;
     pageSize?: number;
     totalRows?: number;
@@ -172,6 +174,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any;
     rowClick: (row: Record<string, unknown>) => any;
     rowDblclick: (row: Record<string, unknown>) => any;
+    rowActivate: (row: Record<string, unknown>) => any;
     rowExpand: (key: string) => any;
     rowCollapse: (key: string) => any;
     groupToggle: (groupKey: string, expanded: boolean) => any;
@@ -201,6 +204,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any) | undefined;
     onRowClick?: ((row: Record<string, unknown>) => any) | undefined;
     onRowDblclick?: ((row: Record<string, unknown>) => any) | undefined;
+    onRowActivate?: ((row: Record<string, unknown>) => any) | undefined;
     onRowExpand?: ((key: string) => any) | undefined;
     onRowCollapse?: ((key: string) => any) | undefined;
     onGroupToggle?: ((groupKey: string, expanded: boolean) => any) | undefined;
@@ -222,6 +226,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     loading: boolean;
     group: DataGridGroup | null;
     loadingText: string;
+    draggable: boolean | DataGridDraggable;
     page: number;
     pageSize: number;
     rowKey: string;
@@ -229,6 +234,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     selectedKeys: string[];
     selectable: boolean;
     selectOnRowClick: boolean;
+    singleSelect: boolean;
     localSort: boolean;
     localPagination: boolean;
     loadingRows: number;
@@ -239,7 +245,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     expandable: DataGridExpandable | null;
     expandedKeys: string[];
     defaultExpandedKeys: string[];
-    draggable: boolean | DataGridDraggable;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/tree-view/TreeView.vue.d.ts

@@ -16,6 +16,8 @@ type __VLS_Props = {
     loadChildren?: (node: TreeNode) => Promise<TreeNode[] | undefined>;
     /** Localise the expand/collapse control. */
     expandLabel?: (node: TreeNode, expanded: boolean) => string;
+    /** `accent` also colors the selected icon and text; `background` only shades the row, as DSM File Station does. */
+    selectionStyle?: 'accent' | 'background';
 };
 declare function nodeById(id: string): TreeNode | undefined;
 declare function getCheckedNodes(includeHalf?: boolean): TreeNode[];
@@ -84,6 +86,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     checkable: boolean;
     defaultCheckedKeys: string[];
     loadChildren: (node: TreeNode) => Promise<TreeNode[] | undefined>;
+    selectionStyle: "accent" | "background";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/containers/expandable-item/ExpandableItem.vue.d.ts

@@ -64,9 +64,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onDrag-over"?: ((event: DragEvent) => any) | undefined;
     "onDrag-end"?: ((event: DragEvent) => any) | undefined;
 }>, {
+    draggable: boolean;
     selectable: boolean;
     expandable: boolean;
-    draggable: boolean;
     expanded: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/feedback/notification/Notification.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     open: boolean;
     tone: NotificationTone;
     content: string | false;
-    duration: number | false;
     cancel: NotificationAction;
+    duration: number | false;
     confirm: NotificationAction;
     paused: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/breadcrumb/BreadcrumbCrumb.vue.d.ts

@@ -5,7 +5,11 @@ type __VLS_Props = {
     /** The level owns the action menu, so it shows a dropdown chevron. */
     hasMenu?: boolean;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
     current: boolean;
     hasMenu: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/dialog/Dialog.vue.d.ts

@@ -4,17 +4,21 @@ type __VLS_Props = {
     title?: string;
     description?: string;
     width?: string;
+    /** A fixed panel height, capped to the available height. */
+    height?: string;
+    /** Keeps the panel from shrinking with short content, capped to the available height. */
+    minHeight?: string;
     closeLabel?: string;
     /** Hides the header close affordance for fixed-flow dialogs that own their dismiss path. */
     showClose?: boolean;
 };
-declare var __VLS_14: {}, __VLS_62: {}, __VLS_64: {};
+declare var __VLS_14: {}, __VLS_71: {}, __VLS_73: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_62) => any;
+    default?: (props: typeof __VLS_71) => any;
 } & {
-    footer?: (props: typeof __VLS_64) => any;
+    footer?: (props: typeof __VLS_73) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;

package/dist/components/primitives/dialog/FloatingLayer.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    host: HTMLElement | null;
+};
+declare var __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/primitives/icon/FileTypeIcon.vue.d.ts

@@ -0,0 +1,17 @@
+import { IconSize } from './icon';
+type __VLS_Props = {
+    kind?: 'folder' | 'file';
+    /** A file's name; its extension picks the icon. */
+    name?: string;
+    /** Draws an open folder. */
+    open?: boolean;
+    size?: IconSize;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: IconSize;
+    name: string;
+    open: boolean;
+    kind: "folder" | "file";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/icon/fileType.d.ts

@@ -0,0 +1,3 @@
+import { LucideIcon } from '@lucide/vue';
+/** The icon for a file name, from its last extension; `File` when unknown. */
+export declare function fileTypeIcon(name?: string): LucideIcon;

package/dist/composables/floatingHost.d.ts

@@ -0,0 +1,21 @@
+import { Ref, ShallowRef } from 'vue';
+import { Box, Size } from '../lib/floatingDialog';
+export declare const FLOATING_HOST_KEY = "@synopkgland/floating-host";
+export declare const FLOATING_HOST_ATTRIBUTE = "data-ui-floating";
+export type FloatingHost = {
+    element: ShallowRef<HTMLElement | null>;
+    /** The app root's box, or null while its window is hidden. */
+    owner: ShallowRef<Box | null>;
+    viewport: ShallowRef<Size>;
+    /** False on a narrow viewport or with a coarse pointer: panels become viewport sheets. */
+    draggable: Ref<boolean>;
+};
+export declare function injectFloatingHost(): FloatingHost | null;
+/**
+ * A viewport-sized layer for dialogs that may leave the app window, as DSM's
+ * own dialogs do. It sits right after the window that owns the app, at that
+ * window's z-index, so other DSM windows still stack over both, and it hides
+ * with the window. It carries the app root attribute, so the scoped theme
+ * styles it, and it lets presses through except on panels.
+ */
+export declare function useFloatingHost(root: Ref<HTMLElement | null>, enabled: boolean, activate: () => void): FloatingHost | null;

package/dist/composables/floatingPlacement.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { Point } from '../lib/floatingDialog';
+import { FloatingHost } from './floatingHost';
+/**
+ * Places a floating dialog panel: centered over its app window when it opens,
+ * then moved by its title bar (pointer) or title (arrow keys), always kept
+ * inside the viewport and moved along with the app window.
+ */
+export declare function useFloatingPlacement(handle: Ref<HTMLElement | null>, host: FloatingHost | null): {
+    position: import('vue').ShallowRef<Point | null, Point | null>;
+    draggable: import('vue').ComputedRef<boolean>;
+    onPointerdown: (event: PointerEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/index.d.ts

@@ -48,6 +48,8 @@ export type { TabItem } from './components/primitives/tabs/Tabs.vue';
 export { default as Accordion } from './components/primitives/accordion/Accordion.vue';
 export type { AccordionEntry } from './components/primitives/accordion/Accordion.vue';
 export { default as Icon } from './components/primitives/icon/Icon.vue';
+export { default as FileTypeIcon } from './components/primitives/icon/FileTypeIcon.vue';
+export { fileTypeIcon } from './components/primitives/icon/fileType';
 export { useIconButton } from './components/primitives/icon/useIconButton';
 export type { IconButtonOptions } from './components/primitives/icon/useIconButton';
 export { clearIconRegistry, getRegisteredIcon, registerIcons } from './components/primitives/icon/iconRegistry';