@moloodev/ui 0.0.0-stage → 0.1.0

package/src/hooks/use-clipboard.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react"
+
+const DEFAULT_ERROR_MESSAGE = "Could not copy to the clipboard."
+
+export type UseClipboardOptions = {
+  /** How long `copied` stays true after a successful copy. */
+  resetMs?: number
+  onSuccess?: (text: string) => void
+  onError?: (error: Error) => void
+  /**
+   * Message when the fallback copy fails, or when the failure is not an Error.
+   * A clipboard API rejection keeps that Error.
+   */
+  errorMessage?: string
+}
+
+export type UseClipboardResult = {
+  copy: (text: string) => Promise<boolean>
+  copied: boolean
+  error: Error | null
+}
+
+async function writeClipboard(text: string, errorMessage: string) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text)
+    return
+  }
+
+  const textarea = document.createElement("textarea")
+  textarea.value = text
+  textarea.setAttribute("readonly", "")
+  textarea.style.position = "fixed"
+  textarea.style.opacity = "0"
+  document.body.appendChild(textarea)
+  textarea.select()
+  const ok = document.execCommand("copy")
+  document.body.removeChild(textarea)
+  if (!ok) {
+    throw new Error(errorMessage)
+  }
+}
+
+/** Copy text to the system clipboard with a short-lived `copied` flag. */
+export function useClipboard(
+  options: UseClipboardOptions = {},
+): UseClipboardResult {
+  const {
+    resetMs = 1500,
+    onSuccess,
+    onError,
+    errorMessage = DEFAULT_ERROR_MESSAGE,
+  } = options
+  const [copied, setCopied] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  async function copy(text: string) {
+    try {
+      await writeClipboard(text, errorMessage)
+      setError(null)
+      setCopied(true)
+      onSuccess?.(text)
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setCopied(false), resetMs)
+      return true
+    } catch (cause) {
+      const next = cause instanceof Error ? cause : new Error(errorMessage)
+      setError(next)
+      setCopied(false)
+      onError?.(next)
+      return false
+    }
+  }
+
+  return { copy, copied, error }
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+function subscribe(onStoreChange: () => void) {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+  mql.addEventListener("change", onStoreChange)
+  return () => mql.removeEventListener("change", onStoreChange)
+}
+
+function getSnapshot() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
+
+function getServerSnapshot() {
+  return false
+}
+
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/index.ts

