@construct-space/ui 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,102 @@
+# @construct-space/ui
+
+Vue 3 component library for Construct services. 43 production components, shared layouts, composables, and design tokens.
+
+## Install
+
+```bash
+npm install @construct-space/ui
+# or
+bun add @construct-space/ui
+```
+
+### Peer Dependencies
+
+```bash
+npm install vue reka-ui @iconify/vue
+```
+
+## Usage
+
+```ts
+// Import components individually
+import { CButton, CInput, CModal, CToast } from '@construct-space/ui'
+
+// Import shared styles (tokens + utility classes)
+import '@construct-space/ui/style.css'
+
+// Or register all components globally
+import { createApp } from 'vue'
+import ConstructUI from '@construct-space/ui'
+
+const app = createApp(App)
+app.use(ConstructUI)
+```
+
+## Components
+
+| Category | Components |
+|----------|-----------|
+| **Form** | `CButton`, `CInput`, `CTextarea`, `CSelect`, `CSelectMenu`, `CCheckbox`, `CRadioGroup`, `CSwitch`, `CSlider`, `CColorPicker`, `CFormField` |
+| **Layout** | `CCard`, `CModal`, `CDrawer`, `CSlideover`, `CPopover`, `CDashboardPanel`, `CPanelSection`, `CPropRow`, `CSeparator`, `CScrollArea` |
+| **Data** | `CTable`, `CCalendar`, `CTree`, `CTimeline`, `CPagination` |
+| **Feedback** | `CAlert`, `CBadge`, `CChip`, `CProgress`, `CSkeleton`, `CEmpty`, `CToast` |
+| **Menu** | `CDropdown`, `CDropdownMenu`, `CDropdownMenuItem`, `CContextMenu` |
+| **Display** | `CIcon`, `CAvatar`, `CAccordion`, `CTabs`, `CTooltip`, `CKbd` |
+
+## Layouts
+
+```vue
+<!-- 60px icon sidebar (billing, delivery pattern) -->
+<SidebarLayout
+  :nav-items="[{ icon: 'home', label: 'Dashboard', to: '/', active: true }]"
+  user-name="John"
+  @navigate="router.push($event)"
+  @logout="auth.logout()"
+>
+  <router-view />
+</SidebarLayout>
+
+<!-- Top header bar -->
+<HeaderLayout
+  service-name="domains"
+  :nav-items="[{ label: 'Dashboard', to: '/' }]"
+>
+  <router-view />
+</HeaderLayout>
+```
+
+## Composables
+
+```ts
+import { useToast, useAuth } from '@construct-space/ui'
+
+// Toast notifications
+const { add, remove, clear } = useToast()
+add({ title: 'Saved', color: 'success' })
+
+// Auth session management
+const { user, login, logout, checkSession } = useAuth({
+  mePath: '/api/auth/me',
+  loginPath: '/api/auth/login',
+})
+```
+
+## Theming
+
+Override CSS variables to customize colors per service:
+
+```css
+:root {
+  --app-accent: #d4a843;      /* billing: gold */
+  --app-accent: #ec4899;      /* domains: pink */
+  --app-accent: #FF2D55;      /* delivery: red */
+  --app-background: #18181b;
+  --app-foreground: #fafafa;
+  --app-border: #27272a;
+}
+```
+
+## License
+
+MIT

package/dist/construct-ui.js

@@ -12764,7 +12764,7 @@ var Qu = /* @__PURE__ */ _({
 		M(() => {
 			document.addEventListener("keydown", c);
 		}), N(() => {
-			document.removeEventListener("keydown", c);
+			document.removeEventListener("keydown", c), document.body.style.overflow = "";
 		}), U(() => n.open, (e) => {
 			document.body.style.overflow = e ? "hidden" : "";
 		});
@@ -15097,16 +15097,16 @@ var eg = { class: "fixed top-4 right-4 z-[100] flex flex-col gap-2 w-80" }, tg =
 			"drop-position"
 		]))), 128))], 544));
 	}
