@ac-design/design-system 2.0.0 → 2.1.1

package/dist/lib/composables/useToast.d.ts

@@ -6,12 +6,14 @@ export interface ToastAction {
 export interface ToastOptions {
     /** A second line under the title. */
     description?: string;
-    /** Milliseconds before it closes on its own. 0 keeps it until dismissed. Default 5000. */
+    /** Milliseconds before it closes on its own. 0 keeps it until dismissed. Default 4500, as cloud-ui. */
     duration?: number;
     /** One button in the toast, e.g. `{ label: "Undo", onClick }`. Clicking it also closes the toast. */
     action?: ToastAction;
     /** Shows the close button. Default true. */
     dismissible?: boolean;
+    /** Shows a 2px bar along the bottom that shrinks with the time left and pauses on hover. Default: AcToaster's `progress` prop (off). cloud-ui's `showProgress`. */
+    progress?: boolean;
     /** Reuse an id to update a toast in place, e.g. "Backing up…" → "Backup complete". */
     id?: string;
 }
@@ -21,6 +23,8 @@ export interface Toast extends Required<Pick<ToastOptions, "duration" | "dismiss
     title: string;
     description?: string;
     action?: ToastAction;
+    /** Set only when the caller chose; otherwise AcToaster's `progress` prop decides. */
+    progress?: boolean;
     /** Bumped on every update so the toaster restarts the timer. */
     version: number;
 }
@@ -41,6 +45,7 @@ export declare function useToast(): {
             readonly label: string;
             readonly onClick: () => void;
         } | undefined;
+        readonly progress?: boolean | undefined;
         readonly version: number;
         readonly dismissible: boolean;
         readonly duration: number;
@@ -53,6 +58,7 @@ export declare function useToast(): {
             readonly label: string;
             readonly onClick: () => void;
         } | undefined;
+        readonly progress?: boolean | undefined;
         readonly version: number;
         readonly dismissible: boolean;
         readonly duration: number;
@@ -65,4 +71,14 @@ export declare function useToast(): {
     dismiss: typeof dismiss;
     clear: typeof clear;
 };
+/** cloud-ui's toast options: `showProgress` is `progress`, and `width` is ignored (toasts are 384px). */
+export interface CloudToastOptions extends ToastOptions {
+    showProgress?: boolean;
+    width?: number | string;
+}
+/**
+ * cloud-ui's `showToast(title, type, options)`, so its calls work unchanged. A number as `options` is the duration.
+ * Shows in `<AcToaster />` like `useToast()`, and returns the toast's id.
+ */
+export declare function showToast(title: string, type: "success" | "info" | "warning" | "error", options?: number | CloudToastOptions): string;
 export {};

package/dist/lib/composables/useToast.js

@@ -1,6 +1,6 @@
 import { readonly as e, ref as t } from "vue";
 //#region src/lib/composables/useToast.ts
