@gcsa/console-vue 0.1.0

package/dist/utils/gcsaTableColumns.d.ts

@@ -0,0 +1,19 @@
+import { ColumnDef } from '@tanstack/vue-table';
+import { GcsaTableColumn } from '@gcsa/console-core';
+export type GcsaTableCellSlotProps<T> = {
+    row: T;
+    value: unknown;
+    index: number;
+    column: string;
+};
+export type GcsaTableHeaderSlotProps = {
+    column: string;
+    title: string;
+};
+export declare function isGcsaTableColumn<T>(column: GcsaTableColumn<T> | ColumnDef<T, unknown>): column is GcsaTableColumn<T>;
+export declare function gcsaColumnSlotKey(column: GcsaTableColumn<unknown> | ColumnDef<unknown, unknown>): string;
+export declare function gcsaTableColumnsToDefs<T extends Record<string, unknown>>(columns: GcsaTableColumn<T>[]): ColumnDef<T, unknown>[];
+export declare function resolveGcsaTableColumns<T extends Record<string, unknown>>(columns: Array<GcsaTableColumn<T> | ColumnDef<T, unknown>>): ColumnDef<T, unknown>[];
+export declare function gcsaTableCellSlotName(slotKey: string): string;
+export declare function gcsaTableHeaderSlotName(slotKey: string): string;
+export declare function formatGcsaTableCellValue(value: unknown): string;

package/dist/utils/gcsaTableColumns.js

@@ -0,0 +1,50 @@
+function o(r) {
+  return typeof r == "object" && r !== null && "id" in r && typeof r.header == "string" && !("accessorFn" in r) && !("meta" in r);
+}
+function l(r) {
+  return r.map((e) => {
+    var a, s;
+    const d = e.slot ?? e.id, i = !!((a = e.columns) != null && a.length), f = e.accessorKey ?? e.id;
+    return {
+      id: e.id,
+      ...i ? {} : { accessorKey: f },
+      header: e.header,
+      ...i ? {} : { enableSorting: e.sortable ?? !1 },
+      ...!i && e.sortCompare ? { sortingFn: (n, t) => e.sortCompare(n.original, t.original) } : {},
+      ...(s = e.columns) != null && s.length ? { columns: l(e.columns) } : {},
+      meta: {
+        width: e.width,
+        minWidth: e.minWidth,
+        resizable: e.resizable,
+        showOverflowTooltip: e.showOverflowTooltip,
+        align: e.align,
+        fixed: e.fixed,
+        hidden: e.hidden,
+        filter: e.filter,
+        slotKey: d
+      },
+      cell: !i && (e.cell || e.formatter) ? ({ getValue: n, row: t }) => e.cell ? e.cell(t.original) : e.formatter(n(), t.original, t.index) : void 0
+    };
+  });
+}
+function u(r) {
+  return r.length ? o(r[0]) ? l(r) : r : [];
+}
+function g(r) {
+  return `cell-${r}`;
+}
+function h(r) {
+  return `header-${r}`;
+}
+function b(r) {
+  return r == null ? "" : String(r);
+}
+export {
+  b as formatGcsaTableCellValue,
+  g as gcsaTableCellSlotName,
+  l as gcsaTableColumnsToDefs,
+  h as gcsaTableHeaderSlotName,
+  o as isGcsaTableColumn,
+  u as resolveGcsaTableColumns
+};
+//# sourceMappingURL=gcsaTableColumns.js.map

