@ternent/core 0.0.1

package/packages/ui/src/patterns/Verification/verification.utils.ts

@@ -0,0 +1,75 @@
+import type { BadgeTone } from "../../primitives/Badge/Badge.types";
+import type {
+  VerificationContext,
+  VerificationStatus,
+  VerificationSurface,
+} from "./verification.types";
+
+export function getVerificationStatusLabel(status: VerificationStatus): string {
+  if (status === "verified") return "Verified";
+  if (status === "failed") return "Failed";
+  return "Unknown";
+}
+
+export function getVerificationHeadline(status: VerificationStatus): string {
+  if (status === "verified") return "Verified proof";
+  if (status === "failed") return "Failed proof";
+  return "Unknown proof";
+}
+
+export function getVerificationBadgeTone(status: VerificationStatus): BadgeTone {
+  if (status === "verified") return "success";
+  if (status === "failed") return "critical";
+  return "neutral";
+}
+
+export function getVerificationSurfaceLabel(surface?: VerificationSurface): string | undefined {
+  if (surface === "browser") return "Browser";
+  if (surface === "cli") return "CLI";
+  if (surface === "ci") return "CI";
+  return undefined;
+}
+
+export function getVerificationContextSubtext(
+  status: VerificationStatus,
+  context?: VerificationContext,
+): string | undefined {
+  if (status === "unknown") return undefined;
+
+  if (status === "verified") {
+    if (context?.surface === "cli") return "Verified via CLI";
+    if (context?.surface === "ci") return "Verified in CI";
+    if (context?.surface === "browser") return "Verified in browser";
+    return "Independent verification successful";
+  }
+
+  if (context?.surface === "cli") return "Verification failed via CLI";
+  if (context?.surface === "ci") return "Verification failed in CI";
+  if (context?.surface === "browser") return "Verification failed in browser";
+  return "Independent verification failed";
+}
+
+export function truncateMiddle(value: string, leading = 12, trailing = 12): string {
+  if (value.length <= leading + trailing + 3) {
+    return value;
+  }
+
+  return `${value.slice(0, leading)}...${value.slice(-trailing)}`;
+}
+
+export async function copyToClipboard(value: string): Promise<boolean> {
+  if (
+    typeof navigator === "undefined" ||
+    !navigator.clipboard ||
+    typeof navigator.clipboard.writeText !== "function"
+  ) {
+    return false;
+  }
+
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/packages/ui/src/patterns/index.ts

@@ -0,0 +1,25 @@
+import "../style.css";
+
+export { default as FeatureCard } from "./FeatureCard/FeatureCard.vue";
+export { default as FormField } from "./FormField/FormField.vue";
+export { default as KeyValueList } from "./KeyValueList/KeyValueList.vue";
+export { default as LandingPage } from "./LandingPage/LandingPage.vue";
+export { default as ListWorkspaceLayout } from "./ListWorkspaceLayout/ListWorkspaceLayout.vue";
+export { default as Logo } from "./Logo/Logo.vue";
+export { default as PanelChrome } from "./PanelChrome/PanelChrome.vue";
+export { default as PageSurface } from "./PageSurface/PageSurface.vue";
+export { default as PreviewPanel } from "./PreviewPanel/PreviewPanel.vue";
+export { default as RecordList } from "./RecordList/RecordList.vue";
+export { default as SectionClarifier } from "./SectionClarifier/SectionClarifier.vue";
+export { default as SectionIntro } from "./SectionIntro/SectionIntro.vue";
+export { default as SidebarNav } from "./SidebarNav/SidebarNav.vue";
+export { default as SplitView } from "./SplitView/SplitView.vue";
+export { default as StepList } from "./StepList/StepList.vue";
+export type * from "./KeyValueList/KeyValueList.types";
+export type * from "./LandingPage/LandingPage.types";
+export type * from "./PanelChrome/PanelChrome.types";
+export type * from "./RecordList/RecordList.types";
+export type * from "./SidebarNav/SidebarNav.types";
+export type * from "./SplitView/SplitView.types";
+export * from "./Verification";
+export * from "./IdentityGlyph";

package/packages/ui/src/primitives/Accordian/Accordian.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Accordion from "../Accordion/Accordion.vue";
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <Accordion v-bind="$attrs">
+    <slot />
+  </Accordion>
+</template>

package/packages/ui/src/primitives/Accordian/AccordianItem.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import AccordionItem from "../Accordion/AccordionItem.vue";
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <AccordionItem v-bind="$attrs">
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+    <slot />
+  </AccordionItem>
+</template>

package/packages/ui/src/primitives/Accordion/Accordion.props.ts

@@ -0,0 +1,21 @@
+import type { PropType } from "vue";
+import type { AccordionValue } from "./Accordion.types";
+
+export const accordionProps = {
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
+  lazyMount: {
+    type: Boolean,
+    default: true,
+  },
+  value: {
+    type: [String, Array] as PropType<AccordionValue>,
+    default: undefined,
+  },
+};

package/packages/ui/src/primitives/Accordion/Accordion.spec.md

@@ -0,0 +1,50 @@
+# Accordion
+
+## Purpose
+
+Disclosure primitive for stacked sections of related content.
+
+## Category
+
+Primitive
+
+## Public API
+
+`Accordion` props:
+
+- `multiple`
+- `collapsible`
+- `lazyMount`
+- `value`
+
+`Accordion` events:
+
+- `update:value`
+
+`AccordionItem` props:
+
+- `value`
+- `title`
+- `disabled`
+
+Slots:
+
+- `AccordionItem#title`
+- default item content
+
+## Accessibility
+
+- built on Ark accordion semantics
+- keyboard navigation and disclosure state come from Ark
+- supports controlled usage through `value` + `update:value`
+
+## Keyboard behavior
+
+- trigger is focusable
+- Enter/Space toggle sections
+- arrow-key behavior follows Ark accordion rules
+
+## Compatibility
+
+Canonical naming is `Accordion` / `AccordionItem`.
+Legacy `Accordian` / `AccordianItem` exports remain as compatibility aliases for now.

package/packages/ui/src/primitives/Accordion/Accordion.types.ts

@@ -0,0 +1,4 @@
+export const accordionValueModeValues = ["single", "multiple"] as const;
+
+export type AccordionValueMode = (typeof accordionValueModeValues)[number];
+export type AccordionValue = string | string[] | undefined;

package/packages/ui/src/primitives/Accordion/Accordion.variants.ts

@@ -0,0 +1,12 @@
+export const accordionRootClass = "w-full divide-y divide-[var(--ui-border)]";
+export const accordionItemClass = "group";
+export const accordionTriggerClass =
+  "flex w-full items-center justify-between gap-3 py-4 text-left text-[var(--ui-fg)] " +
+  "transition-[color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "hover:text-[var(--ui-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)]";
+export const accordionTitleClass = "flex-1 text-sm font-medium";
+export const accordionIndicatorClass =
+  "size-4 text-[var(--ui-fg-muted)] transition-transform duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] group-data-[state=open]:rotate-180";
+export const accordionContentClass =
+  "overflow-hidden text-sm text-[var(--ui-fg-muted)] data-[state=open]:animate-[accordion-down_var(--ui-duration-normal)_var(--ui-ease-out)] data-[state=closed]:animate-[accordion-up_var(--ui-duration-fast)_var(--ui-ease-out)]";
+export const accordionPanelClass = "pb-4 pt-1";

package/packages/ui/src/primitives/Accordion/Accordion.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Accordion as ArkAccordion } from "@ark-ui/vue/accordion";
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { accordionProps } from "./Accordion.props";
+import type { AccordionValue } from "./Accordion.types";
+import { accordionRootClass } from "./Accordion.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:value": [value: AccordionValue];
+}>();
+
+const attrs = useAttrs();
+const props = defineProps(accordionProps);
+
+const rootClass = computed(() => twMerge(accordionRootClass, normalizeClass(attrs.class)));
+const modelValue = computed<string[]>(() => {
+  if (Array.isArray(props.value)) return props.value;
+  if (typeof props.value === "string" && props.value.length > 0) return [props.value];
+  return [];
+});
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+function handleValueChange(value: string[]) {
+  emit("update:value", props.multiple ? value : value[0]);
+}
+</script>
+
+<template>
+  <ArkAccordion.Root
+    :class="rootClass"
+    :multiple="props.multiple"
+    :collapsible="props.collapsible"
+    :lazy-mount="props.lazyMount"
+    :model-value="modelValue"
+    unmount-on-exit
+    v-bind="rootAttrs"
+    @update:model-value="handleValueChange"
+  >
+    <slot />
+  </ArkAccordion.Root>
+</template>
+
+<style scoped>
+@keyframes accordion-down {
+  from {
+    height: 0;
+    opacity: 0.01;
+  }
+  to {
+    height: var(--height);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0.01;
+  }
+}
+</style>

