@mkbabb/glass-ui 0.3.0 → 2.1.0

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

@@ -1,213 +0,0 @@
-// --- 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

@@ -1,55 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-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'