package/dist/utils/gcsaTableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gcsaTableColumns.js","sources":["../../src/utils/gcsaTableColumns.ts"],"sourcesContent":["import type { ColumnDef } from '@tanstack/vue-table';\nimport type { GcsaTableColumn } from '@gcsa/console-core';\n\nexport type GcsaTableCellSlotProps<T> = {\n  row: T;\n  value: unknown;\n  index: number;\n  column: string;\n};\n\nexport type GcsaTableHeaderSlotProps = {\n  column: string;\n  title: string;\n};\n\nexport function isGcsaTableColumn<T>(column: GcsaTableColumn<T> | ColumnDef<T, unknown>): column is GcsaTableColumn<T> {\n  return (\n    typeof column === 'object' &&\n    column !== null &&\n    'id' in column &&\n    typeof (column as GcsaTableColumn<T>).header === 'string' &&\n    !('accessorFn' in column) &&\n    !('meta' in column)\n  );\n}\n\nexport function gcsaColumnSlotKey(column: GcsaTableColumn<unknown> | ColumnDef<unknown, unknown>): string {\n  if (isGcsaTableColumn(column)) {\n    return column.slot ?? column.id;\n  }\n  const meta = column.meta as { slotKey?: string } | undefined;\n  const accessorKey = 'accessorKey' in column ? column.accessorKey : undefined;\n  return meta?.slotKey ?? column.id ?? String(accessorKey ?? '');\n}\n\nexport function gcsaTableColumnsToDefs<T extends Record<string, unknown>>(\n  columns: GcsaTableColumn<T>[]\n): ColumnDef<T, unknown>[] {\n  return columns.map(col => {\n    const slotKey = col.slot ?? col.id;\n    const isGroup = Boolean(col.columns?.length);\n    const accessorKey = col.accessorKey ?? col.id;\n\n    return {\n      id: col.id,\n      ...(!isGroup ? { accessorKey } : {}),\n      header: col.header,\n      ...(!isGroup ? { enableSorting: col.sortable ?? false } : {}),\n      ...(!isGroup && col.sortCompare ? { sortingFn: (rowA: { original: T }, rowB: { original: T }) => col.sortCompare!(rowA.original, rowB.original) } : {}),\n      ...(col.columns?.length ? { columns: gcsaTableColumnsToDefs(col.columns) } : {}),\n      meta: {\n        width: col.width,\n        minWidth: col.minWidth,\n        resizable: col.resizable,\n        showOverflowTooltip: col.showOverflowTooltip,\n        align: col.align,\n        fixed: col.fixed,\n        hidden: col.hidden,\n        filter: col.filter,\n        slotKey\n      },\n      cell: !isGroup && (col.cell || col.formatter)\n        ? ({ getValue, row }) => col.cell\n          ? col.cell(row.original)\n          : col.formatter!(getValue(), row.original, row.index)\n        : undefined\n    };\n  });\n}\n\nexport function resolveGcsaTableColumns<T extends Record<string, unknown>>(\n  columns: Array<GcsaTableColumn<T> | ColumnDef<T, unknown>>\n): ColumnDef<T, unknown>[] {\n  if (!columns.length) return [];\n  if (isGcsaTableColumn(columns[0])) {\n    return gcsaTableColumnsToDefs(columns as GcsaTableColumn<T>[]);\n  }\n  return columns as ColumnDef<T, unknown>[];\n}\n\nexport function gcsaTableCellSlotName(slotKey: string) {\n  return `cell-${slotKey}`;\n}\n\nexport function gcsaTableHeaderSlotName(slotKey: string) {\n  return `header-${slotKey}`;\n}\n\nexport function formatGcsaTableCellValue(value: unknown) {\n  if (value == null) return '';\n  return String(value);\n}\n"],"names":["isGcsaTableColumn","column","gcsaTableColumnsToDefs","columns","col","_a","_b","slotKey","isGroup","accessorKey","rowA","rowB","getValue","row","resolveGcsaTableColumns","gcsaTableCellSlotName","gcsaTableHeaderSlotName","formatGcsaTableCellValue","value"],"mappings":"AAeO,SAASA,EAAqBC,GAAkF;AACrH,SACE,OAAOA,KAAW,YAClBA,MAAW,QACX,QAAQA,KACR,OAAQA,EAA8B,UAAW,YACjD,EAAE,gBAAgBA,MAClB,EAAE,UAAUA;AAEhB;AAWO,SAASC,EACdC,GACyB;AACzB,SAAOA,EAAQ,IAAI,CAAAC,MAAO;AAvBrB,QAAAC,GAAAC;AAwBH,UAAMC,IAAUH,EAAI,QAAQA,EAAI,IAC1BI,IAAU,IAAQH,IAAAD,EAAI,YAAJ,QAAAC,EAAa,SAC/BI,IAAcL,EAAI,eAAeA,EAAI;AAE3C,WAAO;AAAA,MACL,IAAIA,EAAI;AAAA,MACR,GAAKI,IAA4B,CAAA,IAAlB,EAAE,aAAAC,EAAA;AAAA,MACjB,QAAQL,EAAI;AAAA,MACZ,GAAKI,IAAqD,CAAA,IAA3C,EAAE,eAAeJ,EAAI,YAAY,GAAA;AAAA,MAChD,GAAI,CAACI,KAAWJ,EAAI,cAAc,EAAE,WAAW,CAACM,GAAuBC,MAA0BP,EAAI,YAAaM,EAAK,UAAUC,EAAK,QAAQ,EAAA,IAAM,CAAA;AAAA,MACpJ,IAAIL,IAAAF,EAAI,YAAJ,QAAAE,EAAa,SAAS,EAAE,SAASJ,EAAuBE,EAAI,OAAO,EAAA,IAAM,CAAA;AAAA,MAC7E,MAAM;AAAA,QACJ,OAAOA,EAAI;AAAA,QACX,UAAUA,EAAI;AAAA,QACd,WAAWA,EAAI;AAAA,QACf,qBAAqBA,EAAI;AAAA,QACzB,OAAOA,EAAI;AAAA,QACX,OAAOA,EAAI;AAAA,QACX,QAAQA,EAAI;AAAA,QACZ,QAAQA,EAAI;AAAA,QACZ,SAAAG;AAAA,MAAA;AAAA,MAEF,MAAM,CAACC,MAAYJ,EAAI,QAAQA,EAAI,aAC/B,CAAC,EAAE,UAAAQ,GAAU,KAAAC,EAAA,MAAUT,EAAI,OACzBA,EAAI,KAAKS,EAAI,QAAQ,IACrBT,EAAI,UAAWQ,EAAA,GAAYC,EAAI,UAAUA,EAAI,KAAK,IACpD;AAAA,IAAA;AAAA,EAER,CAAC;AACH;AAEO,SAASC,EACdX,GACyB;AACzB,SAAKA,EAAQ,SACTH,EAAkBG,EAAQ,CAAC,CAAC,IACvBD,EAAuBC,CAA+B,IAExDA,IAJqB,CAAA;AAK9B;AAEO,SAASY,EAAsBR,GAAiB;AACrD,SAAO,QAAQA,CAAO;AACxB;AAEO,SAASS,EAAwBT,GAAiB;AACvD,SAAO,UAAUA,CAAO;AAC1B;AAEO,SAASU,EAAyBC,GAAgB;AACvD,SAAIA,KAAS,OAAa,KACnB,OAAOA,CAAK;AACrB;"}

