@fastrd/ui-vue 0.1.1 → 0.2.0

package/NOTICE.md

@@ -11,8 +11,9 @@ value/options/change contract and delegates interaction to the native select.
 
 The palette follows FastWrite's semantic colors and the approved FastTask
 workbench design. Only generic UI code and semantic design values are included.
-No private artwork, icons, logos, fonts, application data, product-specific
-workflows or brand assets are distributed. Upstream product repositories
+No private artwork, icons, logos, application data, product-specific workflows
+or brand assets are distributed in the UI packages. Documentation fonts are
+licensed separately as described below. Upstream product repositories
 retain ownership of their application-specific code and assets.
 
 Source reference revisions: FastPPT `f6bf21f13445c2507719928fa68550552a8fcab2`
@@ -21,3 +22,34 @@ Source reference revisions: FastPPT `f6bf21f13445c2507719928fa68550552a8fcab2`
 At both revisions, `primitives.ts` has Git blob
 `c7123af5f8316bc0486bce5c99cfbb2e9ab3dc73` and `use-dialog-focus.ts` has
 Git blob `3ffbb6c6c7bd5e3c96f2b8c05c5e008dcdfc4cab`.
+
+# FastUI notices
+
+FastUI is an MIT-licensed design foundation and component library extracted from
+shared interface work in FastR-D products. Product data, authentication, assets
+and application workflows are not included.
+
+The design aligns with the 2026-11-11 FastWrite workbench: compact geometry,
+semantic light/dark colors, typography, flat tabs, project lists and focus states.
+
+Design research used the fixed checkouts in FastWrite/reference:
+
+- assistant-ui/assistant-ui (MIT), f92028b466cba721846de6851e4dddb6c04ecfad:
+  composable surfaces and separation of display from runtime state.
+- shadcn-ui/ui (MIT), 8ab27715521cbd4f87ae6886cd989cbb678f6de7:
+  semantic tokens, variants and explicit focus/disabled states.
+- radix-ui/primitives (MIT), eb3a2b7091293e27df8f9ba906632d8daa3d81a3:
+  keyboard navigation, disabled-item handling and focus order.
+- nextlevelbuilder/ui-ux-pro-max-skill (MIT), 6ae86f61f520d6ca229d2f40e070410638c908c5:
+  navigation, deep links and reduced-motion guidance.
+- ayaka-notes/ayakaleaf-pro (AGPL-3.0), 6ce22039d19b516354dff2a8508dd67515ded9f0:
+  project-list layout and interaction research only.
+
+The workbench implementations are original. No source from these reference libraries,
+including the AGPL project, is copied into the distributed MIT packages. Exact
+repository URLs and revisions are recorded in docs/reference-sources.json.
+
+The documentation site self-hosts IBM Plex Sans Variable 5.3.0, Noto Sans SC
+Variable 5.3.1 and JetBrains Mono Variable 5.3.0 through Fontsource. These fonts use
+SIL Open Font License 1.1; their original license texts are shipped with the
+site under docs/public/licenses/fonts/. Font files are not shipped in UI packages.

package/README.md

@@ -1,6 +1,6 @@
 # @fastrd/ui-vue
 
-MIT · 0.1.1 · Vue ^3.5 peer · exact foundation 0.1.1 registry dependency.
+MIT · 0.2.0 · Vue ^3.5 peer · exact foundation 0.2.0 registry dependency.
 
 ```vue
 <script setup>
@@ -49,3 +49,31 @@ modal behavior replaces the original custom focus trap.
 
 Class names use fastui-*; no legacy fp-* aliases or application brands are
 included. Application layouts and preview styles stay with the host.
+
+
+## Workbench components
+
+`TabBar`: `tabs`, `activeId`, accessible `label`, `onSelect` (Vue `@select`),
+optional `onClose` (Vue `@close`), `closeLabel(tab)` and `dirtyLabel`.
+Each TabItem has a unique DOM `id`, string `label`, optional `controls`,
+`disabled`, `dirty`, `preview`. Host panels use `role="tabpanel"`, `id=controls`
+and `aria-labelledby=activeId`; host owns visibility and active selection after
+close. Automatic activation uses Left/Right, Home/End, RTL and disabled skipping.
+Closing restores focus to the remaining tabbable tab. Empty/all-disabled lists
+have no tabbable tab. Use unique ids across every instance.
+
+`SegmentedControl`: `options` ({value,label,disabled?}), `value`, `label`,
+`onChange` (Vue `@change`). A controlled mutually exclusive pressed-button group;
+uses normal Tab order, not radio semantics.
+
+`Toolbar` requires `label`; it groups mixed actions/fields with native Tab order.
+`StatusBar` defaults role=status. `Section`, `ListRow`, `Divider` provide surfaces,
+row separators and structure. ListRow is a noninteractive div by default; the
+host owns selection, links, data, search and sorting.
+
+Compact control sizes xs/sm/md are 24/25/28px. Typography uses the FastWrite
+Plex/Noto stack with system fallback; fonts are loaded by the host, not the package.
+
+`Alert` and `Badge`: tone info/success/warning/danger. Alert defaults role=status,
+or alert for danger. `Loading` exposes a status region and label (default Loading).
+`EmptyState` takes title, default content and an optional `#action` slot.

