@ternent/core 0.0.1

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

@@ -0,0 +1,22 @@
+# Logo
+
+## Purpose
+
+Shared Ternent brand mark for product chrome, headers, and navigation.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `decorative`
+- `title`
+
+Behavior:
+
+- merges consumer classes so callers control rendered size
+- uses per-instance SVG ids to avoid collisions when multiple logos render on one page
+- uses `--ui-logo-start`, `--ui-logo-end`, and `--ui-logo-cutout` so the mark follows the active theme without overloading generic component colors

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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs, useId } from "vue";
+import { twMerge } from "tailwind-merge";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    decorative?: boolean;
+    title?: string;
+  }>(),
+  {
+    decorative: true,
+    title: "Ternent logo",
+  },
+);
+
+const attrs = useAttrs();
+const instanceId = useId().replace(/:/g, "");
+
+const classes = computed(() => twMerge("block h-auto w-12 shrink-0", normalizeClass(attrs.class)));
+
+const forwardedAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const ids = {
+  title: `ternent-logo-title-${instanceId}`,
+  topClip: `ternent-logo-top-clip-${instanceId}`,
+  topGradient: `ternent-logo-top-gradient-${instanceId}`,
+  rightClip: `ternent-logo-right-clip-${instanceId}`,
+  rightGradient: `ternent-logo-right-gradient-${instanceId}`,
+  frameClip: `ternent-logo-frame-clip-${instanceId}`,
+  innerFrameClip: `ternent-logo-inner-frame-clip-${instanceId}`,
+  frameGradient: `ternent-logo-frame-gradient-${instanceId}`,
+  bodyClip: `ternent-logo-body-clip-${instanceId}`,
+} as const;
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 375 374.999991"
+    preserveAspectRatio="xMidYMid meet"
+    version="1.0"
+    :class="classes"
+    :role="props.decorative ? undefined : 'img'"
+    :aria-hidden="props.decorative ? 'true' : undefined"
+    :aria-labelledby="props.decorative ? undefined : ids.title"
+    focusable="false"
+    v-bind="forwardedAttrs"
+  >
+    <title v-if="!props.decorative" :id="ids.title">{{ props.title }}</title>
+    <defs>
+      <clipPath :id="ids.topClip">
+        <path
+          d="M 88.570312 12.242188 L 360.371094 12.242188 L 360.371094 281.835938 L 88.570312 281.835938 Z M 88.570312 12.242188 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+      <linearGradient
+        :id="ids.topGradient"
+        x1="-0.0000042293"
+        y1="0"
+        x2="255.999987"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(1.061725, 0, 0, 1.05311, 88.568506, 12.24124)"
+      >
+        <stop stop-opacity="1" stop-color="var(--ui-logo-start)" offset="0" />
+        <stop stop-opacity="1" stop-color="var(--ui-logo-end)" offset="1" />
+      </linearGradient>
+
+      <clipPath :id="ids.rightClip">
+        <path
+          d="M 12.242188 90.773438 L 284.042969 90.773438 L 284.042969 360.371094 L 12.242188 360.371094 Z M 12.242188 90.773438 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+      <linearGradient
+        :id="ids.rightGradient"
+        x1="-0.000000461562"
+        y1="0"
+        x2="255.999991"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(1.061725, 0, 0, 1.05311, 12.241246, 90.774018)"
+      >
+        <stop stop-opacity="1" stop-color="var(--ui-logo-start)" offset="0" />
+        <stop stop-opacity="1" stop-color="var(--ui-logo-end)" offset="1" />
+      </linearGradient>
+
+      <clipPath :id="ids.frameClip">
+        <path
+          d="M 12.242188 12.242188 L 360.371094 12.242188 L 360.371094 360.371094 L 12.242188 360.371094 Z M 12.242188 12.242188 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+      <clipPath :id="ids.innerFrameClip">
+        <path
+          d="M 66.636719 12.242188 L 305.976562 12.242188 C 336.015625 12.242188 360.371094 36.59375 360.371094 66.636719 L 360.371094 305.976562 C 360.371094 336.015625 336.015625 360.371094 305.976562 360.371094 L 66.636719 360.371094 C 36.59375 360.371094 12.242188 336.015625 12.242188 305.976562 L 12.242188 66.636719 C 12.242188 36.59375 36.59375 12.242188 66.636719 12.242188 Z M 66.636719 12.242188 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+      <linearGradient
+        :id="ids.frameGradient"
+        x1="-0.000000360364"
+        y1="0"
+        x2="255.999979"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(1.359879, 0, 0, 1.359879, 12.241246, 12.24124)"
+      >
+        <stop stop-opacity="1" stop-color="var(--ui-logo-start)" offset="0" />
+        <stop stop-opacity="1" stop-color="var(--ui-logo-end)" offset="1" />
+      </linearGradient>
+
+      <clipPath :id="ids.bodyClip">
+        <path
+          d="M 44.277344 44.277344 L 325 44.277344 L 325 325 L 44.277344 325 Z M 44.277344 44.277344 "
+          clip-rule="nonzero"
+        />
+      </clipPath>
+    </defs>
+
+    <g :clip-path="`url(#${ids.topClip})`">
+      <path
+        :fill="`url(#${ids.topGradient})`"
+        d="M 88.570312 12.242188 L 88.570312 281.835938 L 360.371094 281.835938 L 360.371094 12.242188 Z M 88.570312 12.242188 "
+        fill-rule="nonzero"
+      />
+    </g>
+    <g :clip-path="`url(#${ids.rightClip})`">
+      <path
+        :fill="`url(#${ids.rightGradient})`"
+        d="M 12.242188 90.773438 L 12.242188 360.371094 L 284.042969 360.371094 L 284.042969 90.773438 Z M 12.242188 90.773438 "
+        fill-rule="nonzero"
+      />
+    </g>
+    <g :clip-path="`url(#${ids.frameClip})`">
+      <g :clip-path="`url(#${ids.innerFrameClip})`">
+        <path
+          :fill="`url(#${ids.frameGradient})`"
+          d="M 12.242188 12.242188 L 12.242188 360.371094 L 360.371094 360.371094 L 360.371094 12.242188 Z M 12.242188 12.242188 "
+          fill-rule="nonzero"
+        />
+      </g>
+    </g>
+    <g :clip-path="`url(#${ids.bodyClip})`">
+      <path
+        fill="var(--ui-logo-cutout)"
+        d="M 81.441406 44.277344 C 46.167969 44.277344 44.277344 77.660156 44.277344 79.550781 L 44.277344 324.582031 C 169.625 324.582031 266 324.582031 287.417969 324.582031 C 322.691406 324.582031 324.582031 291.195312 324.582031 289.308594 L 324.582031 44.277344 Z M 89 129.941406 C 89 129.941406 100.96875 143.171875 129.3125 143.171875 C 157.660156 143.171875 168.996094 129.941406 168.996094 129.941406 C 168.996094 147.582031 151.359375 162.066406 129.3125 162.066406 C 107.265625 162.066406 89 147.582031 89 129.941406 Z M 248.992188 237.027344 C 239.546875 242.695312 228.835938 246.472656 216.867188 249.625 C 206.789062 252.144531 196.710938 253.402344 186.003906 253.402344 C 173.40625 253.402344 161.4375 251.511719 149.46875 248.363281 C 138.761719 245.214844 128.683594 240.804688 119.863281 235.765625 C 114.195312 231.988281 112.9375 225.058594 116.085938 219.386719 C 119.863281 213.71875 126.792969 212.460938 132.460938 215.609375 C 139.390625 220.019531 146.949219 223.167969 155.769531 225.6875 C 173.40625 230.726562 193.5625 230.726562 211.828125 226.945312 C 221.277344 224.425781 230.097656 221.277344 237.027344 216.867188 C 242.695312 213.71875 249.625 215.609375 253.402344 220.648438 C 256.550781 226.316406 254.664062 233.875 248.992188 237.027344 Z M 245.214844 162.066406 C 223.167969 162.066406 205.53125 147.582031 205.53125 129.941406 C 205.53125 129.941406 217.5 143.171875 245.84375 143.171875 C 274.1875 143.171875 285.527344 129.941406 285.527344 129.941406 C 284.898438 147.582031 266.628906 162.066406 245.214844 162.066406 Z M 245.214844 162.066406 "
+        fill-opacity="1"
+        fill-rule="nonzero"
+      />
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,15 @@
+# PageSurface
+
+## Purpose
+
+Token-driven full-page canvas for marketing and product landing layouts.
+
+## Category
+
+Pattern
+
+## Behavior
+
+- provides a quiet atmospheric background
+- keeps all decoration inside the pattern rather than route-local styling
+- preserves app content structure through the default slot

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="ui-page-surface">
+    <div class="ui-page-surface__mesh" aria-hidden="true"></div>
+    <div class="ui-page-surface__glow ui-page-surface__glow--primary" aria-hidden="true"></div>
+    <div class="ui-page-surface__glow ui-page-surface__glow--accent" aria-hidden="true"></div>
+    <div class="ui-page-surface__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-page-surface {
+  position: relative;
+  min-height: 100vh;
+  overflow-x: clip;
+  overflow-y: visible;
+  background:
+    radial-gradient(
+      circle at top center,
+      color-mix(in srgb, var(--ui-primary-muted) 70%, transparent),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-tonal-tertiary) 72%, transparent),
+      transparent 34%
+    ),
+    var(--ui-bg);
+  color: var(--ui-fg);
+  isolation: isolate;
+}
+
+.ui-page-surface__content {
+  position: relative;
+  z-index: 1;
+  background: color-mix(in srgb, var(--ui-bg) 35%, transparent);
+  box-shadow:
+    0 20px 50px rgba(8, 10, 24, 0.14),
+    inset 0 24px 48px color-mix(in srgb, var(--ui-bg) 26%, transparent),
+    inset 0 -24px 48px color-mix(in srgb, var(--ui-bg) 22%, transparent);
+  backdrop-filter: blur(16px) saturate(120%);
+}
+
+.ui-page-surface__mesh,
+.ui-page-surface__glow {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.ui-page-surface__mesh {
+  opacity: 0.3;
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--ui-border) 72%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--ui-border) 72%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 2rem 2rem;
+  mask-image: radial-gradient(circle at center, black, transparent 72%);
+}
+
+.ui-page-surface__glow {
+  filter: blur(64px);
+  opacity: 0.5;
+}
+
+.ui-page-surface__glow--primary {
+  top: 12%;
+  left: 58%;
+  width: 22rem;
+  height: 22rem;
+  background: color-mix(in srgb, var(--ui-primary) 22%, transparent);
+}
+
+.ui-page-surface__glow--accent {
+  top: 48%;
+  left: 8%;
+  width: 18rem;
+  height: 18rem;
+  background: color-mix(in srgb, var(--ui-info) 16%, transparent);
+}
+</style>

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