package/dist/utils/zodValidators.d.ts

@@ -0,0 +1,21 @@
+import { ZodObject, ZodTypeAny } from 'zod';
+import { GcsaConsoleLocale } from '@gcsa/console-core';
+type ZodShape = Record<string, ZodTypeAny>;
+export declare function zodFieldValidator(schema: ZodObject<ZodShape>, fieldName: string, locale?: GcsaConsoleLocale): ({ value }: {
+    value: unknown;
+}) => string | undefined;
+export declare function zodFormValidator(schema: ZodObject<ZodShape>, locale?: GcsaConsoleLocale): ({ value }: {
+    value: Record<string, unknown>;
+}) => string | undefined;
+export declare function zodFieldValidators(schema: ZodObject<ZodShape>, fieldName: string, locale?: GcsaConsoleLocale): {
+    onBlur: ({ value }: {
+        value: unknown;
+    }) => string | undefined;
+    onChange: ({ value }: {
+        value: unknown;
+    }) => string | undefined;
+    onSubmit: ({ value }: {
+        value: unknown;
+    }) => string | undefined;
+};
+export {};

package/dist/utils/zodValidators.js

@@ -0,0 +1,35 @@
+import { getGcsaLocaleMessages as l, GCSA_DEFAULT_LOCALE as u } from "@gcsa/console-core";
+function c(r, s, o) {
+  const e = l(o ?? u).validationFailed;
+  return ({ value: t }) => {
+    var n;
+    const a = r.shape[s];
+    if (!a) return;
+    const i = a.safeParse(t);
+    if (!i.success)
+      return ((n = i.error.issues[0]) == null ? void 0 : n.message) ?? e;
+  };
+}
+function f(r, s) {
+  const o = l(s ?? u).formValidationFailed;
+  return ({ value: e }) => {
+    var a;
+    const t = r.safeParse(e);
+    if (!t.success)
+      return ((a = t.error.issues[0]) == null ? void 0 : a.message) ?? o;
+  };
+}
+function m(r, s, o) {
+  const e = c(r, s, o);
+  return {
+    onBlur: e,
+    onChange: e,
+    onSubmit: e
+  };
+}
+export {
+  c as zodFieldValidator,
+  m as zodFieldValidators,
+  f as zodFormValidator
+};
+//# sourceMappingURL=zodValidators.js.map