-var n = 5e3, r = t([]), i = 0;
+var n = 4500, r = t([]), i = 0;
 function a(e, t, a = {}) {
 	let o = a.id ?? `toast-${++i}`, s = r.value.find((e) => e.id === o), c = {
 		id: o,
@@ -10,6 +10,7 @@ function a(e, t, a = {}) {
 		action: a.action,
 		duration: a.duration ?? n,
 		dismissible: a.dismissible ?? !0,
+		progress: a.progress,
 		version: (s?.version ?? 0) + 1
 	};
 	return r.value = s ? r.value.map((e) => e.id === o ? c : e) : [...r.value, c], o;
@@ -32,5 +33,12 @@ function c() {
 		clear: s
 	};
 }
+function l(e, t, n) {
+	let { showProgress: r, width: i, ...o } = typeof n == "number" ? { duration: n } : n ?? {};
+	return a(t, e, {
+		...o,
+		progress: o.progress ?? r
+	});
+}
 //#endregion
-export { c as useToast };
+export { l as showToast, c as useToast };

package/dist/lib/index.d.ts

@@ -3,7 +3,7 @@ export { useColorMode } from "./composables/useColorMode";
 export { useFontScale, FONT_SCALES } from "./composables/useFontScale";
 export type { FontScale } from "./composables/useFontScale";
 export type { ColorMode } from "./composables/useColorMode";
-export { useToast } from "./composables/useToast";
+export { showToast, useToast } from "./composables/useToast";
 export { useTablePagination } from "./composables/useTablePagination";
 export type { TablePagination, UseTablePaginationOptions } from "./composables/useTablePagination";
 export { useApiPagination } from "./composables/useApiPagination";
@@ -16,7 +16,7 @@ export { statusMeta, normalizeState, humanizeState } from "./components/status";
 export type { StatusMeta, StatusMetaOptions, StatusTone } from "./components/status";
 export { useBrandColor, hexToHsl, hslToHex, contrastOnWhite, readableLightness, MIN_CONTRAST, HexToHSL, HSLToHex, getThemeHSL, setThemeHSL, } from "./composables/useBrandColor";
 export type { BrandHsl, LegacyHsl, SetBrandColorOptions } from "./composables/useBrandColor";
-export type { Toast, ToastAction, ToastOptions, ToastTone } from "./composables/useToast";
+export type { CloudToastOptions, Toast, ToastAction, ToastOptions, ToastTone } from "./composables/useToast";
 export type { AppSwitcherApp } from "./components/AcAppSwitcher.vue";
 export type { BreadcrumbItem } from "./components/AcBreadcrumb.vue";
 export type { AcTableCell, AcTableCol, AcTableRow, CellType, ResourceCell, ResourceColumn, ResourceRow, ResourceTable, } from "./components/AcCellValue.vue";
@@ -40,4 +40,8 @@ export type { Step, SubStep } from "./components/AcSteps.vue";
 export type { Column } from "./components/AcTable.vue";
 export type { TabItem } from "./components/AcTabs.vue";
 export type { UsageBreakdownRow } from "./components/AcUsageCard.vue";
-export type { UserMenuItem } from "./components/AcUserMenu.vue";
+export type { UserMenuItem, UserMenuWorkspace } from "./components/AcUserMenu.vue";
+export type { CheckListItem } from "./components/AcCheckList.vue";
+export type { CostSummaryDot, CostSummaryItem, CostSummarySpec } from "./components/AcCostSummary.vue";
+export type { ProgressSegment } from "./components/AcProgress.vue";
+export type { CheckRadioOption } from "./components/AcCheckRadio.vue";

package/dist/lib/index.js

@@ -16,80 +16,87 @@ import m from "./components/AcButtons.js";
 import h from "./components/AcCard.js";
 import g from "./components/AcModal.js";
 import _ from "./components/AcSkeleton.js";
-import v from "./components/AcTag.js";
-import y from "./components/AcTooltip.js";
-import b from "./components/AcCellValue.js";
-import x from "./components/AcCheckBox.js";
+import v from "./components/AcTooltip.js";
+import y from "./components/AcCellValue.js";
+import b from "./components/AcCheckBox.js";
+import x from "./components/AcCheckList.js";
 import S from "./components/AcCheckRadio.js";
 import C from "./components/AcCircularProgress.js";
 import w from "./components/AcClusterSwitcher.js";
 import T from "./components/AcColorInput.js";
-import E from "./components/AcConfirmModal.js";
-import D from "./components/AcContentHeader.js";
-import O from "./components/AcContentLayout.js";
-import k from "./components/AcSearchBar.js";
-import A from "./components/AcContentTable.js";
-import j from "./components/AcCopyButton.js";
-import M from "./components/AcDatePicker.js";
-import N from "./components/AcInput.js";
-import P from "./components/AcDeleteModal.js";
-import F from "./components/AcDivider.js";
-import I from "./components/AcDropdown.js";
-import L from "./components/AcDropdownDivider.js";
-import R from "./components/AcDropdownItem.js";
-import z from "./components/AcEmptyState.js";
-import B from "./components/AcFeatureCard.js";
-import V from "./components/AcFileUpload.js";
-import { FONT_SCALES as H, useFontScale as U } from "./composables/useFontScale.js";
-import W from "./components/AcFontScale.js";
-import G from "./components/AcFooter.js";
-import K from "./components/AcForm.js";
-import q from "./components/AcFormArray.js";
-import J from "./components/AcFormFooter.js";
-import Y from "./components/AcFormSection.js";
-import X from "./components/AcHeader.js";
-import Z from "./components/AcHeaderItem.js";
-import Q from "./components/AcHeaderItems.js";
-import ne from "./components/AcInfoTable.js";
-import $ from "./components/AcKbd.js";
-import re from "./components/AcSelect.js";
-import ie from "./components/AcKeyValueInput.js";
-import ae from "./components/AcLocaleSwitcher.js";
-import oe from "./components/AcNavbar.js";
-import se from "./components/AcNotificationMenu.js";
-import ce from "./components/AcNumberInput.js";
-import le from "./components/AcPage.js";
-import ue from "./components/AcPagination.js";
-import de from "./components/AcPreloader.js";
-import fe from "./components/AcProgress.js";
-import pe from "./components/AcResourceCard.js";
-import me from "./components/AcSectionContent.js";
-import he from "./components/AcSegmentedControl.js";
-import ge from "./components/AcSidebar.js";
-import _e from "./components/AcSidebarItem.js";
-import ve from "./components/AcSidebarSection.js";
-import ye from "./components/AcSidePanel.js";
-import be from "./components/AcSideTabs.js";
-import xe from "./components/AcSlider.js";
-import Se from "./components/AcStatCard.js";
-import Ce from "./components/AcStatusBar.js";
-import we from "./components/AcSteps.js";
-import Te from "./components/AcSwitch.js";
-import Ee from "./components/AcSwitchCard.js";
-import De from "./components/AcTable.js";
-import Oe from "./components/AcTabs.js";
-import ke from "./components/AcTagInput.js";
-import Ae from "./components/AcTextarea.js";
-import { useColorMode as je } from "./composables/useColorMode.js";
-import Me from "./components/AcThemeMode.js";
-import Ne from "./components/AcTimePicker.js";
-import { useToast as Pe } from "./composables/useToast.js";
-import Fe from "./components/AcToaster.js";
-import Ie from "./components/AcUsageCard.js";
-import Le from "./components/AcUserMenu.js";
-import { useTablePagination as Re } from "./composables/useTablePagination.js";
-import { useApiPagination as ze } from "./composables/useApiPagination.js";
-import { useBulkSelection as Be } from "./composables/useBulkSelection.js";
-import { useFormValidation as Ve } from "./composables/useFormValidation.js";
-import { HSLToHex as He, HexToHSL as Ue, MIN_CONTRAST as We, contrastOnWhite as Ge, getThemeHSL as Ke, hexToHsl as qe, hslToHex as Je, readableLightness as Ye, setThemeHSL as Xe, useBrandColor as Ze } from "./composables/useBrandColor.js";
-export { ee as AcAccordion, te as AcAccordionItem, n as AcAlert, a as AcAppSwitcher, o as AcAvatar, u as AcBadge, d as AcBanner, f as AcBreadcrumb, p as AcBulkActionBar, t as AcButton, m as AcButtons, h as AcCard, b as AcCellValue, x as AcCheckBox, S as AcCheckRadio, C as AcCircularProgress, w as AcClusterSwitcher, T as AcColorInput, E as AcConfirmModal, D as AcContentHeader, O as AcContentLayout, A as AcContentTable, j as AcCopyButton, M as AcDatePicker, P as AcDeleteConfirmationModal, P as AcDeleteModal, F as AcDivider, I as AcDropdown, L as AcDropdownDivider, R as AcDropdownItem, z as AcEmptyState, B as AcFeatureCard, V as AcFileUpload, W as AcFontScale, G as AcFooter, K as AcForm, q as AcFormArray, J as AcFormFooter, Y as AcFormSection, X as AcHeader, Z as AcHeaderItem, Q as AcHeaderItems, ne as AcInfoTable, N as AcInput, $ as AcKbd, ie as AcKeyValueInput, ae as AcLocaleSwitcher, r as AcLogo, g as AcModal, oe as AcNavbar, i as AcNavbarItem, se as AcNotificationMenu, ce as AcNumberInput, le as AcPage, ue as AcPagination, de as AcPreloader, fe as AcProgress, pe as AcResourceCard, k as AcSearchBar, me as AcSectionContent, he as AcSegmentedControl, re as AcSelect, ye as AcSidePanel, be as AcSideTabs, ge as AcSidebar, _e as AcSidebarItem, ve as AcSidebarSection, _ as AcSkeleton, xe as AcSlider, e as AcSpinner, Se as AcStatCard, Ce as AcStatusBar, we as AcSteps, Te as AcSwitch, Ee as AcSwitchCard, De as AcTable, Oe as AcTabs, v as AcTag, ke as AcTagInput, Ae as AcTextarea, Me as AcThemeMode, Ne as AcTimePicker, Fe as AcToaster, y as AcTooltip, Ie as AcUsageCard, Le as AcUserMenu, H as FONT_SCALES, He as HSLToHex, Ue as HexToHSL, We as MIN_CONTRAST, Ge as contrastOnWhite, Ke as getThemeHSL, qe as hexToHsl, Je as hslToHex, s as humanizeState, c as normalizeState, Ye as readableLightness, Xe as setThemeHSL, l as statusMeta, ze as useApiPagination, Ze as useBrandColor, Be as useBulkSelection, je as useColorMode, U as useFontScale, Ve as useFormValidation, Re as useTablePagination, Pe as useToast };
+import E from "./components/AcCommandBlock.js";
+import D from "./components/AcConfirmModal.js";
+import O from "./components/AcContentHeader.js";
+import k from "./components/AcContentLayout.js";
+import A from "./components/AcSearchBar.js";
+import j from "./components/AcContentTable.js";
+import M from "./components/AcCopyButton.js";
+import N from "./components/AcCostSummary.js";
+import P from "./components/AcDatePicker.js";
+import F from "./components/AcInput.js";
+import I from "./components/AcDeleteModal.js";
+import L from "./components/AcDivider.js";
+import R from "./components/AcDropdown.js";
+import z from "./components/AcDropdownDivider.js";
+import B from "./components/AcDropdownItem.js";
+import V from "./components/AcEmptyState.js";
+import H from "./components/AcErrorState.js";
+import U from "./components/AcFeatureCard.js";
+import W from "./components/AcFileUpload.js";
+import { FONT_SCALES as G, useFontScale as K } from "./composables/useFontScale.js";
+import q from "./components/AcFontScale.js";
+import J from "./components/AcFooter.js";
+import Y from "./components/AcForm.js";
+import X from "./components/AcFormArray.js";
+import Z from "./components/AcFormFooter.js";
+import Q from "./components/AcFormSection.js";
+import ne from "./components/AcHeader.js";
+import re from "./components/AcHeaderItem.js";
+import ie from "./components/AcHeaderItems.js";
+import ae from "./components/AcInfoTable.js";
+import oe from "./components/AcKbd.js";
+import $ from "./components/AcSelect.js";
+import se from "./components/AcKeyValueInput.js";
+import ce from "./components/AcLoader.js";
+import le from "./components/AcLocaleSwitcher.js";
+import ue from "./components/AcNavbar.js";
+import de from "./components/AcNotificationMenu.js";
+import fe from "./components/AcNumberInput.js";
+import pe from "./components/AcPage.js";
+import me from "./components/AcPagination.js";
+import he from "./components/AcPreloader.js";
+import ge from "./components/AcProgress.js";
+import _e from "./components/AcProductHero.js";
+import ve from "./components/AcTag.js";
+import ye from "./components/AcResourceCard.js";
+import be from "./components/AcSectionContent.js";
+import xe from "./components/AcSegmentedControl.js";
+import Se from "./components/AcSettingsRow.js";
+import Ce from "./components/AcSidebar.js";
+import we from "./components/AcSidebarItem.js";
+import Te from "./components/AcSidebarSection.js";
+import Ee from "./components/AcSidePanel.js";
+import De from "./components/AcSideTabs.js";
+import Oe from "./components/AcSlider.js";
+import ke from "./components/AcStatCard.js";
+import Ae from "./components/AcStatusBar.js";
+import je from "./components/AcSteps.js";
+import Me from "./components/AcSwitch.js";
+import Ne from "./components/AcSwitchCard.js";
+import Pe from "./components/AcTable.js";
+import Fe from "./components/AcTabs.js";
+import Ie from "./components/AcTagInput.js";
+import Le from "./components/AcTextarea.js";
+import { useColorMode as Re } from "./composables/useColorMode.js";
+import ze from "./components/AcThemeMode.js";
+import Be from "./components/AcTimePicker.js";
+import { showToast as Ve, useToast as He } from "./composables/useToast.js";
+import Ue from "./components/AcToaster.js";
+import We from "./components/AcUsageCard.js";
+import Ge from "./components/AcUserMenu.js";
+import { useTablePagination as Ke } from "./composables/useTablePagination.js";
+import { useApiPagination as qe } from "./composables/useApiPagination.js";
+import { useBulkSelection as Je } from "./composables/useBulkSelection.js";
+import { useFormValidation as Ye } from "./composables/useFormValidation.js";
+import { HSLToHex as Xe, HexToHSL as Ze, MIN_CONTRAST as Qe, contrastOnWhite as $e, getThemeHSL as et, hexToHsl as tt, hslToHex as nt, readableLightness as rt, setThemeHSL as it, useBrandColor as at } from "./composables/useBrandColor.js";
+export { ee as AcAccordion, te as AcAccordionItem, n as AcAlert, a as AcAppSwitcher, o as AcAvatar, u as AcBadge, d as AcBanner, f as AcBreadcrumb, p as AcBulkActionBar, t as AcButton, m as AcButtons, h as AcCard, y as AcCellValue, b as AcCheckBox, x as AcCheckList, S as AcCheckRadio, C as AcCircularProgress, w as AcClusterSwitcher, T as AcColorInput, E as AcCommandBlock, D as AcConfirmModal, O as AcContentHeader, k as AcContentLayout, j as AcContentTable, M as AcCopyButton, N as AcCostSummary, P as AcDatePicker, I as AcDeleteConfirmationModal, I as AcDeleteModal, L as AcDivider, R as AcDropdown, z as AcDropdownDivider, B as AcDropdownItem, V as AcEmptyState, H as AcErrorState, U as AcFeatureCard, W as AcFileUpload, q as AcFontScale, J as AcFooter, Y as AcForm, X as AcFormArray, Z as AcFormFooter, Q as AcFormSection, ne as AcHeader, re as AcHeaderItem, ie as AcHeaderItems, ae as AcInfoTable, F as AcInput, oe as AcKbd, se as AcKeyValueInput, ce as AcLoader, le as AcLocaleSwitcher, r as AcLogo, g as AcModal, ue as AcNavbar, i as AcNavbarItem, de as AcNotificationMenu, fe as AcNumberInput, pe as AcPage, me as AcPagination, he as AcPreloader, _e as AcProductHero, ge as AcProgress, ye as AcResourceCard, A as AcSearchBar, be as AcSectionContent, xe as AcSegmentedControl, $ as AcSelect, Se as AcSettingsRow, Ee as AcSidePanel, De as AcSideTabs, Ce as AcSidebar, we as AcSidebarItem, Te as AcSidebarSection, _ as AcSkeleton, Oe as AcSlider, e as AcSpinner, ke as AcStatCard, Ae as AcStatusBar, je as AcSteps, Me as AcSwitch, Ne as AcSwitchCard, Pe as AcTable, Fe as AcTabs, ve as AcTag, Ie as AcTagInput, Le as AcTextarea, ze as AcThemeMode, Be as AcTimePicker, Ue as AcToaster, v as AcTooltip, We as AcUsageCard, Ge as AcUserMenu, G as FONT_SCALES, Xe as HSLToHex, Ze as HexToHSL, Qe as MIN_CONTRAST, $e as contrastOnWhite, et as getThemeHSL, tt as hexToHsl, nt as hslToHex, s as humanizeState, c as normalizeState, rt as readableLightness, it as setThemeHSL, Ve as showToast, l as statusMeta, qe as useApiPagination, at as useBrandColor, Je as useBulkSelection, Re as useColorMode, K as useFontScale, Ye as useFormValidation, Ke as useTablePagination, He as useToast };

package/dist/lib/theme.css

@@ -37,6 +37,10 @@
   /* Logo colours: exact brand values, the same in both themes. */
   --color-brand-navy: #193d4b;
   --color-brand-green: #00a651;
+  /* AcThemeMode's toggle, as cloud-ui's ThemeSwitcher: fixed in both themes like the brand colours */
+  --color-theme-sun: #ffbb52;
+  --color-theme-sun-soft: #ffeccf;
+  --color-theme-moon: #485367;
 
   /* ac-primary: AppsCode green */
   --color-primary: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light));