-}), yg = /* @__PURE__ */ q({ default: () => bg }), bg = /* @__PURE__ */ bm(vg, [["__scopeId", "data-v-9be5dd89"]]), xg = { class: "cui-sidebar-layout" }, Sg = { class: "cui-sidebar" }, Cg = { class: "cui-sidebar-logo" }, wg = ["innerHTML"], Tg = {
+}), yg = /* @__PURE__ */ q({ default: () => bg }), bg = /* @__PURE__ */ bm(vg, [["__scopeId", "data-v-9be5dd89"]]), xg = { class: "cui-sidebar-layout" }, Sg = { class: "cui-sidebar" }, Cg = { class: "cui-sidebar-logo" }, wg = { key: 0 }, Tg = {
 	key: 1,
 	class: "cui-sidebar-logo-text"
-}, Eg = { class: "cui-sidebar-nav" }, Dg = ["onClick", "onMouseenter"], Og = ["innerHTML"], kg = {
+}, Eg = { class: "cui-sidebar-nav" }, Dg = ["onClick", "onMouseenter"], Og = {
 	key: 0,
 	class: "cui-sidebar-tooltip"
-}, Ag = { class: "cui-sidebar-user" }, jg = ["src", "alt"], Mg = { key: 1 }, Ng = {
+}, kg = { class: "cui-sidebar-user" }, Ag = ["src", "alt"], jg = { key: 1 }, Mg = {
 	key: 0,
 	class: "cui-sidebar-user-menu"
-}, Pg = { class: "cui-sidebar-main" }, Fg = /* @__PURE__ */ _({
+}, Ng = { class: "cui-sidebar-main" }, Pg = /* @__PURE__ */ _({
 	__name: "SidebarLayout",
 	props: {
 		navItems: { default: () => [] },
@@ -15118,37 +15118,41 @@ var eg = { class: "fixed top-4 right-4 z-[100] flex flex-col gap-2 w-80" }, tg =
 	},
 	emits: ["navigate", "logout"],
 	setup(e, { emit: t }) {
-		let r = e, i = t, a = I(!1), o = I(null), s = c(() => r.userName ? r.userName.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2) : "?");
-		return (t, r) => (P(), d("div", xg, [f("aside", Sg, [
-			f("div", Cg, [R(t.$slots, "logo", {}, () => [e.serviceIcon ? (P(), d("span", {
-				key: 0,
-				innerHTML: e.serviceIcon
-			}, null, 8, wg)) : (P(), d("span", Tg, "C"))])]),
+		function r(e) {
+			return e.includes(":") ? e : e.startsWith("lucide-") ? e.replace("-", ":") : `lucide:${e}`;
+		}
+		let i = e, a = t, o = I(!1), s = I(null), l = c(() => i.userName ? i.userName.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2) : "?");
+		return (t, i) => (P(), d("div", xg, [f("aside", Sg, [
+			f("div", Cg, [R(t.$slots, "logo", {}, () => [e.serviceIcon ? (P(), d("span", wg, z(e.serviceIcon), 1)) : (P(), d("span", Tg, "C"))])]),
 			f("nav", Eg, [(P(!0), d(n, null, L(e.navItems, (e) => (P(), d("div", {
 				key: e.to,
 				class: k(["cui-sidebar-nav-item", { active: e.active }]),
-				onClick: (t) => i("navigate", e.to),
-				onMouseenter: (t) => o.value = e.to,
-				onMouseleave: r[0] ||= (e) => o.value = null
-			}, [f("span", { innerHTML: e.icon }, null, 8, Og), o.value === e.to ? (P(), d("div", kg, z(e.label), 1)) : u("", !0)], 42, Dg))), 128))]),
-			f("div", Ag, [f("div", {
+				onClick: (t) => a("navigate", e.to),
+				onMouseenter: (t) => s.value = e.to,
+				onMouseleave: i[0] ||= (e) => s.value = null
+			}, [h(H(J), {
+				icon: r(e.icon),
+				width: "20",
+				height: "20"
+			}, null, 8, ["icon"]), s.value === e.to ? (P(), d("div", Og, z(e.label), 1)) : u("", !0)], 42, Dg))), 128))]),
+			f("div", kg, [f("div", {
 				class: "cui-sidebar-avatar",
 				style: j({ background: e.accentColor }),
-				onClick: r[1] ||= (e) => a.value = !a.value
+				onClick: i[1] ||= (e) => o.value = !o.value
 			}, [e.userAvatar ? (P(), d("img", {
 				key: 0,
 				src: e.userAvatar,
 				alt: e.userName
-			}, null, 8, jg)) : (P(), d("span", Mg, z(s.value), 1))], 4), a.value ? (P(), d("div", Ng, [R(t.$slots, "user-menu", {}, () => [f("div", {
+			}, null, 8, Ag)) : (P(), d("span", jg, z(l.value), 1))], 4), o.value ? (P(), d("div", Mg, [R(t.$slots, "user-menu", {}, () => [f("div", {
 				class: "cui-sidebar-user-menu-item",
-				onClick: r[2] ||= (e) => i("logout")
+				onClick: i[2] ||= (e) => a("logout")
 			}, " Sign out ")])])) : u("", !0)])
-		]), f("main", Pg, [R(t.$slots, "default")])]));
+		]), f("main", Ng, [R(t.$slots, "default")])]));
 	}