@@ -0,0 +1,106 @@
+// Generated from the moloo UI kit. Subpath exports mirror these modules.
+export * from "./components/ui/accordion"
+export * from "./components/ui/alert-dialog"
+export * from "./components/ui/alert"
+export * from "./components/ui/aspect-ratio"
+export * from "./components/ui/attachment"
+export * from "./components/ui/avatar"
+export * from "./components/ui/badge"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/bubble"
+export * from "./components/ui/button-group"
+export * from "./components/ui/button"
+export * from "./components/ui/calendar"
+export * from "./components/ui/card"
+export * from "./components/ui/carousel"
+export * from "./components/ui/chart"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/collapsible"
+export * from "./components/ui/combobox"
+export * from "./components/ui/command"
+export * from "./components/ui/context-menu"
+export * from "./components/ui/date-picker"
+export * from "./components/ui/dialog"
+export * from "./components/ui/drawer"
+export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/dropzone"
+export * from "./components/ui/empty"
+export * from "./components/ui/field"
+export * from "./components/ui/form"
+export * from "./components/ui/highlighted-source"
+export * from "./components/ui/hover-card"
+export * from "./components/ui/image-field"
+export * from "./components/ui/input-group"
+export * from "./components/ui/input-otp"
+export * from "./components/ui/input"
+export * from "./components/ui/item"
+export * from "./components/ui/kbd"
+export * from "./components/ui/label"
+export * from "./components/ui/marker"
+export * from "./components/ui/menubar"
+export * from "./components/ui/message-scroller"
+export * from "./components/ui/message"
+export * from "./components/ui/moloo-logo"
+export * from "./components/ui/native-select"
+export * from "./components/ui/navigation-menu"
+export * from "./components/ui/outline-list"
+export * from "./components/ui/pagination"
+export * from "./components/ui/panel"
+export * from "./components/ui/popover"
+export * from "./components/ui/progress"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/resizable"
+export * from "./components/ui/scroll-area"
+export * from "./components/ui/select"
+export * from "./components/ui/separator"
+export * from "./components/ui/sheet"
+export * from "./components/ui/sidebar"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/slider"
+export * from "./components/ui/spinner"
+export * from "./components/ui/switch"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/tag-list-input"
+export * from "./components/ui/textarea"
+export * from "./components/ui/timeline"
+export * from "./components/ui/toast"
+export * from "./components/ui/toggle-group"
+export * from "./components/ui/toggle"
+export * from "./components/ui/tooltip"
+export {
+  BulkBar,
+  Root,
+  Toolbar,
+  allEnumFilterValues,
+  appFeatures,
+  compareBySorting,
+  compareValues,
+  createColumnHelper,
+  features,
+  isEnumFilterNarrowed,
+  searchAcrossFields,
+  sortBySortingState,
+  toggleEnumFilterValue,
+  useCellContext,
+  useHeaderContext,
+  useTable,
+  useTableContext,
+} from "./components/ui/data-table"
+export type {
+  ColumnFiltersState,
+  ColumnMetaWithCopyable,
+  ColumnMetaWithEnumFilter,
+  EnumFilterMeta,
+  EnumFilterOption,
+  PaginationState,
+  RowSelectionState,
+  SearchAcrossFieldsInput,
+  SearchAcrossFieldsResult,
+  SortingState,
+} from "./components/ui/data-table"
+export * from "./hooks/use-clipboard"
+export * from "./hooks/use-mobile"
+export * from "./lib/utils"
+export * from "./lib/format-relative-time"
+export * from "./lib/list-selection"

package/src/kind-icon.ts

@@ -0,0 +1,4 @@
+"use client"
+
+export { KindIcon, type KindIconProps } from "./components/ui/kind-icon"
+export { KindMark, type KindMarkProps } from "./components/ui/kind-mark"

package/src/lib/format-relative-time.ts

@@ -0,0 +1,41 @@
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 365 * 24 * 60 * 60 * 1000],
+  ["day", 24 * 60 * 60 * 1000],
+  ["hour", 60 * 60 * 1000],
+  ["minute", 60 * 1000],
+  ["second", 1000],
+]
+
+const formatters = new Map<string, Intl.RelativeTimeFormat>()
+
+function relativeTimeFormat(locale: string) {
+  const cached = formatters.get(locale)
+  if (cached) return cached
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" })
+  formatters.set(locale, formatter)
+  return formatter
+}
+
+function toTime(value: string | Date | number) {
+  if (value instanceof Date) return value.getTime()
+  if (typeof value === "number") return value
+  return new Date(value).getTime()
+}
+
+/** Locale-aware past/future relative time via `Intl.RelativeTimeFormat`. */
+export function formatRelativeTime(
+  value: string | Date | number,
+  now = Date.now(),
+  locale = "en",
+): string {
+  const then = toTime(value)
+  if (!Number.isFinite(then)) return ""
+  const elapsed = then - now
+  const formatter = relativeTimeFormat(locale)
+  for (const [unit, ms] of UNITS) {
+    if (Math.abs(elapsed) >= ms || unit === "second") {
+      return formatter.format(Math.round(elapsed / ms), unit)
+    }
+  }
+  return formatter.format(0, "second")
+}

package/src/lib/list-selection.ts