package/dist/utils/zodValidators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zodValidators.js","sources":["../../src/utils/zodValidators.ts"],"sourcesContent":["import type { ZodObject, ZodTypeAny } from 'zod';\nimport {\n  GCSA_DEFAULT_LOCALE,\n  getGcsaLocaleMessages,\n  type GcsaConsoleLocale\n} from '@gcsa/console-core';\n\ntype ZodShape = Record<string, ZodTypeAny>;\n\nexport function zodFieldValidator(\n  schema: ZodObject<ZodShape>,\n  fieldName: string,\n  locale?: GcsaConsoleLocale\n) {\n  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).validationFailed;\n  return ({ value }: { value: unknown }) => {\n    const fieldSchema = schema.shape[fieldName];\n    if (!fieldSchema) return undefined;\n    const result = fieldSchema.safeParse(value);\n    if (result.success) return undefined;\n    return result.error.issues[0]?.message ?? fallback;\n  };\n}\n\nexport function zodFormValidator(schema: ZodObject<ZodShape>, locale?: GcsaConsoleLocale) {\n  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).formValidationFailed;\n  return ({ value }: { value: Record<string, unknown> }) => {\n    const result = schema.safeParse(value);\n    if (result.success) return undefined;\n    return result.error.issues[0]?.message ?? fallback;\n  };\n}\n\nexport function zodFieldValidators(\n  schema: ZodObject<ZodShape>,\n  fieldName: string,\n  locale?: GcsaConsoleLocale\n) {\n  const validate = zodFieldValidator(schema, fieldName, locale);\n  return {\n    onBlur: validate,\n    onChange: validate,\n    onSubmit: validate\n  };\n}\n"],"names":["zodFieldValidator","schema","fieldName","locale","fallback","getGcsaLocaleMessages","GCSA_DEFAULT_LOCALE","value","fieldSchema","result","_a","zodFormValidator","zodFieldValidators","validate"],"mappings":";AASO,SAASA,EACdC,GACAC,GACAC,GACA;AACA,QAAMC,IAAWC,EAAsBF,KAAUG,CAAmB,EAAE;AACtE,SAAO,CAAC,EAAE,OAAAC,QAAgC;;AACxC,UAAMC,IAAcP,EAAO,MAAMC,CAAS;AAC1C,QAAI,CAACM,EAAa;AAClB,UAAMC,IAASD,EAAY,UAAUD,CAAK;AAC1C,QAAI,CAAAE,EAAO;AACX,eAAOC,IAAAD,EAAO,MAAM,OAAO,CAAC,MAArB,gBAAAC,EAAwB,YAAWN;AAAA,EAC5C;AACF;AAEO,SAASO,EAAiBV,GAA6BE,GAA4B;AACxF,QAAMC,IAAWC,EAAsBF,KAAUG,CAAmB,EAAE;AACtE,SAAO,CAAC,EAAE,OAAAC,QAAgD;;AACxD,UAAME,IAASR,EAAO,UAAUM,CAAK;AACrC,QAAI,CAAAE,EAAO;AACX,eAAOC,IAAAD,EAAO,MAAM,OAAO,CAAC,MAArB,gBAAAC,EAAwB,YAAWN;AAAA,EAC5C;AACF;AAEO,SAASQ,EACdX,GACAC,GACAC,GACA;AACA,QAAMU,IAAWb,EAAkBC,GAAQC,GAAWC,CAAM;AAC5D,SAAO;AAAA,IACL,QAAQU;AAAA,IACR,UAAUA;AAAA,IACV,UAAUA;AAAA,EAAA;AAEd;"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@gcsa/console-vue",
+  "version": "0.1.0",
+  "description": "GCSA console UI — Vue 3 components (Ark UI + TanStack + GCSA styles)",
+  "type": "module",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.vue.d.ts",
+      "import": "./dist/components/*.vue.js"
+    },
+    "./composables/*": {
+      "types": "./dist/composables/*.d.ts",
+      "import": "./dist/composables/*.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ark-ui/vue": "^5.9.0",
+    "@tanstack/vue-form": "^1.12.2",
+    "@tanstack/vue-table": "^8.21.3",
+    "zod": "^3.24.4",
+    "@gcsa/console-core": "0.1.0",
+    "@gcsa/console-styles": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.16",
+    "vue-tsc": "^2.2.10"
+  },
+  "scripts": {
+    "build": "vite build && node scripts/postbuild.mjs",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/components/ConsoleHeader.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="gcsa-console-header gcsa-ui-surface">
+    <div class="gcsa-console-header__main">
+      <span v-if="eyebrow" class="gcsa-console-header__eyebrow">{{ eyebrow }}</span>
+      <div class="gcsa-console-header__title-row">
+        <h1 class="gcsa-console-header__title">{{ title }}</h1>
+        <p v-if="subtitle" class="gcsa-console-header__subtitle">（{{ subtitle }}）</p>
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="gcsa-console-header__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ConsoleHeaderProps } from '../types/componentProps';
+
+defineOptions({ name: 'ConsoleHeader' });
+
+defineProps<ConsoleHeaderProps>();
+</script>

package/src/components/ConsolePage.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="gcsa-page-stack">
+    <section v-if="title || description" class="gcsa-page-intro gcsa-ui-surface">
+      <div v-if="title" class="gcsa-page-intro__title">{{ title }}</div>
+      <div v-if="description" class="gcsa-page-intro__desc">{{ description }}</div>
+    </section>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ConsolePageProps } from '../types/componentProps';
+
+defineOptions({ name: 'ConsolePage' });
+
+defineProps<ConsolePageProps>();
+</script>