-}), Ig = { class: "cui-header-layout" }, Lg = { class: "cui-header" }, Rg = { class: "cui-header-container" }, zg = { class: "cui-header-left" }, Bg = { class: "cui-header-logo-sub" }, Vg = {
+}), Fg = { class: "cui-header-layout" }, Ig = { class: "cui-header" }, Lg = { class: "cui-header-container" }, Rg = { class: "cui-header-left" }, zg = { class: "cui-header-logo-sub" }, Bg = {
 	key: 0,
 	class: "cui-header-nav"
-}, Hg = ["onClick"], Ug = { class: "cui-header-right" }, Wg = ["src", "alt"], Gg = { key: 1 }, Kg = { class: "cui-header-main" }, qg = /* @__PURE__ */ _({
+}, Vg = ["onClick"], Hg = { class: "cui-header-right" }, Ug = ["src", "alt"], Wg = { key: 1 }, Gg = { class: "cui-header-main" }, Kg = /* @__PURE__ */ _({
 	__name: "HeaderLayout",
 	props: {
 		serviceName: { default: "" },
@@ -15168,14 +15172,14 @@ var eg = { class: "fixed top-4 right-4 z-[100] flex flex-col gap-2 w-80" }, tg =
 	],
 	setup(e, { emit: t }) {
 		let r = e, i = t, a = c(() => r.userName ? r.userName.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2) : "?");
-		return (t, r) => (P(), d("div", Ig, [f("header", Lg, [f("div", Rg, [f("div", zg, [R(t.$slots, "logo", {}, () => [f("span", {
+		return (t, r) => (P(), d("div", Fg, [f("header", Ig, [f("div", Lg, [f("div", Rg, [R(t.$slots, "logo", {}, () => [f("span", {
 			class: "cui-header-logo",
 			onClick: r[0] ||= (e) => i("navigate", "/")
-		}, [r[3] ||= m(" construct ", -1), f("span", Bg, "/ " + z(e.serviceName), 1)])]), e.navItems.length ? (P(), d("nav", Vg, [(P(!0), d(n, null, L(e.navItems, (e) => (P(), d("a", {
+		}, [r[3] ||= m(" construct ", -1), f("span", zg, "/ " + z(e.serviceName), 1)])]), e.navItems.length ? (P(), d("nav", Bg, [(P(!0), d(n, null, L(e.navItems, (e) => (P(), d("a", {
 			key: e.to,
 			class: k({ active: e.active }),
 			onClick: K((t) => i("navigate", e.to), ["prevent"])
-		}, z(e.label), 11, Hg))), 128))])) : u("", !0)]), f("div", Ug, [R(t.$slots, "actions"), e.showAuth && e.userName ? (P(), d("div", {
+		}, z(e.label), 11, Vg))), 128))])) : u("", !0)]), f("div", Hg, [R(t.$slots, "actions"), e.showAuth && e.userName ? (P(), d("div", {
 			key: 0,
 			class: "cui-header-avatar",
 			style: j({ background: e.accentColor }),
@@ -15184,22 +15188,22 @@ var eg = { class: "fixed top-4 right-4 z-[100] flex flex-col gap-2 w-80" }, tg =
 			key: 0,
 			src: e.userAvatar,
 			alt: e.userName
-		}, null, 8, Wg)) : (P(), d("span", Gg, z(a.value), 1))], 4)) : e.showAuth ? (P(), d("button", {
+		}, null, 8, Ug)) : (P(), d("span", Wg, z(a.value), 1))], 4)) : e.showAuth ? (P(), d("button", {
 			key: 1,
 			class: "cui-header-signin",
 			onClick: r[2] ||= (e) => i("login")
-		}, " Sign in ")) : u("", !0)])])]), f("main", Kg, [R(t.$slots, "default")])]));
+		}, " Sign in ")) : u("", !0)])])]), f("main", Gg, [R(t.$slots, "default")])]));
 	}
-}), Jg = {
+}), qg = {
 	apiBase: "",
 	mePath: "/api/auth/me",
 	loginPath: "/api/auth/login",
 	logoutPath: "/api/auth/logout",
 	autoCheck: !0
 };
