ci: run on host instead of a container

Containerized jobs on this act_runner fail during setup: the runner
extracts its payload to /var/run/act, /var/run is a symlink to /run in
the Debian job image, and Docker's archive extractor refuses to write
through it ("path escapes from parent"). CI had never passed as a
result -- 19 runs, 19 failures, including the v0.5.0 release commit.

Every other repo on this runner already uses `runs-on: host`. ui-kit
builds no image and deploys nothing, so container isolation buys it
nothing.

Refs #6

Co-Authored-By: Claude Opus 5 <[email protected]>

.gitea/workflows/ci.yml

@@ -6,7 +6,13 @@ on:
 
 jobs:
   build-and-design:
-    runs-on: ubuntu-latest
+    # `host`, not `ubuntu-latest`. A containerized job on this act_runner dies
+    # during setup with `mkdirat var/run/act: path escapes from parent` — the
+    # runner extracts its payload to /var/run/act, and /var/run is a symlink to
+    # /run in the Debian/Ubuntu job images, which Docker's archive extractor
+    # refuses to write through. See #6. ui-kit ships no image and deploys
+    # nothing, so there is nothing to isolate; the job just needs Node + repo.
+    runs-on: host
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@jason/ui-kit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jason/ui-kit",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "license": "MIT",
       "dependencies": {
         "@fontsource-variable/jetbrains-mono": "^5.3.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jason/ui-kit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Shared design foundation — branded tokens, Tailwind preset, shadcn-style components, motion, app shell + marketing blocks. Guarded by Impeccable.",
   "type": "module",
   "license": "MIT",

src/animated/animated-number.tsx

@@ -8,10 +8,13 @@ export function AnimatedNumber({
   value,
   format = defaultFormat,
   className,
+  immediate = false,
 }: {
   value: number;
   format?: (n: number) => string;
   className?: string;
+  /** Count up on mount instead of waiting to scroll into view. Dashboards. */
+  immediate?: boolean;
 }) {
   const ref = React.useRef<HTMLSpanElement>(null);
   const inView = useInView(ref, { once: true, margin: "-20% 0px" });
@@ -19,11 +22,12 @@ export function AnimatedNumber({
   const mv = useMotionValue(0);
   const spring = useSpring(mv, { stiffness: 90, damping: 20 });
   const [display, setDisplay] = React.useState(format(0));
+  const active = immediate || inView;
 
   React.useEffect(() => {
     if (reduce) { setDisplay(format(value)); return; }
-    if (inView) mv.set(value);
+    if (active) mv.set(value);
-  }, [inView, value, reduce, mv, format]);
+  }, [active, value, reduce, mv, format]);
 
   React.useEffect(() => spring.on("change", (v) => setDisplay(format(v))), [spring, format]);
 

src/blocks/command-palette.tsx

@@ -59,7 +59,16 @@ export function CommandPalette({
       <Command.List className="max-h-80 overflow-auto p-2">
         <Command.Empty className="py-6 text-center text-sm text-muted">No results.</Command.Empty>
         {groups.map(([group, items]) => (
-          <Command.Group key={group} heading={group} className="px-1 py-1 text-xs font-semibold uppercase tracking-wide text-muted [&_[cmdk-group-items]]:mt-1">
+          <Command.Group
+              key={group}
+              heading={group}
+              className={cn(
+                "px-1 py-1 [&_[cmdk-group-items]]:mt-1",
+                "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold",
+                "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide",
+                "[&_[cmdk-group-heading]]:text-muted"
+              )}
+            >
             {items.map((a) => (
               <Command.Item
                 key={a.id}

src/components/stat-card.tsx

@@ -24,6 +24,8 @@ export interface StatCardProps {
   intent?: StatIntent;
   icon?: React.ReactNode;
   className?: string;
+  /** Count up on mount. Pass through to AnimatedNumber. */
+  immediate?: boolean;
 }
 
 /** Dashboard metric tile. Pass `animate` for a count-up, or `value` for static. */
@@ -36,6 +38,7 @@ export function StatCard({
   intent = "default",
   icon,
   className,
+  immediate,
 }: StatCardProps) {
   return (
     <div className={cn("rounded-lg border border-border bg-surface p-4 shadow-sm", className)}>
@@ -44,7 +47,7 @@ export function StatCard({
         {icon && <span className="text-muted [&_svg]:size-4">{icon}</span>}
       </div>
       <p className={cn("mt-1 font-display text-2xl font-bold", INTENT[intent])}>
-        {animate != null ? <AnimatedNumber value={animate} format={format} /> : value}
+        {animate != null ? <AnimatedNumber value={animate} format={format} immediate={immediate} /> : value}
       </p>
       {sub && <p className="mt-0.5 text-xs text-muted">{sub}</p>}
     </div>

src/lib/tokens.json

@@ -35,7 +35,7 @@
       "successForeground": "#FFFFFF",
       "warning": "#7A5B00",
       "warningForeground": "#FFFFFF",
-      "danger": "#9B3D22",
+      "danger": "#A42D20",
       "dangerForeground": "#FFFFFF",
       "info": "#366B99",
       "infoForeground": "#FFFFFF"

src/motion/index.tsx

@@ -9,19 +9,24 @@ export function FadeIn({
   delay = 0,
   y = 8,
   className,
+  immediate = false,
 }: {
   children: React.ReactNode;
   delay?: number;
   y?: number;
   className?: string;
+  /** Animate on mount instead of waiting to scroll into view. Dashboards. */
+  immediate?: boolean;
 }) {
   const reduce = useReducedMotion();
+  const visible = { opacity: 1, y: 0 };
   return (
     <motion.div
       className={className}
       initial={reduce ? false : { opacity: 0, y }}
-      whileInView={{ opacity: 1, y: 0 }}
+      {...(immediate
-      viewport={{ once: true, margin: "-10% 0px" }}
+        ? { animate: visible }
+        : { whileInView: visible, viewport: { once: true, margin: "-10% 0px" as const } })}
       transition={reduce ? { duration: 0 } : { duration: 0.4, ease: easeOut, delay }}
     >
       {children}

src/styles/theme.generated.css

@@ -35,7 +35,7 @@
   --success-foreground: 0 0% 100%;
   --warning: 45 100% 24%;
   --warning-foreground: 0 0% 100%;
-  --danger: 13 64% 37%;
+  --danger: 6 67% 38%;
   --danger-foreground: 0 0% 100%;
   --info: 208 48% 41%;
   --info-foreground: 0 0% 100%;