@mkbabb/glass-ui 0.2.0

package/src/composables/virtual/virtualSectionLayout.ts

@@ -0,0 +1,212 @@
+/**
+ * Pure layout computation functions for virtual section scrolling.
+ *
+ * These are stateless — they take data in, return layout info out.
+ * No Vue reactivity, no DOM access.
+ */
+
+/** A flattened section item with hierarchy metadata for virtual scrolling. */
+export interface FlatSection {
+    id: string;
+    index: number;
+    depth: number;
+    parentId: string | null;
+    rootId: string;
+    rootIndex: number;
+    estimatedHeight: number;
+}
+
+/** A single entry in a computed section layout with resolved position. */
+export interface SectionLayoutEntry<T extends FlatSection = FlatSection> {
+    item: T;
+    height: number;
+    top: number;
+    bottom: number;
+}
+
+/** Complete layout for a list of sections — entries plus total height. */
+export interface SectionLayout<T extends FlatSection = FlatSection> {
+    entries: SectionLayoutEntry<T>[];
+    totalHeight: number;
+}
+
+/** The visible window range with spacer sizes for virtual scrolling. */
+export interface SectionWindowRange {
+    startIndex: number;
+    endIndex: number;
+    topSpacerPx: number;
+    bottomSpacerPx: number;
+}
+
+/** A forced index range that must be included in the visible window. */
+export interface ForcedSectionWindowRange {
+    startIndex: number;
+    endIndex: number;
+}
+
+/**
+ * Build a layout from a flat list of sections using a height resolver.
+ *
+ * Each entry gets an absolute `top` and `bottom` offset in pixels,
+ * computed sequentially from index 0. Heights are rounded and clamped >= 1.
+ */
+export function buildSectionLayout<T extends FlatSection>(
+    items: readonly T[],
+    getHeight: (item: T) => number,
+): SectionLayout<T> {
+    let offset = 0;
+    const entries = items.map((item) => {
+        const height = Math.max(1, Math.round(getHeight(item)));
+        const top = offset;
+        offset += height;
+        return {
+            item,
+            height,
+            top,
+            bottom: offset,
+        };
+    });
+
+    return {
+        entries,
+        totalHeight: offset,
+    };
+}
+
+/**
+ * Binary search for the first entry whose bottom edge is past `startOffset`.
+ * Returns the index of the first visible item.
+ */
+function findStartIndex<T extends FlatSection>(
+    entries: readonly SectionLayoutEntry<T>[],
+    startOffset: number,
+): number {
+    if (entries.length === 0) return 0;
+    let low = 0;
+    let high = entries.length - 1;
+    while (low < high) {
+        const mid = Math.floor((low + high) / 2);
+        if (entries[mid].bottom <= startOffset) {
+            low = mid + 1;
+        } else {
+            high = mid;
+        }
+    }
+    return low;
+}
+
+/**
+ * Binary search for the last entry whose top edge is before `endOffset`.
+ * Returns the index of the last visible item.
+ */
+function findEndIndex<T extends FlatSection>(
+    entries: readonly SectionLayoutEntry<T>[],
+    endOffset: number,
+): number {
+    if (entries.length === 0) return 0;
+    let low = 0;
+    let high = entries.length - 1;
+    while (low < high) {
+        const mid = Math.ceil((low + high) / 2);
+        if (entries[mid].top < endOffset) {
+            low = mid;
+        } else {
+            high = mid - 1;
+        }
+    }
+    return low;
+}
+
+/**
+ * Resolve which section indices are visible given scroll state.
+ *
+ * Uses binary search for O(log n) lookup. Overscan extends the window
+ * before and after the viewport. An optional `forcedRange` guarantees
+ * certain indices are always included (used for warm-up targeting).
+ */
+export function resolveSectionWindow<T extends FlatSection>(
+    layout: SectionLayout<T>,
+    scrollTopPx: number,
+    viewportHeightPx: number,
+    overscanBeforePx: number,
+    overscanAfterPx: number,
+    forcedRange?: ForcedSectionWindowRange | null,
+): SectionWindowRange {
+    if (layout.entries.length === 0) {
+        return {
+            startIndex: 0,
+            endIndex: -1,
+            topSpacerPx: 0,
+            bottomSpacerPx: 0,
+        };
+    }
+
+    const startOffset = Math.max(0, scrollTopPx - overscanBeforePx);
+    const endOffset = Math.max(
+        0,
+        scrollTopPx + viewportHeightPx + overscanAfterPx,
+    );
+
+    let startIndex = findStartIndex(layout.entries, startOffset);
+    let endIndex = findEndIndex(layout.entries, endOffset);
+
+    if (forcedRange) {
+        startIndex = Math.min(startIndex, forcedRange.startIndex);
+        endIndex = Math.max(endIndex, forcedRange.endIndex);
+    }
+
+    startIndex = Math.max(0, Math.min(startIndex, layout.entries.length - 1));
+    endIndex = Math.max(startIndex, Math.min(endIndex, layout.entries.length - 1));
+
+    return {
+        startIndex,
+        endIndex,
+        topSpacerPx: layout.entries[startIndex]?.top ?? 0,
+        bottomSpacerPx: Math.max(
+            0,
+            layout.totalHeight - (layout.entries[endIndex]?.bottom ?? 0),
+        ),
+    };
+}
+
+/**
+ * Find the section that is "active" at a given scroll offset.
+ *
+ * Returns the last section whose top edge is at or before `activeOffsetPx`.
+ * Useful for highlighting the current section in a navigation sidebar.
+ */
+export function resolveActiveSection<T extends FlatSection>(
+    layout: SectionLayout<T>,
+    activeOffsetPx: number,
+): T | null {
+    if (layout.entries.length === 0) return null;
+
+    let low = 0;
+    let high = layout.entries.length - 1;
+    while (low < high) {
+        const mid = Math.ceil((low + high) / 2);
+        if (layout.entries[mid].top <= activeOffsetPx) {
+            low = mid;
+        } else {
+            high = mid - 1;
+        }
+    }
+
+    return layout.entries[low]?.item ?? null;
+}
+
+/**
+ * Find the pixel offset of a section by its `id`.
+ * Returns `null` if the section is not in the layout.
+ */
+export function findSectionOffset<T extends FlatSection>(
+    layout: SectionLayout<T>,
+    id: string,
+): number | null {
+    for (const entry of layout.entries) {
+        if (entry.item.id === id) {
+            return entry.top;
+        }
+    }
+    return null;
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+// @mkbabb/glass-ui — Unified design system
+// Components (shadcn-vue base + custom)
+export * from "./components";
+
+// Composables
+export * from "./composables";
+
+// Utilities
+export * from "./utils";

package/src/styles/animations.css

@@ -0,0 +1,233 @@
+/* Shared @keyframes — global animations used across projects */
+
+/* ── Floating panel entrance ── */
+@keyframes floating-panel-in {
+    from {
+        opacity: 0;
+        filter: blur(4px);
+        scale: 0.96;
+    }
+    to {
+        opacity: 1;
+        filter: blur(0);
+        scale: 1;
+    }
+}
+
+/* ── Dialog open / close ── */
+@keyframes dialog-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes dialog-out {
+    from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.95) translateY(8px);
+    }
+}
+
+/* ── Dialog ↔ drawer transitions ── */
+@keyframes dialog-out-to-drawer {
+    from {
+        opacity: 1;
+        transform: scale(1) translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.35) translateX(-120%);
+    }
+}
+
+@keyframes dialog-in-from-drawer {
+    from {
+        opacity: 0;
+        transform: scale(0.35) translateX(-120%);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateX(0);
+    }
+}
+
+@media (width < 640px) {
+    @keyframes dialog-out-to-drawer {
+        from {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+        to {
+            opacity: 0;
+            transform: scale(0.5) translateY(60%);
+        }
+    }
+    @keyframes dialog-in-from-drawer {
+        from {
+            opacity: 0;
+            transform: scale(0.5) translateY(60%);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+}
+
+/* ── Card menu entrance ── */
+@keyframes card-menu-in {
+    from {
+        opacity: 0;
+        filter: blur(4px);
+        transform: translateX(-100%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        filter: blur(0);
+        transform: translateX(-100%) scale(1);
+    }
+}
+
+/* ── Golden shimmer ── */
+@keyframes golden-shimmer {
+    0%,
+    100% {
+        background-position: 100% 100%;
+    }
+    50% {
+        background-position: 0% 0%;
+    }
+}
+
+/* ── Collapsible (reka-ui) ── */
+@keyframes collapsible-open {
+    from {
+        height: 0;
+        opacity: 0;
+    }
+    to {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+}
+
+@keyframes collapsible-close {
+    from {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+    to {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+/* ── Tooltip entrance ── */
+@keyframes tooltip-in {
+    from {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ── Generic fade-in ── */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ── Scale-in ── */
+@keyframes scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ── Slide-up ── */
+@keyframes slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ── Rainbow hue rotate ── */
+@keyframes rainbow-hue {
+    from {
+        filter: hue-rotate(0deg);
+    }
+    to {
+        filter: hue-rotate(360deg);
+    }
+}
+
+/* ── Shimmer sweep (background-position for .shimmer-text) ── */
+@keyframes shimmer-sweep {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+/* ── Shake (horizontal ±4px for .shake-error) ── */
+@keyframes shake {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-4px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(4px);
+    }
+}
+
+/* ── Kinetic typography: weight breathing ── */
+@keyframes weight-breathe {
+    0%, 100% { font-variation-settings: "wght" 300; }
+    50%      { font-variation-settings: "wght" 500; }
+}
+
+/* ── Kinetic typography: scroll-driven weight reveal ── */
+@keyframes weight-reveal {
+    from { font-variation-settings: "wght" 100; opacity: 0.3; }
+    to   { font-variation-settings: "wght" 400; opacity: 1; }
+}

package/src/styles/cards.css

@@ -0,0 +1,66 @@
+/* Card utilities — cartoon, elevated, paper texture */
+
+@layer components {
+    /* Shared card base */
+    .cartoon-card,
+    .elevated-card {
+        border-radius: var(--radius-xl);
+        border: 2px solid color-mix(in srgb, var(--foreground) calc(var(--border-opacity-light) * 100%), transparent);
+        background: var(--card);
+        color: var(--card-foreground);
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Cartoon card — thick border + offset hard shadow */
+    .cartoon-card {
+        box-shadow: var(--shadow-cartoon-md);
+    }
+
+    .cartoon-card:hover {
+        border-color: color-mix(in srgb, var(--foreground) calc(var(--border-opacity-medium) * 100%), transparent);
+        box-shadow: var(--shadow-cartoon-lg);
+    }
+
+    :where(.dark) .cartoon-card {
+        border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
+    }
+
+    :where(.dark) .cartoon-card:hover {
+        border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+    }
+
+    /* Elevated card — soft shadow */
+    .elevated-card {
+        box-shadow: var(--shadow-md);
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            transform var(--duration-normal) var(--ease-standard);
+    }
+
+    .elevated-card:hover {
+        box-shadow: var(--shadow-lg);
+    }
+
+    /* Paper texture overlay */
+    .paper-texture {
+        background-image: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    .paper-texture-aged {
+        background-image: var(--paper-aged-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    :where(.dark) .paper-texture,
+    :where(.dark) .paper-texture-aged {
+        background-blend-mode: screen;
+    }
+}