@mkbabb/glass-ui 0.2.0

package/src/components/custom/typewriter/utils/keyboard.ts

@@ -0,0 +1,213 @@
+// --- Key position types and QWERTY map ---
+
+export interface KeyPosition {
+    row: number;
+    col: number;
+    finger: "pinky" | "ring" | "middle" | "index" | "thumb";
+    hand: "left" | "right";
+}
+
+export const QWERTY_MAP: Record<string, KeyPosition> = {
+    // Row 0 - Numbers row
+    "1": { row: 0, col: 1, finger: "pinky", hand: "left" },
+    "2": { row: 0, col: 2, finger: "ring", hand: "left" },
+    "3": { row: 0, col: 3, finger: "middle", hand: "left" },
+    "4": { row: 0, col: 4, finger: "index", hand: "left" },
+    "5": { row: 0, col: 5, finger: "index", hand: "left" },
+    "6": { row: 0, col: 6, finger: "index", hand: "right" },
+    "7": { row: 0, col: 7, finger: "index", hand: "right" },
+    "8": { row: 0, col: 8, finger: "middle", hand: "right" },
+    "9": { row: 0, col: 9, finger: "ring", hand: "right" },
+    "0": { row: 0, col: 10, finger: "pinky", hand: "right" },
+
+    // Row 1 - QWERTY row
+    q: { row: 1, col: 1, finger: "pinky", hand: "left" },
+    w: { row: 1, col: 2, finger: "ring", hand: "left" },
+    e: { row: 1, col: 3, finger: "middle", hand: "left" },
+    r: { row: 1, col: 4, finger: "index", hand: "left" },
+    t: { row: 1, col: 5, finger: "index", hand: "left" },
+    y: { row: 1, col: 6, finger: "index", hand: "right" },
+    u: { row: 1, col: 7, finger: "index", hand: "right" },
+    i: { row: 1, col: 8, finger: "middle", hand: "right" },
+    o: { row: 1, col: 9, finger: "ring", hand: "right" },
+    p: { row: 1, col: 10, finger: "pinky", hand: "right" },
+
+    // Row 2 - ASDF row (home row)
+    a: { row: 2, col: 1, finger: "pinky", hand: "left" },
+    s: { row: 2, col: 2, finger: "ring", hand: "left" },
+    d: { row: 2, col: 3, finger: "middle", hand: "left" },
+    f: { row: 2, col: 4, finger: "index", hand: "left" },
+    g: { row: 2, col: 5, finger: "index", hand: "left" },
+    h: { row: 2, col: 6, finger: "index", hand: "right" },
+    j: { row: 2, col: 7, finger: "index", hand: "right" },
+    k: { row: 2, col: 8, finger: "middle", hand: "right" },
+    l: { row: 2, col: 9, finger: "ring", hand: "right" },
+    ";": { row: 2, col: 10, finger: "pinky", hand: "right" },
+
+    // Row 3 - ZXCV row
+    z: { row: 3, col: 1, finger: "pinky", hand: "left" },
+    x: { row: 3, col: 2, finger: "ring", hand: "left" },
+    c: { row: 3, col: 3, finger: "middle", hand: "left" },
+    v: { row: 3, col: 4, finger: "index", hand: "left" },
+    b: { row: 3, col: 5, finger: "index", hand: "left" },
+    n: { row: 3, col: 6, finger: "index", hand: "right" },
+    m: { row: 3, col: 7, finger: "index", hand: "right" },
+    ",": { row: 3, col: 8, finger: "middle", hand: "right" },
+    ".": { row: 3, col: 9, finger: "ring", hand: "right" },
+    "/": { row: 3, col: 10, finger: "pinky", hand: "right" },
+
+    // Space bar
+    " ": { row: 4, col: 5, finger: "thumb", hand: "right" },
+
+    // Common punctuation
+    "'": { row: 2, col: 11, finger: "pinky", hand: "right" },
+    '"': { row: 2, col: 11, finger: "pinky", hand: "right" },
+    "?": { row: 3, col: 10, finger: "pinky", hand: "right" },
+    "!": { row: 0, col: 1, finger: "pinky", hand: "left" },
+    "-": { row: 0, col: 11, finger: "pinky", hand: "right" },
+    "=": { row: 0, col: 12, finger: "pinky", hand: "right" },
+};
+
+// --- Key delay calculation ---
+
+export const calculateKeyDelay = (prevChar: string, nextChar: string): number => {
+    const prev = QWERTY_MAP[prevChar.toLowerCase()];
+    const next = QWERTY_MAP[nextChar.toLowerCase()];
+
+    if (!prev || !next) return 250;
+
+    // Fastest: alternating hands
+    if (prev.hand !== next.hand) {
+        return 150 + Math.random() * 50;
+    }
+
+    // Same key pressed twice
+    if (prev.row === next.row && prev.col === next.col) {
+        return 350 + Math.random() * 100;
+    }
+
+    // Adjacent fingers, same hand
+    const colDiff = Math.abs(prev.col - next.col);
+    if (colDiff === 1 && prev.row === next.row) {
+        return 180 + Math.random() * 40;
+    }
+
+    // Home row combinations
+    if (prev.row === 2 && next.row === 2) {
+        return 200 + Math.random() * 50;
+    }
+
+    // Reaching from home row
+    if ((prev.row === 2 && next.row !== 2) || (prev.row !== 2 && next.row === 2)) {
+        return 280 + Math.random() * 70;
+    }
+
+    // Bottom row with pinky/ring fingers
+    if (
+        (prev.row === 3 || next.row === 3) &&
+        (["pinky", "ring"].includes(prev.finger) || ["pinky", "ring"].includes(next.finger))
+    ) {
+        return 320 + Math.random() * 80;
+    }
+
+    // Large movements
+    const rowDiff = Math.abs(prev.row - next.row);
+    if (rowDiff > 1 || colDiff > 2) {
+        return 300 + Math.random() * 100;
+    }
+
+    // Default
+    return 250 + Math.random() * 50;
+};
+
+// --- Adjacency map for typo generation ---
+
+/** Physical row stagger offsets (in key-width units) */
+const ROW_STAGGER: Record<number, number> = {
+    0: 0,
+    1: 0.25,
+    2: 0.5,
+    3: 0.75,
+    4: 0, // space bar row
+};
+
+/** Maximum distance for keys to be considered adjacent */
+const MAX_DISTANCE = 1.2;
+const MAX_ROW_DIFF = 1;
+
+function physicalDistance(a: KeyPosition, b: KeyPosition): number {
+    const staggerA = ROW_STAGGER[a.row] ?? 0;
+    const staggerB = ROW_STAGGER[b.row] ?? 0;
+    const dx = a.col + staggerA - (b.col + staggerB);
+    const dy = a.row - b.row;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+/** Precomputed adjacency: for each key char, the list of adjacent key chars */
+const ADJACENCY_MAP: Record<string, string[]> = {};
+
+// Build adjacency map at module load
+const alphaKeys = Object.entries(QWERTY_MAP).filter(([ch]) => /^[a-z]$/.test(ch));
+for (const [charA, posA] of alphaKeys) {
+    const neighbors: string[] = [];
+    for (const [charB, posB] of alphaKeys) {
+        if (charA === charB) continue;
+        if (Math.abs(posA.row - posB.row) > MAX_ROW_DIFF) continue;
+        if (physicalDistance(posA, posB) <= MAX_DISTANCE) {
+            neighbors.push(charB);
+        }
+    }
+    ADJACENCY_MAP[charA] = neighbors;
+}
+
+export function getAdjacentKeys(char: string): string[] {
+    return ADJACENCY_MAP[char.toLowerCase()] ?? [];
+}
+
+/**
+ * Pick a plausible typo character for the intended character.
+ * Weighted: same-finger 2x, same-hand 1.5x, other 1x.
+ * Preserves case. Falls back to home row for unmapped chars.
+ */
+export function pickTypoChar(intendedChar: string): string {
+    const lower = intendedChar.toLowerCase();
+    const isUpper = intendedChar !== lower;
+    const intended = QWERTY_MAP[lower];
+    const adjacent = ADJACENCY_MAP[lower];
+
+    // Fallback: random home row key
+    if (!intended || !adjacent || adjacent.length === 0) {
+        const homeRow = "asdfghjkl";
+        const fallback = homeRow[Math.floor(Math.random() * homeRow.length)];
+        return isUpper ? fallback.toUpperCase() : fallback;
+    }
+
+    // Build weighted pool
+    const pool: { char: string; weight: number }[] = [];
+    for (const adj of adjacent) {
+        const pos = QWERTY_MAP[adj];
+        if (!pos) continue;
+
+        let weight = 1;
+        if (pos.finger === intended.finger) {
+            weight = 2;
+        } else if (pos.hand === intended.hand) {
+            weight = 1.5;
+        }
+        pool.push({ char: adj, weight });
+    }
+
+    // Weighted random selection
+    const totalWeight = pool.reduce((sum, p) => sum + p.weight, 0);
+    let roll = Math.random() * totalWeight;
+    for (const entry of pool) {
+        roll -= entry.weight;
+        if (roll <= 0) {
+            return isUpper ? entry.char.toUpperCase() : entry.char;
+        }
+    }
+
+    // Should not reach here, but fallback
+    const last = pool[pool.length - 1].char;
+    return isUpper ? last.toUpperCase() : last;
+}

package/src/components/custom/typewriter/utils/pausePatterns.ts

@@ -0,0 +1,55 @@
+export interface PausePatterns {
+    sentenceEnd: { min: number; max: number };
+    commaBreak: { min: number; max: number };
+    wordBoundary: { min: number; max: number };
+    thinkingPause: { min: number; max: number };
+    colonPause: { min: number; max: number };
+    dashPause: { min: number; max: number };
+}
+
+export const PAUSE_PATTERNS: PausePatterns = {
+    sentenceEnd: { min: 400, max: 800 },
+    commaBreak: { min: 200, max: 400 },
+    wordBoundary: { min: 50, max: 150 },
+    thinkingPause: { min: 800, max: 2000 },
+    colonPause: { min: 300, max: 500 },
+    dashPause: { min: 250, max: 450 },
+};
+
+const random = (min: number, max: number): number => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export const getPauseDelay = (char: string, nextChar: string, patterns: PausePatterns): number => {
+    // Sentence endings
+    if ([".", "!", "?"].includes(char) && nextChar === " ") {
+        return random(patterns.sentenceEnd.min, patterns.sentenceEnd.max);
+    }
+
+    // Comma breaks
+    if (char === "," && nextChar === " ") {
+        return random(patterns.commaBreak.min, patterns.commaBreak.max);
+    }
+
+    // Colon or semicolon pause
+    if ([":", ";"].includes(char) && nextChar === " ") {
+        return random(patterns.colonPause.min, patterns.colonPause.max);
+    }
+
+    // Dash pause
+    if (char === "-" && nextChar === " ") {
+        return random(patterns.dashPause.min, patterns.dashPause.max);
+    }
+
+    // Word boundaries (occasional micro-pauses)
+    if (char === " " && Math.random() < 0.3) {
+        return random(patterns.wordBoundary.min, patterns.wordBoundary.max);
+    }
+
+    // Occasional thinking pauses (5% chance)
+    if (Math.random() < 0.05) {
+        return random(patterns.thinkingPause.min, patterns.thinkingPause.max);
+    }
+
+    return 0;
+};

package/src/components/custom/typewriter/utils/timing.ts

@@ -0,0 +1,104 @@
+import type { CancellationToken } from "../types";
+
+// --- Cancellation ---
+
+export function createCancellationToken(): CancellationToken {
+    const listeners = new Set<() => void>();
+    let _cancelled = false;
+
+    return {
+        get cancelled() {
+            return _cancelled;
+        },
+        cancel() {
+            if (_cancelled) return;
+            _cancelled = true;
+            for (const fn of listeners) fn();
+            listeners.clear();
+        },
+        onCancel(fn: () => void) {
+            if (_cancelled) {
+                fn();
+            } else {
+                listeners.add(fn);
+            }
+        },
+        offCancel(fn: () => void) {
+            listeners.delete(fn);
+        },
+    };
+}
+
+// --- Cancellable sleep ---
+
+/** Resolves `true` if elapsed normally, `false` if cancelled. */
+export function sleep(ms: number, token: CancellationToken): Promise<boolean> {
+    if (token.cancelled) return Promise.resolve(false);
+    if (ms <= 0) return Promise.resolve(true);
+
+    return new Promise<boolean>((resolve) => {
+        const timer = setTimeout(() => {
+            token.offCancel(onCancel);
+            resolve(true);
+        }, ms);
+
+        function onCancel() {
+            clearTimeout(timer);
+            resolve(false);
+        }
+
+        token.onCancel(onCancel);
+    });
+}
+
+// --- Stochastic delays ---
+
+/** Uniform noise around base: `base * (1 + uniform(-variance, +variance))`, clamped to [min, max]. */
+export function stochasticDelay(base: number, variance: number, min = 30, max = 600): number {
+    const noise = (Math.random() * 2 - 1) * variance;
+    return Math.max(min, Math.min(max, base * (1 + noise)));
+}
+
+/** Accelerating backspace delay: gets faster with each consecutive backspace. */
+export function backspaceDelay(
+    base: number,
+    variance: number,
+    index: number,
+    acceleration: number,
+): number {
+    const factor = Math.max(0.3, 1 - acceleration * index);
+    const raw = base * factor;
+    return stochasticDelay(raw, variance, 20, 200);
+}
+
+// --- N-gram sizing ---
+
+/** Pick n-gram size. Fixed number passthrough, or geometric distribution biased small. */
+export function pickNgramSize(config: number | { min: number; max: number }): number {
+    if (typeof config === "number") return config;
+    const { min, max } = config;
+    if (min === max) return min;
+
+    // Geometric-ish: smaller sizes are more likely
+    // P(k) ~ (1/2)^(k - min)
+    let roll = Math.random();
+    for (let k = min; k < max; k++) {
+        // Each size has 50% chance of being selected vs continuing
+        if (roll < 0.5) return k;
+        roll = (roll - 0.5) * 2; // renormalize
+    }
+    return max;
+}
+
+// --- Utilities ---
+
+/** Uniform random integer in [min, max] (inclusive). */
+export function randomInRange(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/** Check if user prefers reduced motion. SSR-safe. */
+export function prefersReducedMotion(): boolean {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}

package/src/components/custom/typewriter/utils/typoStateMachine.ts

@@ -0,0 +1,197 @@
+import type { TypoContext, TypoAction } from "../types";
+import { pickTypoChar } from "./keyboard";
+import { randomInRange } from "./timing";
+
+export interface TypoConfig {
+    maxCharsBeforeNotice: number;
+    continueAfterTypoProbability: number;
+    sequentialTypoDecay: number;
+    noticePauseMin: number;
+    noticePauseMax: number;
+    resumePauseMin: number;
+    resumePauseMax: number;
+}
+
+export const DEFAULT_TYPO_CONFIG: TypoConfig = {
+    maxCharsBeforeNotice: 4,
+    continueAfterTypoProbability: 0.6,
+    sequentialTypoDecay: 0.3,
+    noticePauseMin: 200,
+    noticePauseMax: 500,
+    resumePauseMin: 100,
+    resumePauseMax: 300,
+};
+
+export function createTypoContext(): TypoContext {
+    return {
+        state: "normal",
+        charsPastTypo: 0,
+        charsToDelete: 0,
+        sequentialTypoCount: 0,
+    };
+}
+
+/**
+ * Pure FSM transition.
+ *
+ * States: normal -> typo_injected -> typing_past -> noticed -> correcting -> resuming -> normal
+ *
+ * The caller provides the intended character(s) at the current position.
+ * Returns the action to perform and the new context.
+ */
+export function nextTypoAction(
+    ctx: TypoContext,
+    intendedChar: string,
+    config: TypoConfig,
+    errorRate: number,
+): { action: TypoAction; ctx: TypoContext } {
+    switch (ctx.state) {
+        case "normal":
+            return handleNormal(ctx, intendedChar, errorRate);
+
+        case "typo_injected":
+            return handleTypoInjected(ctx, intendedChar, config);
+
+        case "typing_past":
+            return handleTypingPast(ctx, intendedChar, config);
+
+        case "noticed":
+            return handleNoticed(ctx, config);
+
+        case "correcting":
+            return handleCorrecting(ctx);
+
+        case "resuming":
+            return handleResuming(ctx, config);
+    }
+}
+
+function handleNormal(
+    ctx: TypoContext,
+    intendedChar: string,
+    errorRate: number,
+): { action: TypoAction; ctx: TypoContext } {
+    // Sequential typos decay: each consecutive typo is less likely
+    const effectiveRate = errorRate * Math.pow(1 - 0.3, ctx.sequentialTypoCount);
+
+    if (Math.random() < effectiveRate && /[a-zA-Z]/.test(intendedChar)) {
+        const wrongChar = pickTypoChar(intendedChar);
+        return {
+            action: { type: "type_wrong", char: wrongChar, intended: intendedChar },
+            ctx: {
+                ...ctx,
+                state: "typo_injected",
+                charsPastTypo: 0,
+                charsToDelete: 1, // the wrong char itself
+                sequentialTypoCount: ctx.sequentialTypoCount + 1,
+            },
+        };
+    }
+
+    return {
+        action: { type: "type_correct", char: intendedChar },
+        ctx: { ...ctx, sequentialTypoCount: 0 },
+    };
+}
+
+function handleTypoInjected(
+    ctx: TypoContext,
+    intendedChar: string,
+    config: TypoConfig,
+): { action: TypoAction; ctx: TypoContext } {
+    // Decide: continue typing past, or notice immediately?
+    if (Math.random() < config.continueAfterTypoProbability) {
+        return {
+            action: { type: "type_past_correct", char: intendedChar },
+            ctx: {
+                ...ctx,
+                state: "typing_past",
+                charsPastTypo: 1,
+                charsToDelete: ctx.charsToDelete + 1,
+            },
+        };
+    }
+
+    // Notice immediately
+    return {
+        action: {
+            type: "notice",
+            pauseMs: randomInRange(config.noticePauseMin, config.noticePauseMax),
+        },
+        ctx: { ...ctx, state: "noticed" },
+    };
+}
+
+function handleTypingPast(
+    ctx: TypoContext,
+    intendedChar: string,
+    config: TypoConfig,
+): { action: TypoAction; ctx: TypoContext } {
+    // Hard cap
+    if (ctx.charsPastTypo >= config.maxCharsBeforeNotice) {
+        return {
+            action: {
+                type: "notice",
+                pauseMs: randomInRange(config.noticePauseMin, config.noticePauseMax),
+            },
+            ctx: { ...ctx, state: "noticed" },
+        };
+    }
+
+    // Roll to continue or notice
+    if (Math.random() < config.continueAfterTypoProbability) {
+        return {
+            action: { type: "type_past_correct", char: intendedChar },
+            ctx: {
+                ...ctx,
+                charsPastTypo: ctx.charsPastTypo + 1,
+                charsToDelete: ctx.charsToDelete + 1,
+            },
+        };
+    }
+
+    return {
+        action: {
+            type: "notice",
+            pauseMs: randomInRange(config.noticePauseMin, config.noticePauseMax),
+        },
+        ctx: { ...ctx, state: "noticed" },
+    };
+}
+
+function handleNoticed(
+    ctx: TypoContext,
+    _config: TypoConfig,
+): { action: TypoAction; ctx: TypoContext } {
+    return {
+        action: { type: "backspace", count: ctx.charsToDelete, frantic: true },
+        ctx: { ...ctx, state: "correcting" },
+    };
+}
+
+function handleCorrecting(ctx: TypoContext): { action: TypoAction; ctx: TypoContext } {
+    // After backspace completes, transition to resuming
+    return {
+        action: { type: "resume", pauseMs: randomInRange(100, 300) },
+        ctx: {
+            ...ctx,
+            state: "resuming",
+        },
+    };
+}
+
+function handleResuming(
+    ctx: TypoContext,
+    _config: TypoConfig,
+): { action: TypoAction; ctx: TypoContext } {
+    // Reset to normal
+    return {
+        action: { type: "type_correct", char: "" }, // caller will re-drive with actual char
+        ctx: {
+            ...ctx,
+            state: "normal",
+            charsPastTypo: 0,
+            charsToDelete: 0,
+        },
+    };
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./ui";
+export * from "./custom";

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'