package/packages/ui/src/primitives/Accordion/AccordionItem.props.ts

@@ -0,0 +1,14 @@
+export const accordionItemProps = {
+  value: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};

package/packages/ui/src/primitives/Accordion/AccordionItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Accordion as ArkAccordion } from "@ark-ui/vue/accordion";
+import { accordionItemProps } from "./AccordionItem.props";
+import {
+  accordionContentClass,
+  accordionIndicatorClass,
+  accordionItemClass,
+  accordionPanelClass,
+  accordionTitleClass,
+  accordionTriggerClass,
+} from "./Accordion.variants";
+
+const props = defineProps(accordionItemProps);
+</script>
+
+<template>
+  <ArkAccordion.Item :value="props.value" :disabled="props.disabled" :class="accordionItemClass">
+    <ArkAccordion.ItemTrigger :class="accordionTriggerClass">
+      <slot name="title">
+        <span :class="accordionTitleClass">{{ props.title }}</span>
+      </slot>
+      <ArkAccordion.ItemIndicator :class="accordionIndicatorClass">
+        <svg viewBox="0 0 20 20" fill="none" class="size-full" aria-hidden="true">
+          <path
+            d="m5 7.5 5 5 5-5"
+            stroke="currentColor"
+            stroke-width="1.75"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </ArkAccordion.ItemIndicator>
+    </ArkAccordion.ItemTrigger>
+    <ArkAccordion.ItemContent :class="accordionContentClass">
+      <div :class="accordionPanelClass">
+        <slot />
+      </div>
+    </ArkAccordion.ItemContent>
+  </ArkAccordion.Item>
+</template>