@@ -216,6 +220,8 @@
   --color-background: #f9fafb;
   --color-surface: #ffffff;
   --color-surface-muted: #f8f8f8;
+  /* Light sidebar panel: the muted surface by day, cloud-ui's #171717 sidebar by night */
+  --color-sidebar-panel: #fafafa;
   --color-surface-sunken: #f0f0f0;
   /* Neutral interaction tints: row hover, selected list item, soft chips */
   --color-accent: #eaf0f4;
@@ -326,6 +332,23 @@
   --animate-shake: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
   --animate-fade-in: fade-in 0.15s var(--ease-out-soft) both;
   --animate-pop-in: pop-in 0.15s var(--ease-out-soft) both;
+  /* AcLoader, cloud-ui's page loader: an eased arc, a breathing glow and three dots, each dot with its own delay */
+  --animate-loader-spin: loader-spin 0.85s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+  --animate-loader-glow: loader-glow 1.7s ease-in-out infinite;
+  --animate-loader-dot-1: loader-dot 1.2s ease-in-out infinite;
+  --animate-loader-dot-2: loader-dot 1.2s ease-in-out 0.15s infinite;
+  --animate-loader-dot-3: loader-dot 1.2s ease-in-out 0.3s infinite;
+  @keyframes loader-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes loader-glow {
+    0%, 100% { opacity: 0.5; transform: scale(1); }
+    50% { opacity: 0.15; transform: scale(1.15); }
+  }
+  @keyframes loader-dot {
+    0%, 70%, 100% { opacity: 0.4; transform: scale(1) translateY(0); }
+    35% { opacity: 1; transform: scale(1.2) translateY(-2px); }
+  }
   @keyframes shake {
     10%, 90% { transform: translate3d(-1px, 0, 0); }
     20%, 80% { transform: translate3d(2px, 0, 0); }
@@ -511,6 +534,7 @@
   --color-background: #0a0a0a;
   --color-surface: #171717;
   --color-surface-muted: #1f1f1f;
+  --color-sidebar-panel: #171717;
   --color-surface-sunken: #2c2c2c;
   --color-accent: #2a3138;
   --color-accent-hover: #323b44;
@@ -558,8 +582,10 @@
   h4 { font-size: var(--text-h4); letter-spacing: -0.012em; }
   h5 { font-size: var(--text-h5); letter-spacing: -0.008em; }
   h6 { font-size: var(--text-h6); letter-spacing: -0.008em; }
-  p { text-wrap: pretty; }
-  button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
+  /* cloud-ui's base rules: roomy paragraphs, medium labels, table headers and controls; components still set their own sizes */
+  p { text-wrap: pretty; line-height: 1.625; letter-spacing: 0.002em; }
+  label, th { font-weight: 500; letter-spacing: 0.002em; }
+  button, input, select, textarea { font-family: inherit; font-weight: 500; letter-spacing: inherit; }
   code, kbd, pre, samp { font-family: var(--font-mono); font-feature-settings: normal; }
   ::selection { background-color: var(--color-primary-90); color: var(--color-primary-10); }
   :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
@@ -575,11 +601,20 @@
 /* The standard focus treatment for form controls: a solid primary border plus a 2px primary/20 halo. */
 @utility focus-ring {
   outline: none;
-  border-color: var(--color-primary);
+  /* cloud-ui's field focus: a 35% primary border inside a 2px 20% halo */
+  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 
 /* Thin scrollbar: a 4px grey thumb, like cloud-ui's custom-scrollbar. */
+/* cloud-ui's `custom-container`: the page column, 1200px wide and centred, with 16px sides at every width. Pages add `py-8`. */
+@utility page-container {
+  width: 100%;
+  max-width: var(--container-page);
+  margin-inline: auto;
+  padding-inline: calc(var(--spacing) * 4);
+}
+
 @utility ac-scrollbar {
   overflow: auto;
   scrollbar-width: thin;
@@ -619,57 +654,7 @@
   .ac-progress-indeterminate { animation: none; }
 }
 
-/*
- * Charts (the /charts entry). Unovis styles its SVG through --vis-* variables; they're set on chart roots only,
- * so other Unovis charts on the page keep their own look. The --vis-dark-* twins get the same tokens, so
- * Unovis' own dark-theme selectors (html.theme-dark and the like) still resolve to ours.
- */
+/* Charts (the /charts entry). ECharts draws on a canvas and gets its colours from the tokens in JS; this only keeps figures aligned. */
 [data-ac-chart] {
   font-variant-numeric: tabular-nums;
-  --vis-font-family: var(--font-sans);
-  --vis-axis-font-family: var(--font-sans);
-  --vis-axis-tick-label-font-size: 12px;
-  --vis-axis-tick-label-weight: 400;
-  --vis-axis-label-font-size: 12px;
-  --vis-axis-label-weight: 500;
-  --vis-axis-tick-color: var(--color-border);
-  --vis-dark-axis-tick-color: var(--color-border);
-  --vis-axis-domain-color: var(--color-border-dark);
-  --vis-dark-axis-domain-color: var(--color-border-dark);
-  --vis-axis-grid-color: var(--color-border);
-  --vis-dark-axis-grid-color: var(--color-border);
-  --vis-axis-tick-label-color: var(--color-muted);
-  --vis-dark-axis-tick-label-color: var(--color-muted);
-  --vis-axis-label-color: var(--color-muted);
-  --vis-dark-axis-label-color: var(--color-muted);
-  --vis-crosshair-line-stroke-color: var(--color-border-dark);
-  --vis-crosshair-circle-stroke-color: var(--color-surface);
-  --vis-crosshair-circle-stroke-width: 2px;
-  --vis-crosshair-circle-stroke-opacity: 1;
-  /* A 1px surface stroke leaves a 2px gap between stacked segments. */
-  --vis-stacked-bar-stroke-color: var(--color-surface);
-  --vis-dark-stacked-bar-stroke-color: var(--color-surface);
-  --vis-stacked-bar-stroke-width: 1px;
-  --vis-grouped-bar-hover-stroke-width: 0px;
-  --vis-area-fill-opacity: 1;
-  --vis-donut-background-color: var(--color-surface-sunken);
-  --vis-dark-donut-background-color: var(--color-surface-sunken);
-  --vis-donut-segment-stroke-color: var(--color-surface);
-  --vis-donut-segment-stroke-width: 2px;
-  --vis-donut-central-label-text-color: var(--color-heading);
-  --vis-dark-donut-central-label-text-color: var(--color-heading);
-  --vis-donut-central-sub-label-text-color: var(--color-muted);
-  --vis-dark-donut-central-sub-label-text-color: var(--color-muted);
-  --vis-legend-label-color: var(--color-muted);
-  --vis-dark-legend-label-color: var(--color-muted);
-  --vis-legend-label-font-size: 12px;
-  --vis-tooltip-background-color: var(--color-surface);
-  --vis-dark-tooltip-background-color: var(--color-surface);
-  --vis-tooltip-border-color: var(--color-border);
-  --vis-dark-tooltip-border-color: var(--color-border);
-  --vis-tooltip-text-color: var(--color-body);
-  --vis-dark-tooltip-text-color: var(--color-body);
-  --vis-tooltip-border-radius: 10px;
-  --vis-tooltip-box-shadow: var(--shadow-lg);
-  --vis-tooltip-padding: 10px 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",
@@ -45,6 +45,7 @@
   },
   "peerDependencies": {
     "@lucide/vue": "^1.0.0",
+    "echarts": "^6.0.0",
     "vue": "^3.5.0"
   },
   "dependencies": {
@@ -59,13 +60,14 @@
     "@codemirror/search": "^6.7.2",
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.13",
+    "@dagrejs/dagre": "^3.1.1",
     "@fontsource-variable/google-sans-flex": "^5.3.1",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/roboto": "^5.3.0",
     "@lezer/highlight": "^1.2.5",
-    "@unovis/ts": "^1.7.1",
-    "@unovis/vue": "^1.7.1",
     "ajv": "^8.20.0",
+    "topojson-client": "^3.1.0",
+    "world-atlas": "^2.0.2",
     "yaml": "^2.9.1"
   },
   "devDependencies": {
@@ -75,8 +77,10 @@
     "@tailwindcss/vite": "^4.3.3",
     "@tsconfig/node22": "^22.0.6",
     "@types/node": "^26.6.3",
+    "@types/topojson-client": "^3.1.5",
     "@vitejs/plugin-vue": "^6.0.9",
     "@vue/tsconfig": "^0.9.1",
+    "echarts": "^6.1.0",
     "postcss": "^8.5.28",
     "postcss-selector-parser": "^7.1.6",
     "shiki": "^4.4.3",
@@ -87,5 +91,10 @@
     "vue-component-meta": "^3.3.11",
     "vue-router": "^4.6.4",
     "vue-tsc": "^3.3.11"
+  },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
   }
 }