@ternent/core 0.0.1

package/packages/ui/src/patterns/FeatureCard/FeatureCard.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Card from "../../primitives/Card/Card.vue";
+import type { FeatureCardSize, FeatureCardSurface, FeatureCardTone } from "./FeatureCard.types.js";
+
+const props = withDefaults(
+  defineProps<{
+    description?: string;
+    size?: FeatureCardSize;
+    surface?: FeatureCardSurface;
+    title: string;
+    tone?: FeatureCardTone;
+  }>(),
+  {
+    description: undefined,
+    size: "md",
+    surface: "elevated",
+    tone: "primary",
+  },
+);
+
+const rootClass = computed(() => [
+  "ui-feature-card",
+  `ui-feature-card--${props.size}`,
+  `ui-feature-card--${props.surface}`,
+]);
+const iconClass = computed(() => ["ui-feature-card__icon", `ui-feature-card__icon--${props.tone}`]);
+const cardVariant = computed(() => {
+  if (props.surface === "panel") {
+    return "panel";
+  }
+
+  if (props.surface === "subtle") {
+    return "subtle";
+  }
+
+  return "elevated";
+});
+</script>
+
+<template>
+  <Card :padding="props.size === 'sm' ? 'sm' : 'md'" :variant="cardVariant" :class="rootClass">
+    <div v-if="$slots.icon" :class="iconClass" aria-hidden="true">
+      <slot name="icon" />
+    </div>
+    <div class="ui-feature-card__body">
+      <h3 class="ui-feature-card__title">{{ props.title }}</h3>
+      <p v-if="props.description" class="ui-feature-card__description">
+        {{ props.description }}
+      </p>
+      <div v-if="$slots.default" class="ui-feature-card__content">
+        <slot />
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style scoped>
+.ui-feature-card {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: 1.25rem;
+  overflow: hidden;
+}
+
+.ui-feature-card::after {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  content: "";
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--ui-primary-muted) 64%, transparent),
+    transparent
+  );
+}
+
+.ui-feature-card--panel::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--ui-accent-muted) 54%, transparent),
+    transparent
+  );
+}
+
+.ui-feature-card--subtle::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--ui-border) 92%, transparent),
+    transparent
+  );
+}
+
+.ui-feature-card--sm {
+  gap: 1rem;
+}
+
+.ui-feature-card__icon {
+  display: inline-flex;
+  width: 2.75rem;
+  height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+  border-radius: var(--ui-radius-md);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.ui-feature-card__icon--primary {
+  color: var(--ui-primary);
+}
+
+.ui-feature-card__icon--secondary {
+  color: var(--ui-secondary);
+}
+
+.ui-feature-card__icon--accent {
+  color: var(--ui-accent);
+}
+
+.ui-feature-card__icon--success {
+  color: var(--ui-success);
+}
+
+.ui-feature-card__icon--info {
+  color: var(--ui-info);
+}
+
+.ui-feature-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-feature-card--subtle .ui-feature-card__body {
+  gap: 0.625rem;
+}
+
+.ui-feature-card__title {
+  margin: 0;
+  color: var(--ui-fg);
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+}
+
+.ui-feature-card--sm .ui-feature-card__title {
+  font-size: 1.1rem;
+}
+
+.ui-feature-card__description,
+.ui-feature-card__content {
+  margin: 0;
+  color: var(--ui-fg-muted);
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.ui-feature-card--subtle .ui-feature-card__description,
+.ui-feature-card--subtle .ui-feature-card__content {
+  color: color-mix(in srgb, var(--ui-fg-muted) 88%, var(--ui-fg) 12%);
+}
+
+.ui-feature-card--sm .ui-feature-card__description,
+.ui-feature-card--sm .ui-feature-card__content {
+  font-size: 0.95rem;
+}
+</style>

package/packages/ui/src/patterns/FormField/FormField.spec.md

@@ -0,0 +1,65 @@
+# FormField
+
+## Purpose
+
+Composable field pattern that binds label, control, description, and message content without turning `Input` or `Textarea` into one-off wrappers.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `id`: explicit base id for the field
+- `label`: string
+- `description`: string
+- `message`: string
+- `invalid`: boolean
+- `disabled`: boolean
+- `required`: boolean
+- `size`: `sm | md | lg`
+
+Default slot props:
+
+- `id`
+- `describedBy`
+- `invalid`
+- `disabled`
+- `required`
+
+Named slots:
+
+- `label`
+- `description`
+- `message`
+
+## Behavior
+
+- generates a stable fallback id when one is not provided
+- composes `Label` and `FieldMessage` primitives
+- exposes `describedBy` so the control can wire `aria-describedby`
+- uses `critical` tone for the message when `invalid` is true
+
+## Example
+
+```vue
+<FormField
+  id="email"
+  label="Email"
+  description="We will never share your email."
+  :message="emailError"
+  :invalid="Boolean(emailError)"
+>
+  <template #default="{ id, describedBy, invalid }">
+    <Input
+      :id="id"
+      v-model="email"
+      type="email"
+      :invalid="invalid"
+      :aria-describedby="describedBy"
+    />
+  </template>
+</FormField>
+```

package/packages/ui/src/patterns/FormField/FormField.types.ts

@@ -0,0 +1,11 @@
+export const formFieldSizeValues = ["sm", "md", "lg"] as const;
+
+export type FormFieldSize = (typeof formFieldSizeValues)[number];
+
+export type FormFieldSlotProps = {
+  describedBy?: string;
+  disabled: boolean;
+  id: string;
+  invalid: boolean;
+  required: boolean;
+};

package/packages/ui/src/patterns/FormField/FormField.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, useSlots } from "vue";
+import FieldMessage from "../../primitives/FieldMessage/FieldMessage.vue";
+import Label from "../../primitives/Label/Label.vue";
+import type { FormFieldSlotProps } from "./FormField.types.js";
+
+const props = withDefaults(
+  defineProps<{
+    description?: string;
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    label?: string;
+    message?: string;
+    required?: boolean;
+    size?: "sm" | "md" | "lg";
+  }>(),
+  {
+    description: undefined,
+    disabled: false,
+    id: undefined,
+    invalid: false,
+    label: undefined,
+    message: undefined,
+    required: false,
+    size: "md",
+  },
+);
+
+const slots = useSlots();
+const instance = getCurrentInstance();
+
+const fieldId = computed(() => props.id ?? `ui-field-${instance?.uid ?? "x"}`);
+
+const hasDescription = computed(() => Boolean(props.description || slots.description));
+const hasMessage = computed(() => Boolean(props.message || slots.message));
+
+const descriptionId = computed(() =>
+  hasDescription.value ? `${fieldId.value}-description` : undefined,
+);
+const messageId = computed(() => (hasMessage.value ? `${fieldId.value}-message` : undefined));
+const describedBy = computed(
+  () => [descriptionId.value, messageId.value].filter(Boolean).join(" ") || undefined,
+);
+
+const slotProps = computed<FormFieldSlotProps>(() => ({
+  describedBy: describedBy.value,
+  disabled: props.disabled,
+  id: fieldId.value,
+  invalid: props.invalid,
+  required: props.required,
+}));
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-2">
+    <Label
+      v-if="props.label || $slots.label"
+      :for="fieldId"
+      :size="props.size"
+      :required="props.required"
+      :disabled="props.disabled"
+      :invalid="props.invalid"
+    >
+      <slot name="label">{{ props.label }}</slot>
+    </Label>
+
+    <slot v-bind="slotProps" />
+
+    <FieldMessage
+      v-if="props.description || $slots.description"
+      :id="descriptionId"
+      :size="props.size"
+    >
+      <slot name="description">{{ props.description }}</slot>
+    </FieldMessage>
+
+    <FieldMessage
+      v-if="props.message || $slots.message"
+      :id="messageId"
+      :size="props.size"
+      :tone="props.invalid ? 'critical' : 'muted'"
+    >
+      <slot name="message">{{ props.message }}</slot>
+    </FieldMessage>
+  </div>
+</template>

package/packages/ui/src/patterns/IdentityGlyph/IdentityGlyph.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  IdentityGlyphAlgorithm,
+  IdentityGlyphInput,
+  IdentityGlyphSize,
+} from "./identityGlyph.types";
+import {
+  createIdentityGlyphModel,
+  getIdentityGlyphPaletteValues,
+  resolveIdentityGlyphSize,
+} from "./identityGlyph.utils";
+
+const props = withDefaults(
+  defineProps<{
+    algorithm?: IdentityGlyphAlgorithm;
+    identity: IdentityGlyphInput;
+    size?: number | IdentityGlyphSize;
+    title?: string;
+  }>(),
+  {
+    algorithm: "glyph:v1",
+    size: "sm",
+    title: undefined,
+  },
+);
+
+const pixelSize = computed(() => resolveIdentityGlyphSize(props.size));
+const model = computed(() => createIdentityGlyphModel(props.identity, props.algorithm));
+const paletteValues = computed(() => getIdentityGlyphPaletteValues(model.value.palette));
+const accessibleTitle = computed(
+  () => props.title ?? `Identity glyph ${model.value.shortIdentity}`,
+);
+</script>
+
+<template>
+  <svg
+    :width="pixelSize"
+    :height="pixelSize"
+    :viewBox="`0 0 ${model.grid.length} ${model.grid.length}`"
+    xmlns="http://www.w3.org/2000/svg"
+    shape-rendering="crispEdges"
+    role="img"
+    :aria-label="accessibleTitle"
+    :data-glyph-algorithm="model.algorithm"
+    :data-glyph-fallback="String(model.fallback)"
+  >
+    <title>{{ accessibleTitle }}</title>
+    <template v-for="(row, y) in model.grid" :key="`glyph-row-${y}`">
+      <rect
+        v-for="(cell, x) in row"
+        :key="`glyph-cell-${x}-${y}`"
+        :x="x"
+        :y="y"
+        width="1"
+        height="1"
+        :fill="paletteValues[cell] ?? model.palette.background"
+      />
+    </template>
+  </svg>
+</template>