package/packages/ui/src/primitives/Badge/Badge.props.ts

@@ -0,0 +1,17 @@
+import type { PropType } from "vue";
+import type { BadgeSize, BadgeTone, BadgeVariant } from "./Badge.types";
+
+export const badgeProps = {
+  tone: {
+    type: String as PropType<BadgeTone>,
+    default: "neutral",
+  },
+  variant: {
+    type: String as PropType<BadgeVariant>,
+    default: "soft",
+  },
+  size: {
+    type: String as PropType<BadgeSize>,
+    default: "sm",
+  },
+};

package/packages/ui/src/primitives/Badge/Badge.spec.md

@@ -0,0 +1,17 @@
+# Badge
+
+## Purpose
+
+Compact status and metadata primitive.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `tone`
+- `variant`
+- `size`

package/packages/ui/src/primitives/Badge/Badge.types.ts

@@ -0,0 +1,15 @@
+export const badgeToneValues = [
+  "neutral",
+  "primary",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "critical",
+] as const;
+export const badgeVariantValues = ["soft", "solid", "outline"] as const;
+export const badgeSizeValues = ["xs", "sm", "md"] as const;
+
+export type BadgeTone = (typeof badgeToneValues)[number];
+export type BadgeVariant = (typeof badgeVariantValues)[number];
+export type BadgeSize = (typeof badgeSizeValues)[number];

package/packages/ui/src/primitives/Badge/Badge.variants.ts