package/dist/feedback.d.ts

@@ -0,0 +1,13 @@
+import { type FunctionalComponent, type HTMLAttributes } from 'vue';
+export type Tone = 'info' | 'success' | 'warning' | 'danger';
+export interface FeedbackProps extends HTMLAttributes {
+    tone?: Tone;
+}
+export declare const Alert: FunctionalComponent<FeedbackProps>;
+export declare const Badge: FunctionalComponent<FeedbackProps>;
+export declare const EmptyState: FunctionalComponent<HTMLAttributes & {
+    title: string;
+}>;
+export declare const Loading: FunctionalComponent<HTMLAttributes & {
+    label?: string;
+}>;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './primitives.js';
 export { Modal, Select, useDialogFocus } from './interactive.js';
 export type { ModalProps, SelectProps, SelectItem } from './interactive.js';
+export * from './workbench.js';
+export * from './feedback.js';

package/dist/index.js

@@ -106,6 +106,12 @@ var SelectOption = element("SelectOption", "option");
 var RichText = (props, { attrs }) => h("div", mergeProps(attrs, { innerHTML: props.html }));
 RichText.props = ["html"];
 RichText.inheritAttrs = false;
+var Section = element("Section", "section", "fastui-section");
+var StatusBar = (props, { attrs, slots }) => h(props.as ?? "div", mergeProps({ role: "status" }, attrs, { class: "fastui-statusbar" }), slots.default?.());
+StatusBar.props = ["as"];
+StatusBar.inheritAttrs = false;
+var Divider = element("Divider", "hr", "fastui-divider");
+var ListRow = element("ListRow", "div", "fastui-list-row");
 
 // packages/vue/src/interactive.ts
 import {
@@ -193,9 +199,88 @@ Select.props = {
   onChange: Function
 };
 Select.inheritAttrs = false;
+
+// packages/vue/src/workbench.ts
+import { h as h3, mergeProps as mergeProps3, nextTick } from "vue";
+import { tabNavigationIndex } from "@fastrd/ui-foundation";
+var TabBar = (props, { attrs }) => {
+  const focusId = props.tabs.find((tab) => tab.id === props.activeId && !tab.disabled)?.id ?? props.tabs.find((tab) => !tab.disabled)?.id;
+  return h3("div", mergeProps3(attrs, { class: ["fastui-tabs", props.onClose && "fastui-tabs--closable"], role: "group", "aria-label": `${props.label} controls` }), [
+    h3("div", { role: "tablist", "aria-label": props.label, "aria-owns": props.tabs.map((tab) => tab.id).join(" ") || void 0 }),
+    ...props.tabs.map((tab, index) => h3("div", { key: tab.id, class: "fastui-tab-item" }, [
+      h3("button", {
+        type: "button",
+        id: tab.id,
+        role: "tab",
+        disabled: tab.disabled,
+        "aria-selected": tab.id === props.activeId,
+        "aria-controls": tab.controls,
+        tabindex: tab.id === focusId ? 0 : -1,
+        class: ["fastui-tab", tab.preview && "fastui-tab--preview"],
+        onClick: () => props.onSelect(tab.id),
+        onKeydown: (event) => {
+          if (event.isComposing) return;
+          const target = event.currentTarget;
+          const next = tabNavigationIndex(event.key, index, props.tabs, getComputedStyle(target).direction === "rtl");
+          if (next < 0) return;
+          event.preventDefault();
+          props.onSelect(props.tabs[next].id);
+          const button = target.closest(".fastui-tabs")?.querySelectorAll('[role="tab"]')[next];
+          button?.focus();
+          button?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+      }, [h3("span", { class: "fastui-tab-label" }, tab.label), tab.dirty ? h3("span", { class: "fastui-tab-dirty", role: "img", "aria-label": props.dirtyLabel ?? "Unsaved changes" }) : null]),
+      props.onClose ? h3("button", {
+        type: "button",
+        class: "fastui-tab-close",
+        disabled: tab.disabled,
+        "aria-label": props.closeLabel?.(tab) ?? `Close ${tab.label}`,
+        onClick: (event) => {
+          const root = event.currentTarget.closest(".fastui-tabs");
+          props.onClose?.(tab.id);
+          void nextTick(() => {
+            if (root.isConnected) root.querySelector('[role="tab"][tabindex="0"]')?.focus();
+          });
+        }
+      }, "\xD7") : null
+    ]))
+  ]);
+};
+TabBar.props = ["tabs", "activeId", "onSelect", "label", "onClose", "closeLabel", "dirtyLabel"];
+TabBar.inheritAttrs = false;
+var SegmentedControl = (props, { attrs }) => h3("div", mergeProps3(attrs, { class: "fastui-segments", role: "group", "aria-label": props.label }), props.options.map((option) => h3("button", {
+  type: "button",
+  key: option.value,
+  class: "fastui-segment",
+  disabled: option.disabled,
+  "aria-pressed": option.value === props.value,
+  onClick: () => props.onChange(option.value)
+}, option.label)));
+SegmentedControl.props = ["options", "value", "onChange", "label"];
+SegmentedControl.inheritAttrs = false;
+var Toolbar = (props, { attrs, slots }) => h3("div", mergeProps3(attrs, { class: "fastui-toolbar", role: "group", "aria-label": props.label }), slots.default?.());
+Toolbar.props = ["label"];
+Toolbar.inheritAttrs = false;
+
+// packages/vue/src/feedback.ts
+import { h as h4, mergeProps as mergeProps4 } from "vue";
+var Alert = (props, { attrs, slots }) => h4("div", mergeProps4({ role: props.tone === "danger" ? "alert" : "status" }, attrs, { class: ["fastui-alert", `fastui-tone-${props.tone ?? "info"}`] }), slots.default?.());
+Alert.props = ["tone"];
+Alert.inheritAttrs = false;
+var Badge = (props, { attrs, slots }) => h4("span", mergeProps4(attrs, { class: ["fastui-badge", `fastui-tone-${props.tone ?? "info"}`] }), slots.default?.());
+Badge.props = ["tone"];
+Badge.inheritAttrs = false;
+var EmptyState = (props, { attrs, slots }) => h4("div", mergeProps4(attrs, { class: "fastui-empty" }), [h4("h2", props.title), slots.default?.(), slots.action?.()]);
+EmptyState.props = ["title"];
+EmptyState.inheritAttrs = false;
+var Loading = (props, { attrs }) => h4("div", mergeProps4({ role: "status" }, attrs, { class: "fastui-loading" }), [h4("span", { class: "fastui-spinner", "aria-hidden": "true" }), props.label ?? "Loading"]);
+Loading.props = ["label"];
+Loading.inheritAttrs = false;
 export {
+  Alert,
   Article,
   Aside,
+  Badge,
   Box,
   Button,
   Description,
@@ -203,6 +288,8 @@ export {
   DialogSurface,
   Disclosure,
   DisclosureTrigger,
+  Divider,
+  EmptyState,
   Field,
   Fieldset,
   Footer,
@@ -215,6 +302,8 @@ export {
   Link,
   List,
   ListItem,
+  ListRow,
+  Loading,
   Main,
   Modal,
   ModalBody,
@@ -222,11 +311,15 @@ export {
   Panel,
   Progress,
   RichText,
+  Section,
+  SegmentedControl,
   Select,
   SelectField,
   SelectOption,
+  StatusBar,
   Svg,
   SvgPath,
+  TabBar,
   Table,
   TableBody,
   TableCaption,
@@ -238,5 +331,6 @@ export {
   Text,
   TextArea,
   TextField,
+  Toolbar,
   useDialogFocus
 };

package/dist/primitives.d.ts

@@ -67,3 +67,7 @@ export declare const SelectOption: FunctionalComponent<ElementProps, {}, any, {}
 export declare const RichText: FunctionalComponent<HTMLAttributes & {
     html: string;
 }>;
+export declare const Section: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const StatusBar: FunctionalComponent<ElementProps>;
+export declare const Divider: FunctionalComponent<ElementProps, {}, any, {}>;
+export declare const ListRow: FunctionalComponent<ElementProps, {}, any, {}>;

package/dist/workbench.d.ts

@@ -0,0 +1,34 @@
+import { type FunctionalComponent, type HTMLAttributes } from 'vue';
+export interface TabItem {
+    id: string;
+    label: string;
+    controls?: string;
+    disabled?: boolean;
+    dirty?: boolean;
+    preview?: boolean;
+}
+export interface TabBarProps {
+    tabs: readonly TabItem[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    label: string;
+    onClose?: (id: string) => void;
+    closeLabel?: (tab: TabItem) => string;
+    dirtyLabel?: string;
+}
+export declare const TabBar: FunctionalComponent<TabBarProps>;
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    options: readonly SegmentedOption[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+}
+export declare const SegmentedControl: FunctionalComponent<SegmentedControlProps>;
+export declare const Toolbar: FunctionalComponent<HTMLAttributes & {
+    label: string;
+}>;

package/package.json

@@ -1,17 +1,37 @@
 {
   "name": "@fastrd/ui-vue",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Vue primitives and accessible native controls for FastUI",
   "type": "module",
   "license": "MIT",
-  "repository": {"type":"git","url":"git+https://github.com/FastR-D/FastUI.git","directory":"packages/vue"},
-  "publishConfig": {"access":"public"},
-  "files": ["dist", "LICENSE", "README.md", "NOTICE.md"],
-  "sideEffects": ["**/*.css"],
-  "dependencies": {"@fastrd/ui-foundation":"0.1.1"},
-  "peerDependencies": {"vue":"^3.5.0"},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FastR-D/FastUI.git",
+    "directory": "packages/vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "NOTICE.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@fastrd/ui-foundation": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
   "exports": {
-    ".": {"types":"./dist/index.d.ts","import":"./dist/index.js"},
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./styles.css": "./dist/styles.css"
   }
 }