@@ -0,0 +1,61 @@
+export function isToggleModifier(event: {
+  metaKey: boolean;
+  ctrlKey: boolean;
+}): boolean {
+  return event.metaKey || event.ctrlKey;
+}
+
+export function applyListSelection(input: {
+  visibleIds: readonly string[];
+  checkedIds: ReadonlySet<string>;
+  anchorId: string | null;
+  clickedId: string;
+  toggle: boolean;
+  range: boolean;
+}): { checkedIds: Set<string>; anchorId: string | null } {
+  const { visibleIds, checkedIds, clickedId, toggle, range } = input;
+  const anchorIndex =
+    input.anchorId == null ? -1 : visibleIds.indexOf(input.anchorId);
+  const clickedIndex = visibleIds.indexOf(clickedId);
+
+  if (range) {
+    if (anchorIndex < 0 || clickedIndex < 0) {
+      return { checkedIds: new Set([clickedId]), anchorId: clickedId };
+    }
+    const from = Math.min(anchorIndex, clickedIndex);
+    const to = Math.max(anchorIndex, clickedIndex);
+    const rangeIds = visibleIds.slice(from, to + 1);
+    const next = toggle ? new Set(checkedIds) : new Set<string>();
+    for (const id of rangeIds) next.add(id);
+    return { checkedIds: next, anchorId: input.anchorId };
+  }
+
+  if (toggle) {
+    const next = new Set(checkedIds);
+    if (next.has(clickedId)) next.delete(clickedId);
+    else next.add(clickedId);
+    return { checkedIds: next, anchorId: clickedId };
+  }
+
+  return { checkedIds: new Set(checkedIds), anchorId: clickedId };
+}
+
+/**
+ * Keyboard cursor for an asset list <tr>.
+ *
+ * Safari ignores `position: relative` on table-row, so an absolutely
+ * positioned `::after` on the row uses the dialog (`position: fixed`) as
+ * its containing block — a focus ring around the dialog instead of the
+ * row. Paint the ring with inset box-shadow on the cells instead.
+ * The list table uses `border-separate` so Safari does not clip those
+ * inset shadows against collapsed row borders.
+ */
+export function assetRowKeyboardRingClass(active: boolean): string {
+  if (!active) return "";
+  return [
+    "z-[1]",
+    "[&>td]:shadow-[inset_0_2px_0_0_var(--primary),inset_0_-2px_0_0_var(--primary)]",
+    "[&>td:first-child]:shadow-[inset_2px_0_0_0_var(--primary),inset_0_2px_0_0_var(--primary),inset_0_-2px_0_0_var(--primary)]",
+    "[&>td:last-child]:shadow-[inset_-2px_0_0_0_var(--primary),inset_0_2px_0_0_var(--primary),inset_0_-2px_0_0_var(--primary)]",
+  ].join(" ");
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/moloo.css

@@ -0,0 +1,360 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-apricot: var(--apricot);
+  --color-field-bg: var(--field-bg);
+  --font-sans: "SUIT", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "WantedSans", "SUIT", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-display);
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-chart-axis: var(--chart-axis);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-cursor: var(--chart-cursor);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-fill: var(--destructive-fill);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --shadow-moloo: var(--moloo-shadow);
+  --shadow-moloo-hover: var(--moloo-shadow-hover);
+  --shadow-moloo-active: var(--moloo-shadow-active);
+  --shadow-moloo-lg: var(--moloo-shadow-lg);
+  --moloo-shadow-sm: var(--moloo-shadow-sm);
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #12141a;
+  --card: #f8fafc;
+  --card-foreground: #12141a;
+  --popover: #f8fafc;
+  --popover-foreground: #12141a;
+  --primary: #0e9aa0;
+  --primary-foreground: #f4f6f8;
+  --secondary: #cdd5e0;
+  --secondary-foreground: #12141a;
+  --muted: #e6ebf1;
+  --muted-foreground: #5a6675;
+  --accent: #ffb86b;
+  --accent-foreground: #1a1208;
+  --apricot: #ffb86b;
+  --destructive: #e0457a;
+  --destructive-foreground: #ffffff;
+  --destructive-fill: #dc2f6a;
+  --primary-hover: #0b7b80;
+  --border: #c9d1dc;
+  --input: #c9d1dc;
+  --ring: #0e9aa0;
+  --chart-1: #0e9aa0;
+  --chart-2: #ffb86b;
+  --chart-3: #e0457a;
+  --chart-4: #5a6675;
+  --chart-5: #222836;
+  --chart-axis: #3d4654;
+  --chart-grid: #8a95a6;
+  --chart-cursor: color-mix(in oklab, var(--foreground) 7%, transparent);
+  --radius: 0.35rem;
+  --sidebar: #f8fafc;
+  --sidebar-foreground: #12141a;
+  --sidebar-primary: #0e9aa0;
+  --sidebar-primary-foreground: #f4f6f8;
+  --sidebar-accent: #e6ebf1;
+  --sidebar-accent-foreground: #12141a;
+  --sidebar-border: #c9d1dc;
+  --sidebar-ring: #0e9aa0;
+  --moloo-shadow: 3px 3px 0 rgba(14, 90, 96, 0.08);
+  --moloo-shadow-hover: 4px 4px 0 rgba(14, 90, 96, 0.08);
+  --moloo-shadow-active: 1px 1px 0 rgba(14, 90, 96, 0.08);
+  --moloo-shadow-lg: 4px 4px 0 rgba(14, 90, 96, 0.09);
+  --moloo-shadow-sm: 2px 2px 0 rgba(14, 90, 96, 0.06);
+  --moloo-progress-shadow: inset 0 0 0 1px var(--border), 2px 2px 0 rgba(0, 0, 0, 0.2);
+  --moloo-invalid-shadow: 3px 3px 0 color-mix(in srgb, var(--destructive) 35%, transparent);
+  --field-bg: #f0f3f7;
+  --label-font: var(--font-display);
+  --label-transform: none;
+  --label-tracking: -0.02em;
+  --label-weight: 700;
+}
+
+.dark {
+  --background: #12141a;
+  --foreground: #eef3f7;
+  --card: #1a1e28;
+  --card-foreground: #eef3f7;
+  --popover: #1a1e28;
+  --popover-foreground: #eef3f7;
+  --primary: #5ce1e6;
+  --primary-foreground: #071215;
+  --secondary: #303848;
+  --secondary-foreground: #eef3f7;
+  --muted: #222836;
+  --muted-foreground: #9aa6b5;
+  --accent: #ffb86b;
+  --accent-foreground: #1a1208;
+  --apricot: #ffb86b;
+  --destructive: #ff6b9d;
+  --destructive-foreground: #071215;
+  --destructive-fill: #ff6b9d;
+  --primary-hover: #7aedf1;
+  --border: #2a3140;
+  --input: #2a3140;
+  --ring: #5ce1e6;
+  --chart-1: #5ce1e6;
+  --chart-2: #ffb86b;
+  --chart-3: #ff6b9d;
+  --chart-4: #9aa6b5;
+  --chart-5: #eef3f7;
+  --chart-axis: #eef3f7;
+  --chart-grid: #6b7688;
+  --chart-cursor: color-mix(in oklab, var(--foreground) 10%, transparent);
+  --sidebar: #1a1e28;
+  --sidebar-foreground: #eef3f7;
+  --sidebar-primary: #5ce1e6;
+  --sidebar-primary-foreground: #071215;
+  --sidebar-accent: #222836;
+  --sidebar-accent-foreground: #eef3f7;
+  --sidebar-border: #2a3140;
+  --sidebar-ring: #5ce1e6;
+  --moloo-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
+  --moloo-shadow-hover: 4px 4px 0 rgba(0, 0, 0, 0.35);
+  --moloo-shadow-active: 1px 1px 0 rgba(0, 0, 0, 0.35);
+  --moloo-shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.3);
+  --moloo-shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.28);
+  --field-bg: #0e1218;
+}
+
+@layer base {
+  /*
+    Tailwind v4 preflight sets `border: 0 solid`, which paints bare
+    border utilities in currentColor. The moloo-ui kit overrode that
+    with `* { @apply border-border }` in app globals; the rule was
+    dropped when the kit moved here, so separators inherited the text
+    color. Utilities such as border-border still win over this layer.
+  */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  .font-display {
+    font-family: var(--font-display);
+    letter-spacing: -0.03em;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  .label {
+    font-family: var(--label-font);
+    font-size: 0.875rem;
+    line-height: 1;
+    font-weight: var(--label-weight);
+    text-transform: var(--label-transform);
+    letter-spacing: var(--label-tracking);
+  }
+
+  .shadow-moloo {
+    box-shadow: var(--moloo-shadow);
+  }
+
+  .shadow-moloo-sm {
+    box-shadow: var(--moloo-shadow-sm);
+  }
+
+  .shadow-moloo-lg {
+    box-shadow: var(--moloo-shadow-lg);
+  }
+
+  .shadow-moloo-hover {
+    box-shadow: var(--moloo-shadow-hover);
+  }
+
+  .shadow-moloo-active {
+    box-shadow: var(--moloo-shadow-active);
+  }
+
+  .shadow-moloo-inset {
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+  }
+
+  .moloo-surface {
+    border-radius: var(--radius);
+    border: 2px solid var(--border);
+    background: var(--popover);
+    box-shadow: var(--moloo-shadow-lg);
+  }
+
+  .moloo-field {
+    border-radius: var(--radius);
+    border: 2px solid var(--border);
+    background: var(--field-bg);
+  }
+
+  .moloo-number-input,
+  .moloo-field[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .moloo-number-input::-webkit-outer-spin-button,
+  .moloo-number-input::-webkit-inner-spin-button,
+  .moloo-field[type="number"]::-webkit-outer-spin-button,
+  .moloo-field[type="number"]::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .moloo-focus {
+    outline-color: var(--destructive);
+  }
+
+  .moloo-focus:focus-visible {
+    outline: 2px solid var(--destructive);
+    outline-offset: 2px;
+  }
+
+  .moloo-focus-within {
+    outline-color: var(--destructive);
+  }
+
+  .moloo-focus-within:focus-within {
+    outline: 2px solid var(--destructive);
+    outline-offset: 2px;
+  }
+
+  .moloo-focus-within-inset {
+    outline-color: var(--destructive);
+  }
+
+  .moloo-focus-within-inset:focus-within {
+    outline: 2px solid var(--destructive);
+    outline-offset: -2px;
+  }
+
+  .group\/input-group [data-slot="input-group-control"].moloo-field,
+  .group\/input-group [data-slot="input"].moloo-field,
+  .group\/input-group [data-slot="textarea"].moloo-field {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .group\/input-group [data-slot="input-stepper"].moloo-field {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+    opacity: 1;
+  }
+
+  .group\/input-group .moloo-focus:focus-visible {
+    outline: none;
+  }
+
+  .group\/input-group [data-slot="input-stepper"].moloo-focus-within:focus-within {
+    outline: none;
+  }
+
+  .group\/input-group .moloo-press:hover:not(:disabled):not([aria-disabled="true"]),
+  .group\/input-group .moloo-press:active:not(:disabled):not([aria-disabled="true"]) {
+    transform: none;
+    box-shadow: none;
+  }
+
+  [data-slot="button-group"] .moloo-press:hover:not(:disabled):not([aria-disabled="true"]),
+  [data-slot="button-group"] .moloo-press:active:not(:disabled):not([aria-disabled="true"]) {
+    transform: none;
+    box-shadow: var(--moloo-shadow);
+  }
+
+  .moloo-press {
+    transition:
+      transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      background 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .moloo-press:hover:not(:disabled):not([aria-disabled="true"]) {
+    transform: translate(-1px, -1px);
+    box-shadow: var(--moloo-shadow-hover);
+  }
+
+  .moloo-press:active:not(:disabled):not([aria-disabled="true"]) {
+    transform: translate(1px, 1px);
+    box-shadow: var(--moloo-shadow-active);
+  }
+
+  .sticker {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-display);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    background: var(--accent);
+    color: var(--accent-foreground);
+    padding: 0.22rem 0.5rem;
+    border-radius: 0.25rem;
+    transform: rotate(-2deg);
+    box-shadow: var(--moloo-shadow);
+  }
+
+  .bar-indeterminate {
+    animation: indeterminate 1.1s ease-in-out infinite;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(500%);
+  }
+}