@@ -0,0 +1,48 @@
+import type { BadgeSize, BadgeTone, BadgeVariant } from "./Badge.types";
+
+export const badgeBaseClass =
+  "inline-flex items-center gap-1 rounded-full border font-medium tracking-[0.02em]";
+
+export const badgeSizeClasses: Record<BadgeSize, string> = {
+  xs: "px-2 py-0.5 text-[11px]",
+  sm: "px-2.5 py-0.5 text-xs",
+  md: "px-3 py-1 text-sm",
+};
+
+export const badgeToneVariantClasses: Record<BadgeTone, Record<BadgeVariant, string>> = {
+  neutral: {
+    soft: "border-[var(--ui-border)] bg-[var(--ui-tonal-secondary)] text-[var(--ui-fg)]",
+    solid: "border-transparent bg-[var(--ui-fg)] text-[var(--ui-bg)]",
+    outline: "border-[var(--ui-border)] bg-transparent text-[var(--ui-fg)]",
+  },
+  primary: {
+    soft: "border-[var(--ui-primary-muted)] bg-[var(--ui-primary-muted)] text-[var(--ui-primary)]",
+    solid: "border-transparent bg-[var(--ui-primary)] text-[var(--ui-on-primary)]",
+    outline: "border-[var(--ui-primary)] bg-transparent text-[var(--ui-primary)]",
+  },
+  secondary: {
+    soft: "border-[var(--ui-secondary-muted)] bg-[var(--ui-secondary-muted)] text-[var(--ui-secondary)]",
+    solid: "border-transparent bg-[var(--ui-secondary)] text-[var(--ui-on-secondary)]",
+    outline: "border-[var(--ui-secondary)] bg-transparent text-[var(--ui-secondary)]",
+  },
+  accent: {
+    soft: "border-[var(--ui-accent-muted)] bg-[var(--ui-accent-muted)] text-[var(--ui-accent)]",
+    solid: "border-transparent bg-[var(--ui-accent)] text-[var(--ui-on-accent)]",
+    outline: "border-[var(--ui-accent)] bg-transparent text-[var(--ui-accent)]",
+  },
+  success: {
+    soft: "border-[var(--ui-success-muted)] bg-[var(--ui-success-muted)] text-[var(--ui-success)]",
+    solid: "border-transparent bg-[var(--ui-success)] text-[var(--ui-on-success)]",
+    outline: "border-[var(--ui-success)] bg-transparent text-[var(--ui-success)]",
+  },
+  warning: {
+    soft: "border-[var(--ui-warning-muted)] bg-[var(--ui-warning-muted)] text-[var(--ui-warning)]",
+    solid: "border-transparent bg-[var(--ui-warning)] text-[var(--ui-on-warning)]",
+    outline: "border-[var(--ui-warning)] bg-transparent text-[var(--ui-warning)]",
+  },
+  critical: {
+    soft: "border-[var(--ui-critical-muted)] bg-[var(--ui-critical-muted)] text-[var(--ui-critical)]",
+    solid: "border-transparent bg-[var(--ui-critical)] text-[var(--ui-on-critical)]",
+    outline: "border-[var(--ui-critical)] bg-transparent text-[var(--ui-critical)]",
+  },
+};

package/packages/ui/src/primitives/Badge/Badge.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { badgeProps } from "./Badge.props";
+import { badgeBaseClass, badgeSizeClasses, badgeToneVariantClasses } from "./Badge.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const props = defineProps(badgeProps);
+
+const classes = computed(() =>
+  twMerge(
+    badgeBaseClass,
+    badgeSizeClasses[props.size],
+    badgeToneVariantClasses[props.tone][props.variant],
+    normalizeClass(attrs.class),
+  ),
+);
+
+const badgeAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<template>
+  <span :class="classes" v-bind="badgeAttrs">
+    <slot />
+  </span>
+</template>

package/packages/ui/src/primitives/Button/Button.props.ts