-function Yg(e = {}) {
+function Jg(e = {}) {
 	let t = {
-		...Jg,
+		...qg,
 		...e
 	}, n = I(null), r = I(!0), i = I(null);
 	async function a() {
@@ -15234,7 +15238,7 @@ function Yg(e = {}) {
 }
 //#endregion
 //#region src/index.ts
-var Xg = { install(e) {
+var Yg = { install(e) {
 	let t = /* @__PURE__ */ Object.assign({
 		"./components/Accordion.vue": vd,
 		"./components/Alert.vue": wd,
@@ -15286,4 +15290,4 @@ var Xg = { install(e) {
 	}
 } };
 //#endregion
-export { yd as CAccordion, Td as CAlert, Od as CAvatar, jd as CBadge, Fd as CButton, _f as CCalendar, Tf as CCard, kf as CCheckbox, Mf as CChip, Hf as CColorPicker, Gf as CContextMenu, Jf as CDashboardPanel, ep as CDrawer, rp as CDropdown, cp as CDropdownMenu, dp as CDropdownMenuItem, _p as CEmpty, jp as CFormField, Pp as CIcon, Rp as CInput, Hp as CKbd, Yp as CModal, rm as CPagination, um as CPanelSection, pm as CPopover, Sm as CProgress, Dm as CPropRow, Mm as CRadioGroup, Fm as CScrollArea, Vm as CSelect, Km as CSelectMenu, th as CSeparator, ih as CSkeleton, uh as CSlideover, ph as CSlider, vh as CSwitch, Nh as CTable, Ih as CTabs, Bh as CTextarea, qh as CTimeline, pg as CToast, gg as CTooltip, bg as CTree, Xg as ConstructUI, Xg as default, qg as HeaderLayout, Fg as SidebarLayout, Yg as useAuth, $h as useToast };
+export { yd as CAccordion, Td as CAlert, Od as CAvatar, jd as CBadge, Fd as CButton, _f as CCalendar, Tf as CCard, kf as CCheckbox, Mf as CChip, Hf as CColorPicker, Gf as CContextMenu, Jf as CDashboardPanel, ep as CDrawer, rp as CDropdown, cp as CDropdownMenu, dp as CDropdownMenuItem, _p as CEmpty, jp as CFormField, Pp as CIcon, Rp as CInput, Hp as CKbd, Yp as CModal, rm as CPagination, um as CPanelSection, pm as CPopover, Sm as CProgress, Dm as CPropRow, Mm as CRadioGroup, Fm as CScrollArea, Vm as CSelect, Km as CSelectMenu, th as CSeparator, ih as CSkeleton, uh as CSlideover, ph as CSlider, vh as CSwitch, Nh as CTable, Ih as CTabs, Bh as CTextarea, qh as CTimeline, pg as CToast, gg as CTooltip, bg as CTree, Yg as ConstructUI, Yg as default, Kg as HeaderLayout, Pg as SidebarLayout, Jg as useAuth, $h as useToast };

package/dist/layouts/SidebarLayout.vue.d.ts

@@ -1,4 +1,5 @@
 export interface NavItem {
+    /** Iconify icon name, e.g. "lucide:home" or shorthand "home" */
     icon: string;
     label: string;
     to: string;
@@ -12,13 +13,13 @@ type __VLS_Props = {
     userAvatar?: string;
     accentColor?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     logo?: (props: typeof __VLS_1) => any;
 } & {
-    'user-menu'?: (props: typeof __VLS_3) => any;
+    'user-menu'?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     navigate: (to: string) => any;

package/dist/style.css

@@ -1,2 +1,2 @@
-@import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap";@keyframes progress-indeterminate-f944cf9d{0%{transform:translate(-100%)}to{transform:translate(350%)}}.animate-progress-indeterminate[data-v-f944cf9d]{animation:1.5s ease-in-out infinite progress-indeterminate-f944cf9d}.toast-enter-active[data-v-98416c66]{transition:all .3s cubic-bezier(.4,0,.2,1)}.toast-leave-active[data-v-98416c66]{transition:all .2s cubic-bezier(.4,0,1,1)}.toast-enter-from[data-v-98416c66],.toast-leave-to[data-v-98416c66]{opacity:0;transform:translate(100%)}.toast-move[data-v-98416c66]{transition:transform .3s cubic-bezier(.4,0,.2,1)}.tree-root[data-v-9be5dd89]:focus-visible{outline:none}.cui-sidebar-layout{min-height:100vh;display:flex}.cui-sidebar{background:var(--app-background,#18181b);border-right:1px solid var(--app-border,#27272a);z-index:100;flex-direction:column;align-items:center;width:60px;padding:16px 0;display:flex;position:fixed;top:0;bottom:0;left:0}.cui-sidebar-logo{color:var(--app-foreground,#fafafa);margin-bottom:24px;font-size:20px;font-weight:700}.cui-sidebar-logo-text{justify-content:center;align-items:center;width:32px;height:32px;display:flex}.cui-sidebar-nav{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.cui-sidebar-nav-item{cursor:pointer;width:40px;height:40px;color:var(--app-muted,#71717a);border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative}.cui-sidebar-nav-item:hover{color:var(--app-foreground,#fafafa);background:#ffffff0f}.cui-sidebar-nav-item.active{color:var(--app-accent,#ff2d55);background:#ffffff0f}.cui-sidebar-tooltip{background:var(--app-foreground,#fafafa);color:var(--app-background,#18181b);white-space:nowrap;pointer-events:none;z-index:200;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;position:absolute;top:50%;left:52px;transform:translateY(-50%)}.cui-sidebar-user{position:relative}.cui-sidebar-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.cui-sidebar-avatar img{object-fit:cover;width:100%;height:100%}.cui-sidebar-user-menu{background:var(--app-background,#18181b);border:1px solid var(--app-border,#27272a);z-index:200;border-radius:8px;min-width:160px;padding:4px;position:absolute;bottom:0;left:52px}.cui-sidebar-user-menu-item{color:var(--app-foreground,#fafafa);cursor:pointer;border-radius:6px;padding:8px 12px;font-size:13px;transition:background .15s}.cui-sidebar-user-menu-item:hover{background:#ffffff0f}.cui-sidebar-main{flex:1;min-height:100vh;margin-left:60px}.cui-header-layout{flex-direction:column;min-height:100vh;display:flex}.cui-header{border-bottom:1px solid var(--app-border,#27272a);z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#12121eeb;padding:14px 0;position:sticky;top:0}.cui-header-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.cui-header-left{align-items:center;gap:24px;display:flex}.cui-header-logo{color:var(--app-foreground,#fafafa);cursor:pointer;letter-spacing:.02em;font-size:16px;font-weight:700}.cui-header-logo-sub{color:var(--app-muted,#71717a);font-weight:400}.cui-header-nav{align-items:center;gap:16px;display:flex}.cui-header-nav a{color:var(--app-muted,#71717a);cursor:pointer;font-size:13px;text-decoration:none;transition:color .15s}.cui-header-nav a:hover,.cui-header-nav a.active{color:var(--app-foreground,#fafafa)}.cui-header-right{align-items:center;gap:12px;display:flex}.cui-header-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.cui-header-avatar img{object-fit:cover;width:100%;height:100%}.cui-header-signin{background:var(--app-accent,#ff2d55);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:opacity .15s}.cui-header-signin:hover{opacity:.9}.cui-header-main{flex:1}:root{--app-background:#fff;--app-foreground:#1e293b;--app-muted:#94a3b8;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#e2e8f0;--app-canvas-bg:#f1f5f9;--app-status-bg:#f8fafc;--app-card-bg:#fff;--app-card-hover:#f8fafc;--app-input-bg:#fff;--green:#22c55e;--green-bg:#22c55e1a;--red:#ef4444;--red-bg:#ef44441a;--yellow:#eab308;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Rubik", ui-sans-serif, system-ui, sans-serif}.dark,:root.dark,[data-theme=dark]{--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}@media (prefers-color-scheme:dark){:root:not(.light):not([data-theme=light]){--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-state=checked].bg-primary,[data-state=checked].bg-neutral,button[role=switch][data-state=checked]{background-color:var(--app-accent)!important}button[role=checkbox][data-state=checked],[role=checkbox][data-state=checked]{background-color:var(--app-accent)!important;border-color:var(--app-accent)!important}[data-radix-slider-range],[role=slider] [data-orientation]>span:first-child{background-color:var(--app-accent)!important}[data-radix-slider-thumb],[role=slider] span[role=slider]{border-color:var(--app-accent)!important}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--app-accent)!important;outline:none!important}label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{color:var(--app-foreground)!important;caret-color:var(--app-foreground)!important}input::placeholder,textarea::placeholder{color:var(--app-muted)!important;opacity:1!important}.btn{border:1px solid var(--app-border);border-radius:var(--radius);background:var(--app-input-bg);color:var(--app-foreground);cursor:pointer;align-items:center;gap:6px;padding:8px 18px;font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:var(--app-card-hover);border-color:var(--app-muted)}.btn-primary{background:var(--app-accent);border-color:var(--app-accent);color:#fff}.btn-primary:hover{background:var(--app-accent-hover);border-color:var(--app-accent-hover)}.btn-sm{padding:5px 12px;font-size:12px}.btn-lg{border-radius:var(--radius-lg);padding:12px 28px;font-size:15px;font-weight:600}.btn-ghost{color:var(--app-muted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--app-foreground);background:var(--app-card-bg)}.btn-icon{color:var(--app-muted);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:6px;font-size:14px}.btn-icon:hover{background:var(--app-card-hover);color:var(--app-foreground)}.btn-danger{color:var(--red)}.btn-danger:hover{background:var(--red-bg);color:var(--red)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.page{padding:32px 0}.page-title{letter-spacing:-.02em;margin-bottom:4px;font-size:22px;font-weight:600}.page-subtitle{color:var(--app-muted);margin-bottom:28px;font-size:14px}.card{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);overflow:hidden}.card-header{border-bottom:1px solid var(--app-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-title{font-size:14px;font-weight:600}.card-body{padding:20px}.form-group{margin-bottom:16px}.form-label{color:var(--app-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-input{background:var(--app-input-bg);border:1px solid var(--app-border);border-radius:var(--radius);width:100%;color:var(--app-foreground);outline:none;padding:9px 12px;font-family:inherit;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--app-accent)}.form-input::placeholder{color:var(--app-muted)}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.spinner{border:2px solid var(--app-border);border-top-color:var(--app-accent);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite cui-spin;display:inline-block}@keyframes cui-spin{to{transform:rotate(360deg)}}.loading-state{color:var(--app-muted);justify-content:center;align-items:center;gap:10px;padding:60px 0;font-size:14px;display:flex}.empty-state{text-align:center;color:var(--app-muted);padding:60px 20px}.empty-state p{margin-bottom:16px;font-size:14px}.cui-toast{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius);z-index:2000;padding:12px 20px;font-size:13px;animation:.2s cui-slideUp;position:fixed;bottom:24px;right:24px}.cui-toast.error{border-color:var(--red);color:var(--red)}.cui-toast.success{border-color:var(--green);color:var(--green)}@keyframes cui-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabs{border-bottom:1px solid var(--app-border);margin-bottom:24px;display:flex}.tab{color:var(--app-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 20px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab:hover{color:var(--app-foreground)}.tab.active{color:var(--app-foreground);border-bottom-color:var(--app-accent)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);width:480px;max-width:90vw;max-height:85vh;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;padding:20px 24px 16px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-body{padding:0 24px 24px}.modal-footer{border-top:1px solid var(--app-border);justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}.info-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.info-item{background:var(--app-input-bg);border-radius:var(--radius);padding:16px}.info-label{text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);margin-bottom:6px;font-size:11px;font-weight:600}.info-value{font-size:14px;font-weight:500}.toggle{background:var(--app-border);cursor:pointer;border:none;border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.toggle.active{background:var(--app-accent)}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle.active:after{transform:translate(18px)}.badge-a{color:#60a5fa;background:#60a5fa1f}.badge-aaaa{color:#a78bfa;background:#a78bfa1f}.badge-cname{color:#34d399;background:#34d3991f}.badge-mx{color:#fbbf24;background:#fbbf241f}.badge-txt{color:#f87171;background:#f871711f}.badge-ns{color:#38bdf8;background:#38bdf81f}.badge-srv{color:#fb923c;background:#fb923c1f}.badge-default{color:var(--app-muted);background:#8888a01f}.dns-table{border-collapse:collapse;width:100%}.dns-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);border-bottom:1px solid var(--app-border);padding:10px 16px;font-size:11px;font-weight:600}.dns-table td{border-bottom:1px solid var(--app-border);vertical-align:middle;padding:12px 16px;font-size:13px}.dns-table tr:last-child td{border-bottom:none}.dns-table tr:hover td{background:var(--app-card-hover)}.back-link{color:var(--app-muted);align-items:center;gap:6px;margin-bottom:20px;font-size:13px;text-decoration:none;transition:color .15s;display:inline-flex}.back-link:hover{color:var(--app-foreground)}@media (width<=768px){.form-row,.info-grid{grid-template-columns:1fr}}
+@import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap";@keyframes progress-indeterminate-f944cf9d{0%{transform:translate(-100%)}to{transform:translate(350%)}}.animate-progress-indeterminate[data-v-f944cf9d]{animation:1.5s ease-in-out infinite progress-indeterminate-f944cf9d}.toast-enter-active[data-v-98416c66]{transition:all .3s cubic-bezier(.4,0,.2,1)}.toast-leave-active[data-v-98416c66]{transition:all .2s cubic-bezier(.4,0,1,1)}.toast-enter-from[data-v-98416c66],.toast-leave-to[data-v-98416c66]{opacity:0;transform:translate(100%)}.toast-move[data-v-98416c66]{transition:transform .3s cubic-bezier(.4,0,.2,1)}.tree-root[data-v-9be5dd89]:focus-visible{outline:none}.cui-sidebar-layout{min-height:100vh;display:flex}.cui-sidebar{background:var(--app-background,#18181b);border-right:1px solid var(--app-border,#27272a);z-index:100;flex-direction:column;align-items:center;width:60px;padding:16px 0;display:flex;position:fixed;top:0;bottom:0;left:0}.cui-sidebar-logo{color:var(--app-foreground,#fafafa);margin-bottom:24px;font-size:20px;font-weight:700}.cui-sidebar-logo-text{justify-content:center;align-items:center;width:32px;height:32px;display:flex}.cui-sidebar-nav{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.cui-sidebar-nav-item{cursor:pointer;width:40px;height:40px;color:var(--app-muted,#71717a);border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative}.cui-sidebar-nav-item:hover{color:var(--app-foreground,#fafafa);background:#ffffff0f}.cui-sidebar-nav-item.active{color:var(--app-accent,#ff2d55);background:#ffffff0f}.cui-sidebar-tooltip{background:var(--app-foreground,#fafafa);color:var(--app-background,#18181b);white-space:nowrap;pointer-events:none;z-index:200;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;position:absolute;top:50%;left:52px;transform:translateY(-50%)}.cui-sidebar-user{position:relative}.cui-sidebar-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.cui-sidebar-avatar img{object-fit:cover;width:100%;height:100%}.cui-sidebar-user-menu{background:var(--app-background,#18181b);border:1px solid var(--app-border,#27272a);z-index:200;border-radius:8px;min-width:160px;padding:4px;position:absolute;bottom:0;left:52px}.cui-sidebar-user-menu-item{color:var(--app-foreground,#fafafa);cursor:pointer;border-radius:6px;padding:8px 12px;font-size:13px;transition:background .15s}.cui-sidebar-user-menu-item:hover{background:#ffffff0f}.cui-sidebar-main{flex:1;min-height:100vh;margin-left:60px}.cui-header-layout{flex-direction:column;min-height:100vh;display:flex}.cui-header{border-bottom:1px solid var(--app-border,#27272a);z-index:100;background:color-mix(in srgb, var(--app-background) 92%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:14px 0;position:sticky;top:0}.cui-header-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.cui-header-left{align-items:center;gap:24px;display:flex}.cui-header-logo{color:var(--app-foreground,#fafafa);cursor:pointer;letter-spacing:.02em;font-size:16px;font-weight:700}.cui-header-logo-sub{color:var(--app-muted,#71717a);font-weight:400}.cui-header-nav{align-items:center;gap:16px;display:flex}.cui-header-nav a{color:var(--app-muted,#71717a);cursor:pointer;font-size:13px;text-decoration:none;transition:color .15s}.cui-header-nav a:hover,.cui-header-nav a.active{color:var(--app-foreground,#fafafa)}.cui-header-right{align-items:center;gap:12px;display:flex}.cui-header-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.cui-header-avatar img{object-fit:cover;width:100%;height:100%}.cui-header-signin{background:var(--app-accent,#ff2d55);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:opacity .15s}.cui-header-signin:hover{opacity:.9}.cui-header-main{flex:1}:root{--app-background:#fff;--app-foreground:#1e293b;--app-muted:#94a3b8;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#e2e8f0;--app-canvas-bg:#f1f5f9;--app-status-bg:#f8fafc;--app-card-bg:#fff;--app-card-hover:#f8fafc;--app-input-bg:#fff;--green:#22c55e;--green-bg:#22c55e1a;--red:#ef4444;--red-bg:#ef44441a;--yellow:#eab308;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Rubik", ui-sans-serif, system-ui, sans-serif}.dark,:root.dark,[data-theme=dark]{--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}@media (prefers-color-scheme:dark){:root:not(.light):not([data-theme=light]){--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-state=checked].bg-primary,[data-state=checked].bg-neutral,button[role=switch][data-state=checked]{background-color:var(--app-accent)!important}button[role=checkbox][data-state=checked],[role=checkbox][data-state=checked]{background-color:var(--app-accent)!important;border-color:var(--app-accent)!important}[data-radix-slider-range],[role=slider] [data-orientation]>span:first-child{background-color:var(--app-accent)!important}[data-radix-slider-thumb],[role=slider] span[role=slider]{border-color:var(--app-accent)!important}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--app-accent)!important;outline:none!important}.cui-label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{color:var(--app-foreground)!important;caret-color:var(--app-foreground)!important}input::placeholder,textarea::placeholder{color:var(--app-muted)!important;opacity:1!important}.btn{border:1px solid var(--app-border);border-radius:var(--radius);background:var(--app-input-bg);color:var(--app-foreground);cursor:pointer;align-items:center;gap:6px;padding:8px 18px;font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:var(--app-card-hover);border-color:var(--app-muted)}.btn-primary{background:var(--app-accent);border-color:var(--app-accent);color:#fff}.btn-primary:hover{background:var(--app-accent-hover);border-color:var(--app-accent-hover)}.btn-sm{padding:5px 12px;font-size:12px}.btn-lg{border-radius:var(--radius-lg);padding:12px 28px;font-size:15px;font-weight:600}.btn-ghost{color:var(--app-muted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--app-foreground);background:var(--app-card-bg)}.btn-icon{color:var(--app-muted);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:6px;font-size:14px}.btn-icon:hover{background:var(--app-card-hover);color:var(--app-foreground)}.btn-danger{color:var(--red)}.btn-danger:hover{background:var(--red-bg);color:var(--red)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.page{padding:32px 0}.page-title{letter-spacing:-.02em;margin-bottom:4px;font-size:22px;font-weight:600}.page-subtitle{color:var(--app-muted);margin-bottom:28px;font-size:14px}.card{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);overflow:hidden}.card-header{border-bottom:1px solid var(--app-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-title{font-size:14px;font-weight:600}.card-body{padding:20px}.form-group{margin-bottom:16px}.form-label{color:var(--app-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-input{background:var(--app-input-bg);border:1px solid var(--app-border);border-radius:var(--radius);width:100%;color:var(--app-foreground);outline:none;padding:9px 12px;font-family:inherit;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--app-accent)}.form-input::placeholder{color:var(--app-muted)}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.spinner{border:2px solid var(--app-border);border-top-color:var(--app-accent);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite cui-spin;display:inline-block}@keyframes cui-spin{to{transform:rotate(360deg)}}.loading-state{color:var(--app-muted);justify-content:center;align-items:center;gap:10px;padding:60px 0;font-size:14px;display:flex}.empty-state{text-align:center;color:var(--app-muted);padding:60px 20px}.empty-state p{margin-bottom:16px;font-size:14px}.cui-toast{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius);z-index:2000;padding:12px 20px;font-size:13px;animation:.2s cui-slideUp;position:fixed;bottom:24px;right:24px}.cui-toast.error{border-color:var(--red);color:var(--red)}.cui-toast.success{border-color:var(--green);color:var(--green)}@keyframes cui-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabs{border-bottom:1px solid var(--app-border);margin-bottom:24px;display:flex}.tab{color:var(--app-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 20px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab:hover{color:var(--app-foreground)}.tab.active{color:var(--app-foreground);border-bottom-color:var(--app-accent)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);width:480px;max-width:90vw;max-height:85vh;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;padding:20px 24px 16px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-body{padding:0 24px 24px}.modal-footer{border-top:1px solid var(--app-border);justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}.info-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.info-item{background:var(--app-input-bg);border-radius:var(--radius);padding:16px}.info-label{text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);margin-bottom:6px;font-size:11px;font-weight:600}.info-value{font-size:14px;font-weight:500}.toggle{background:var(--app-border);cursor:pointer;border:none;border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.toggle.active{background:var(--app-accent)}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle.active:after{transform:translate(18px)}.badge-a{color:#60a5fa;background:#60a5fa1f}.badge-aaaa{color:#a78bfa;background:#a78bfa1f}.badge-cname{color:#34d399;background:#34d3991f}.badge-mx{color:#fbbf24;background:#fbbf241f}.badge-txt{color:#f87171;background:#f871711f}.badge-ns{color:#38bdf8;background:#38bdf81f}.badge-srv{color:#fb923c;background:#fb923c1f}.badge-default{color:var(--app-muted);background:#8888a01f}.dns-table{border-collapse:collapse;width:100%}.dns-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);border-bottom:1px solid var(--app-border);padding:10px 16px;font-size:11px;font-weight:600}.dns-table td{border-bottom:1px solid var(--app-border);vertical-align:middle;padding:12px 16px;font-size:13px}.dns-table tr:last-child td{border-bottom:none}.dns-table tr:hover td{background:var(--app-card-hover)}.back-link{color:var(--app-muted);align-items:center;gap:6px;margin-bottom:20px;font-size:13px;text-decoration:none;transition:color .15s;display:inline-flex}.back-link:hover{color:var(--app-foreground)}@media (width<=768px){.form-row,.info-grid{grid-template-columns:1fr}}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@construct-space/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Construct UI — Vue 3 component library for Construct services",
   "type": "module",
   "main": "./dist/construct-ui.js",
@@ -11,7 +11,6 @@
       "import": "./dist/construct-ui.js",
       "types": "./dist/index.d.ts"
     },
-    "./tokens": "./dist/tokens.css",
     "./style.css": "./dist/style.css"
   },
   "files": [
@@ -44,14 +43,15 @@
     "release": "bun run build && npm publish"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
-  },
-  "dependencies": {
+    "vue": "^3.5.0",
     "reka-ui": "^2.0.0",
     "@iconify/vue": "^4.0.0"
   },
+  "dependencies": {},
   "devDependencies": {
     "vue": "^3.5.28",
+    "reka-ui": "^2.0.0",
+    "@iconify/vue": "^4.0.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "@vitejs/plugin-vue": "^6.0.5",