@@ -0,0 +1,39 @@
+# PanelChrome
+
+## Purpose
+
+Reusable bottom/side panel shell with collapsible chrome and token-driven resize behavior.
+
+## Category
+
+Pattern
+
+## Public API
+
+Models:
+
+- `v-model:open` (`boolean`)
+- `v-model:height` (`number`)
+- `v-model:dragging` (`boolean`)
+
+Props:
+
+- `container`: optional resize bounds container
+- `minHeight`: minimum expanded panel height
+- `maxHeight`: optional maximum expanded panel height
+- `collapsedHeight`: panel height when closed
+- `resizable`: enables drag handle
+- `title`: fallback header text
+
+Slots:
+
+- `header`
+- `actions`
+- default body slot
+
+## Behavior
+
+- composes primitive `Button` and `Separator`
+- uses pointer drag on a dedicated resize handle
+- clamps height to min/max bounds
+- keeps collapse toggle behavior consistent across panel consumers

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

@@ -0,0 +1 @@
+export type PanelChromeContainer = HTMLElement | null;

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

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import Button from "../../primitives/Button/Button.vue";
+import Separator from "../../primitives/Separator/Separator.vue";
+import type { PanelChromeContainer } from "./PanelChrome.types";
+
+const props = withDefaults(
+  defineProps<{
+    collapsedHeight?: number;
+    container?: PanelChromeContainer;
+    maxHeight?: number;
+    minHeight?: number;
+    resizable?: boolean;
+    title?: string;
+  }>(),
+  {
+    collapsedHeight: 32,
+    container: null,
+    maxHeight: undefined,
+    minHeight: 200,
+    resizable: true,
+    title: undefined,
+  },
+);
+
+const open = defineModel<boolean>("open", { default: false });
+const height = defineModel<number>("height", { default: 320 });
+const dragging = defineModel<boolean>("dragging", { default: false });
+
+const draggingPointerId = ref<number | null>(null);
+
+const clampedHeight = computed(() => clamp(height.value, props.minHeight, resolveMaxHeight()));
+
+watch(clampedHeight, (nextHeight) => {
+  if (nextHeight !== height.value) {
+    height.value = nextHeight;
+  }
+});
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function resolveContainerBottom(): number {
+  if (props.container) {
+    return props.container.getBoundingClientRect().bottom;
+  }
+
+  if (typeof window !== "undefined") {
+    return window.innerHeight;
+  }
+
+  return clampedHeight.value;
+}
+
+function resolveMaxHeight(): number {
+  if (typeof props.maxHeight === "number") {
+    return Math.max(props.maxHeight, props.minHeight);
+  }
+
+  const containerBottom = resolveContainerBottom();
+  return Math.max(props.minHeight, containerBottom - props.collapsedHeight);
+}
+
+function computeHeightFromPointer(clientY: number): number {
+  const nextHeight = resolveContainerBottom() - clientY;
+  return clamp(nextHeight, props.minHeight, resolveMaxHeight());
+}
+
+function stopDragging(): void {
+  if (!dragging.value) {
+    return;
+  }
+
+  dragging.value = false;
+  draggingPointerId.value = null;
+
+  if (typeof window !== "undefined") {
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+    window.removeEventListener("pointercancel", handlePointerUp);
+  }
+}
+
+function handlePointerMove(event: PointerEvent): void {
+  if (!dragging.value) {
+    return;
+  }
+
+  height.value = computeHeightFromPointer(event.clientY);
+}
+
+function handlePointerUp(): void {
+  stopDragging();
+}
+
+function startResize(event: PointerEvent): void {
+  if (!open.value || !props.resizable) {
+    return;
+  }
+
+  event.preventDefault();
+  dragging.value = true;
+  draggingPointerId.value = event.pointerId;
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
+  }
+}
+
+function toggleOpen(): void {
+  open.value = !open.value;
+}
+
+onBeforeUnmount(() => {
+  stopDragging();
+});
+</script>
+
+<template>
+  <section
+    class="relative z-40 flex min-h-0 flex-col"
+    :class="{
+      'h-9': !open,
+      'transition-[height] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)]':
+        !dragging,
+    }"
+    :style="open ? { height: `${clampedHeight}px` } : undefined"
+  >
+    <div
+      v-if="open && props.resizable"
+      role="separator"
+      aria-orientation="horizontal"
+      class="cursor-row-resize px-2 py-1"
+      @pointerdown="startResize"
+    >
+      <Separator orientation="horizontal" />
+    </div>
+
+    <div
+      class="relative z-10 flex items-center justify-between border-t border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 py-1"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <slot name="header">
+          <p v-if="props.title" class="m-0 text-xs text-[var(--ui-fg-muted)]">
+            {{ props.title }}
+          </p>
+        </slot>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+        <Button
+          aria-label="Toggle panel"
+          :aria-pressed="open"
+          variant="plain-secondary"
+          size="xs"
+          class="ml-1 h-7 w-7 !px-0"
+          @click="toggleOpen"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 transition-transform duration-[var(--ui-duration-normal)]"
+            :class="open ? 'rotate-0' : 'rotate-180'"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </Button>
+      </div>
+    </div>
+
+    <div v-show="open" class="flex min-h-0 flex-1 overflow-auto bg-[var(--ui-surface)]">
+      <slot />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,31 @@
+# PreviewPanel
+
+## Purpose
+
+Reusable technical preview surface for code, structured rows, and status-heavy callouts.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `title`
+- `meta`
+- `tabs`
+- `activeTab`
+- `rows`
+- `code`
+- `statusLabel`
+- `statusTone`
+- `emphasis`: `subtle | default | strong`
+- `badgeMode`: `default | quiet`
+- `footerLabel`
+- `footerTone`
+- `footerText`
+
+Slots:
+
+- default: custom panel body when `rows` and `code` are not enough

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

@@ -0,0 +1,23 @@
+export const previewPanelToneValues = [
+  "neutral",
+  "primary",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "critical",
+  "info",
+] as const;
+
+export const previewPanelEmphasisValues = ["subtle", "default", "strong"] as const;
+export const previewPanelBadgeModeValues = ["default", "quiet"] as const;
+
+export type PreviewPanelTone = (typeof previewPanelToneValues)[number];
+export type PreviewPanelEmphasis = (typeof previewPanelEmphasisValues)[number];
+export type PreviewPanelBadgeMode = (typeof previewPanelBadgeModeValues)[number];
+
+export type PreviewPanelRow = {
+  label: string;
+  value: string;
+  valueTone?: PreviewPanelTone;
+};