@@ -0,0 +1,29 @@
+import type { PropType } from "vue";
+import type { ButtonElement, ButtonNativeType, ButtonSize, ButtonVariant } from "./Button.types";
+
+export const buttonProps = {
+  as: {
+    type: String as PropType<ButtonElement>,
+    default: "button",
+  },
+  variant: {
+    type: String as PropType<ButtonVariant>,
+    default: "primary",
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: "md",
+  },
+  type: {
+    type: String as PropType<ButtonNativeType>,
+    default: "button",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+};

package/packages/ui/src/primitives/Button/Button.spec.md

@@ -0,0 +1,139 @@
+# Button
+
+## Purpose
+
+Primary interactive action primitive for `ternent-ui` v2.
+Use it for clicks, submissions, and lightweight link-style actions that still need the shared system silhouette.
+
+## Category
+
+Primitive
+
+## Anatomy
+
+- root element
+- optional `leading` slot
+- default label slot
+- optional `trailing` slot
+- optional loading spinner in the leading position
+
+## Public API
+
+Props:
+
+- `as`: `"button" | "a" | "RouterLink"`; defaults to `"button"`
+- `variant`: `primary | secondary | tertiary | critical | plain-primary | plain-secondary | critical-secondary`
+- `size`: `micro | xs | sm | md | lg | xl`
+- `type`: `button | submit | reset`; only applied when `as="button"`
+- `disabled`: boolean
+- `loading`: boolean
+
+Slots:
+
+- default: button label or content
+- `leading`: leading icon or adornment
+- `trailing`: trailing icon or adornment
+
+Events:
+
+- `click`: emitted when the control is activated and not inactive
+
+## API decisions
+
+- The current variant vocabulary is preserved intentionally because it already exists in the v2 seed and maps cleanly to the current token contract.
+- The current six-step size scale is preserved intentionally because the repo already uses it in legacy button work and supporting design-system utilities.
+- Polymorphism is deliberately restrained to `button`, `a`, and `RouterLink`.
+- Link-like behavior should use `as="a"` with standard anchor attrs or `as="RouterLink"` with a `to` attr passed through from the app.
+
+## Variants
+
+- `primary`: main call to action
+- `secondary`: neutral tonal emphasis
+- `tertiary`: lighter tonal action
+- `critical`: destructive primary action
+- `plain-primary`: low-emphasis primary text action
+- `plain-secondary`: low-emphasis neutral text action
+- `critical-secondary`: outlined destructive secondary action
+
+## Sizes
+
+- `micro`: densest utility button
+- `xs`: compact action
+- `sm`: small control
+- `md`: default control
+- `lg`: emphasized action
+- `xl`: largest standard action
+
+## States
+
+- default
+- hover
+- active
+- focus-visible
+- disabled
+- loading
+
+Notes:
+
+- `loading` and `disabled` both make the control inactive.
+- When `as="a"`, inactive state is enforced with `aria-disabled`, `tabindex="-1"`, and click prevention.
+
+## Accessibility
+
+- Native `<button>` semantics are used by default.
+- Native `<a>` semantics are preserved when `as="a"`.
+- `RouterLink` is treated as non-button navigation and receives the same inactive protection as anchor-like usage.
+- Focus-visible treatment uses the shared `--ui-ring` token.
+- Loading state exposes `aria-busy="true"`.
+- Icon-only usage must still provide an accessible name via visible text, `aria-label`, or equivalent attrs.
+
+## Token usage
+
+The primitive uses only the current `--ui-*` contract:
+
+- primary and critical action tokens
+- tonal surface tokens
+- ring token
+- radius token
+- shadow tokens
+- duration and easing tokens
+- interaction motion tokens
+
+## Examples
+
+```vue
+<Button>Save changes</Button>
+```
+
+```vue
+<Button variant="critical" type="submit">
+  Delete record
+</Button>
+```
+
+```vue
+<Button as="a" href="/settings" variant="plain-secondary">
+  Open settings
+</Button>
+```
+
+```vue
+<Button as="RouterLink" to="/app">
+  Open app
+</Button>
+```
+
+```vue
+<Button loading>
+  Saving
+</Button>
+```
+
+```vue
+<Button variant="secondary">
+  <template #leading>
+    <IconSearch />
+  </template>
+  Search
+</Button>
+```

package/packages/ui/src/primitives/Button/Button.types.ts

@@ -0,0 +1,19 @@
+export const buttonVariantValues = [
+  "primary",
+  "accent",
+  "secondary",
+  "tertiary",
+  "critical",
+  "plain-primary",
+  "plain-secondary",
+  "critical-secondary",
+] as const;
+
+export const buttonSizeValues = ["micro", "xs", "sm", "md", "lg", "xl", "hero"] as const;
+export const buttonElementValues = ["button", "a", "RouterLink"] as const;
+export const buttonTypeValues = ["button", "submit", "reset"] as const;
+
+export type ButtonVariant = (typeof buttonVariantValues)[number];
+export type ButtonSize = (typeof buttonSizeValues)[number];
+export type ButtonElement = (typeof buttonElementValues)[number];
+export type ButtonNativeType = (typeof buttonTypeValues)[number];