package/src/components/ConsoleShell.vue

@@ -0,0 +1,206 @@
+<template>
+  <div
+    class="gcsa-console-shell gcsa-ui-surface"
+    :class="shellClasses"
+  >
+    <button
+      v-if="showMobileScrim"
+      type="button"
+      class="gcsa-console-shell__scrim"
+      :aria-label="messages.shellCloseNav"
+      @click="closeMobileSidebar"
+    />
+
+    <aside
+      class="gcsa-console-shell__sidebar"
+      :aria-hidden="isMobile && !mobileSidebarOpen ? true : undefined"
+    >
+      <slot name="sidebar">
+        <ConsoleSidebar
+          v-if="navItems?.length"
+          :items="navItems"
+          :active-key="activeKey"
+          :collapsed="desktopCollapsed"
+          :product-name="productName"
+          :product-tagline="productTagline"
+          :brand-mark="brandMark"
+          @select="onNavSelect"
+        />
+      </slot>
+    </aside>
+
+    <section class="gcsa-console-shell__main">
+      <header v-if="showHeaderBar" class="gcsa-console-shell__header">
+        <div class="gcsa-console-shell__header-row">
+          <button
+            v-if="showSiderToggle"
+            type="button"
+            class="gcsa-console-shell__sider-toggle gcsa-focus-ring"
+            :aria-expanded="siderToggleExpanded"
+            :aria-label="siderToggleLabel"
+            @click="toggleSidebar"
+          >
+            <GcsaIcon :name="siderToggleIcon" />
+          </button>
+          <div class="gcsa-console-shell__header-body">
+            <slot name="header">
+              <ConsoleHeader
+                v-if="title"
+                :title="title"
+                :eyebrow="eyebrow"
+                :subtitle="subtitle"
+              >
+                <template v-if="$slots.actions" #actions>
+                  <slot name="actions" />
+                </template>
+              </ConsoleHeader>
+            </slot>
+          </div>
+        </div>
+      </header>
+      <main class="gcsa-console-shell__content" id="gcsa-console-main">
+        <div :key="activeKey" class="gcsa-console-shell__content-inner">
+          <ConsolePage v-if="pageDescription" :description="pageDescription">
+            <slot />
+          </ConsolePage>
+          <slot v-else />
+        </div>
+      </main>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue';
+import type { GcsaNavItem } from '@gcsa/console-core';
+import type { ConsoleShellProps } from '../types/componentProps';
+import type { GcsaIconName } from '../icons';
+import ConsoleHeader from './ConsoleHeader.vue';
+import ConsolePage from './ConsolePage.vue';
+import ConsoleSidebar from './ConsoleSidebar.vue';
+import GcsaIcon from './GcsaIcon.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'ConsoleShell' });
+
+const props = withDefaults(
+  defineProps<ConsoleShellProps>(),
+  {
+    activeKey: '',
+    productName: 'GCSA',
+    productTagline: 'Console',
+    collapsible: true,
+    collapsed: false,
+    mobileSidebarOpen: undefined
+  }
+);
+
+const emit = defineEmits<{
+  'nav-select': [item: GcsaNavItem];
+  'update:activeKey': [key: string];
+  'update:collapsed': [collapsed: boolean];
+  'update:mobileSidebarOpen': [open: boolean];
+}>();
+
+const messages = useGcsaLocaleMessages();
+
+const slots = useSlots();
+const isMobile = ref(false);
+const internalMobileSidebarOpen = ref(false);
+const desktopCollapsed = ref(props.collapsed);
+
+const mobileSidebarOpen = computed({
+  get: () => props.mobileSidebarOpen ?? internalMobileSidebarOpen.value,
+  set: (open: boolean) => {
+    if (props.mobileSidebarOpen === undefined) {
+      internalMobileSidebarOpen.value = open;
+    }
+    emit('update:mobileSidebarOpen', open);
+  }
+});
+
+let mediaQuery: MediaQueryList | null = null;
+
+const hasPresetSidebar = computed(() => Boolean(props.navItems?.length));
+const hasSidebar = computed(() => Boolean(slots.sidebar || hasPresetSidebar.value));
+const hasHeader = computed(() => Boolean(slots.header || props.title));
+const showHeaderBar = computed(() => hasHeader.value || (props.collapsible && hasSidebar.value));
+const showSiderToggle = computed(() => props.collapsible && hasSidebar.value);
+const showMobileScrim = computed(() => props.collapsible && isMobile.value && mobileSidebarOpen.value);
+
+const shellClasses = computed(() => ({
+  'gcsa-console-shell--sidebar-collapsed': !isMobile.value && desktopCollapsed.value,
+  'gcsa-console-shell--sidebar-open': isMobile.value && mobileSidebarOpen.value
+}));
+
+const siderToggleIcon = computed((): GcsaIconName =>
+  isMobile.value || !desktopCollapsed.value ? 'menu' : 'chevronRight'
+);
+
+const siderToggleExpanded = computed(() =>
+  isMobile.value ? mobileSidebarOpen.value : !desktopCollapsed.value
+);
+
+const siderToggleLabel = computed(() => {
+  if (isMobile.value) {
+    return mobileSidebarOpen.value ? messages.value.shellCloseNav : messages.value.shellOpenNav;
+  }
+  return desktopCollapsed.value ? messages.value.shellExpandSider : messages.value.shellCollapseSider;
+});
+
+watch(
+  () => props.collapsed,
+  value => {
+    desktopCollapsed.value = value;
+  }
+);
+
+function syncMobileState(matches: boolean) {
+  isMobile.value = matches;
+  if (matches) {
+    mobileSidebarOpen.value = false;
+  }
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isMobile.value && mobileSidebarOpen.value) {
+    closeMobileSidebar();
+  }
+}
+
+onMounted(() => {
+  if (typeof window === 'undefined') return;
+  mediaQuery = window.matchMedia('(max-width: 960px)');
+  syncMobileState(mediaQuery.matches);
+  mediaQuery.addEventListener('change', event => syncMobileState(event.matches));
+  document.addEventListener('keydown', onKeydown);
+});
+
+onUnmounted(() => {
+  if (mediaQuery) {
+    mediaQuery.removeEventListener('change', event => syncMobileState(event.matches));
+  }
+  document.removeEventListener('keydown', onKeydown);
+});
+
+function toggleSidebar() {
+  if (isMobile.value) {
+    mobileSidebarOpen.value = !mobileSidebarOpen.value;
+    return;
+  }
+  desktopCollapsed.value = !desktopCollapsed.value;
+  emit('update:collapsed', desktopCollapsed.value);
+}
+
+function closeMobileSidebar() {
+  mobileSidebarOpen.value = false;
+}
+
+function onNavSelect(item: GcsaNavItem) {
+  if (isMobile.value) {
+    mobileSidebarOpen.value = false;
+  }
+  emit('nav-select', item);
+  emit('update:activeKey', item.key);
+}
+</script>