package/packages/ui/src/patterns/IdentityGlyph/IdentityHandle.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import IdentityGlyph from "./IdentityGlyph.vue";
+import type { IdentityGlyphAlgorithm, IdentityGlyphInput } from "./identityGlyph.types";
+import { resolveIdentityGlyphInput } from "./identityGlyph.utils";
+
+const props = withDefaults(
+  defineProps<{
+    algorithm?: IdentityGlyphAlgorithm;
+    identity: IdentityGlyphInput;
+    identityText?: string;
+    label?: string;
+    size?: "sm" | "md";
+  }>(),
+  {
+    algorithm: "glyph:v1",
+    identityText: undefined,
+    label: undefined,
+    size: "sm",
+  },
+);
+
+const resolvedIdentity = computed(() => resolveIdentityGlyphInput(props.identity));
+const glyphSize = computed(() => (props.size === "md" ? 40 : 32));
+const displayLabel = computed(() => props.label ?? "Identity");
+const displayIdentity = computed(() => props.identityText ?? resolvedIdentity.value.shortIdentity);
+const labelClass = computed(() =>
+  props.size === "md"
+    ? "text-sm font-medium text-[var(--ui-fg)]"
+    : "text-sm font-medium text-[var(--ui-fg)]",
+);
+const metaClass = computed(() =>
+  props.size === "md" ? "text-xs text-[var(--ui-fg-muted)]" : "text-xs text-[var(--ui-fg-muted)]",
+);
+</script>
+
+<template>
+  <div class="flex min-w-0 items-center gap-2" data-test="identity-handle">
+    <IdentityGlyph
+      :identity="props.identity"
+      :algorithm="props.algorithm"
+      :size="glyphSize"
+      :title="`Identity glyph ${displayIdentity}`"
+      class="shrink-0"
+    />
+    <div class="min-w-0">
+      <p class="m-0 truncate" :class="labelClass">
+        {{ displayLabel }}
+      </p>
+      <div class="mt-0.5 flex min-w-0 items-center gap-2">
+        <p class="m-0 truncate font-mono" :class="metaClass">
+          {{ displayIdentity }}
+        </p>
+        <slot name="status" />
+      </div>
+    </div>
+  </div>
+</template>

package/packages/ui/src/patterns/IdentityGlyph/identityGlyph.types.ts

@@ -0,0 +1,36 @@
+import type { SerializedIdentity } from "@ternent/identity";
+
+export type IdentityGlyphAlgorithm = "glyph:v1";
+
+export type IdentityGlyphInput =
+  | string
+  | SerializedIdentity
+  | { publicKey: string }
+  | { identityKey: string }
+  | {
+      identity: SerializedIdentity | { publicKey: string } | { identityKey: string };
+    };
+
+export type IdentityGlyphSize = "xs" | "sm" | "md" | "lg";
+
+export type IdentityGlyphPalette = {
+  background: string;
+  primary: string;
+  secondary: string;
+  accent: string;
+};
+
+export type IdentityGlyphModel = {
+  algorithm: IdentityGlyphAlgorithm;
+  canonicalIdentity: string;
+  shortIdentity: string;
+  fallback: boolean;
+  grid: number[][];
+  palette: IdentityGlyphPalette;
+};
+
+export type ResolvedIdentityGlyphInput = {
+  canonicalIdentity: string;
+  shortIdentity: string;
+  fallback: boolean;
+};