package/src/components/ConsoleSidebar.vue

@@ -0,0 +1,61 @@
+<template>
+  <nav
+    class="gcsa-console-nav"
+    :class="{ 'gcsa-console-nav--collapsed': collapsed }"
+    :aria-label="messages.consoleNavLabel"
+  >
+    <div class="gcsa-console-nav__brand">
+      <div class="gcsa-console-nav__brand-mark">
+        <GcsaBrandMark v-if="!brandMark" />
+        <template v-else>{{ brandMark }}</template>
+      </div>
+      <div class="gcsa-console-nav__brand-text">
+        <strong>{{ productName }}</strong>
+        <span>{{ productTagline }}</span>
+      </div>
+    </div>
+
+    <GcsaMenu
+      class="gcsa-console-nav__menu"
+      :items="menuItems"
+      mode="inline"
+      :collapsed="collapsed"
+      :selected-key="activeKey"
+      @select="onMenuSelect"
+    />
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { navItemsToMenuItems, type GcsaNavItem } from '@gcsa/console-core';
+import type { ConsoleSidebarProps } from '../types/componentProps';
+import GcsaBrandMark from './GcsaBrandMark.vue';
+import GcsaMenu from './GcsaMenu.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+const messages = useGcsaLocaleMessages();
+
+const props = withDefaults(
+  defineProps<ConsoleSidebarProps>(),
+  {
+    activeKey: '',
+    collapsed: false,
+    productName: 'GCSA',
+    productTagline: 'Console'
+  }
+);
+
+const emit = defineEmits<{
+  select: [item: GcsaNavItem];
+}>();
+
+const menuItems = computed(() => navItemsToMenuItems(props.items));
+
+function onMenuSelect(key: string) {
+  const item = props.items.find(navItem => navItem.key === key);
+  if (item && !item.href) {
+    emit('select', item);
+  }
+}
+</script>

package/src/components/GcsaAlert.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="gcsa-alert gcsa-ui-surface"
+    :class="`gcsa-alert--${type}`"
+    role="alert"
+  >
+    <div>
+      <div v-if="title" class="gcsa-alert__title">{{ title }}</div>
+      <div class="gcsa-alert__desc">
+        <slot>{{ description }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GcsaAlertProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaAlert' });
+
+withDefaults(
+  defineProps<GcsaAlertProps>(),
+  { type: 'info' }
+);
+</script>