@townco/ui 0.1.68 → 0.1.70

package/dist/gui/lib/motion.js

@@ -0,0 +1,217 @@
+/**
+ * Motion utilities and reusable animation variants for the UI package
+ * Provides consistent animation behavior across components
+ */
+// ============================================================================
+// Standard Durations
+// ============================================================================
+export const motionDuration = {
+    fast: 0.15,
+    normal: 0.25,
+    slow: 0.4,
+};
+// ============================================================================
+// Standard Easings
+// ============================================================================
+export const motionEasing = {
+    // Smooth, natural easing
+    smooth: [0.25, 0.1, 0.25, 1],
+    // Bouncy, playful easing
+    bounce: [0.68, -0.55, 0.265, 1.55],
+    // Sharp, snappy easing
+    sharp: [0.4, 0, 0.2, 1],
+    // Gentle, subtle easing
+    gentle: [0.25, 0.46, 0.45, 0.94],
+};
+// ============================================================================
+// Fade Variants
+// ============================================================================
+export const fadeInVariants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+    },
+};
+export const fadeInUpVariants = {
+    hidden: {
+        opacity: 0,
+        y: 8,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+    },
+};
+// ============================================================================
+// Expand/Collapse Variants
+// ============================================================================
+export const expandCollapseVariants = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        overflow: "hidden",
+    },
+    expanded: {
+        height: "auto",
+        opacity: 1,
+        overflow: "visible",
+    },
+};
+export const slideDownVariants = {
+    hidden: {
+        opacity: 0,
+        height: 0,
+        y: -4,
+    },
+    visible: {
+        opacity: 1,
+        height: "auto",
+        y: 0,
+    },
+};
+// ============================================================================
+// Shimmer Effect
+// ============================================================================
+export const shimmerTransition = {
+    duration: 2,
+    ease: "linear",
+    repeat: Infinity,
+    repeatType: "loop",
+};
+// For shimmer, we'll use a background gradient that shifts
+export const shimmerVariants = {
+    idle: {
+        backgroundPosition: "200% 0",
+    },
+    active: {
+        backgroundPosition: "-200% 0",
+    },
+};
+// ============================================================================
+// Scale Variants
+// ============================================================================
+export const scaleInVariants = {
+    hidden: {
+        scale: 0.95,
+        opacity: 0,
+    },
+    visible: {
+        scale: 1,
+        opacity: 1,
+    },
+};
+export const pulseVariants = {
+    idle: {
+        scale: 1,
+    },
+    pulse: {
+        scale: [1, 1.05, 1],
+    },
+};
+// ============================================================================
+// Rotation Variants
+// ============================================================================
+export const rotateVariants = {
+    collapsed: {
+        rotate: 0,
+    },
+    expanded: {
+        rotate: 180,
+    },
+};
+// ============================================================================
+// Standard Transitions
+// ============================================================================
+export const standardTransition = {
+    duration: motionDuration.normal,
+    ease: motionEasing.smooth,
+};
+export const fastTransition = {
+    duration: motionDuration.fast,
+    ease: motionEasing.sharp,
+};
+export const slowTransition = {
+    duration: motionDuration.slow,
+    ease: motionEasing.gentle,
+};
+export const springTransition = {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+};
+export const gentleSpringTransition = {
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+};
+// ============================================================================
+// Layout Transition (for shared layout animations)
+// ============================================================================
+export const layoutTransition = {
+    layout: {
+        duration: motionDuration.normal,
+        ease: motionEasing.smooth,
+    },
+};
+// ============================================================================
+// Stagger Configurations
+// ============================================================================
+export const staggerChildren = {
+    visible: {
+        transition: {
+            staggerChildren: 0.05,
+        },
+    },
+};
+export const staggerChildrenFast = {
+    visible: {
+        transition: {
+            staggerChildren: 0.03,
+        },
+    },
+};
+// ============================================================================
+// Slide Variants (for panels and drawers)
+// ============================================================================
+export const slideInFromRightVariants = {
+    hidden: {
+        x: "100%",
+        opacity: 0,
+    },
+    visible: {
+        x: 0,
+        opacity: 1,
+    },
+};
+export const slideOutToRightVariants = {
+    visible: {
+        x: 0,
+        opacity: 1,
+    },
+    hidden: {
+        x: "100%",
+        opacity: 0,
+    },
+};
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Get transition with reduced motion consideration
+ */
+export function getTransition(shouldReduceMotion, transition = standardTransition) {
+    if (shouldReduceMotion) {
+        return {
+            duration: 0.01,
+        };
+    }
+    return transition;
+}
+/**
+ * Get duration with reduced motion consideration
+ */
+export function getDuration(shouldReduceMotion, duration = motionDuration.normal) {
+    return shouldReduceMotion ? 0.01 : duration;
+}

package/dist/sdk/schemas/message.d.ts

@@ -13,9 +13,9 @@ export type MessageRole = z.infer<typeof MessageRole>;
  * Content type for messages
  */
 export declare const ContentType: z.ZodEnum<{
-    file: "file";
     text: "text";
     image: "image";
+    file: "file";
     tool_call: "tool_call";
     tool_result: "tool_result";
 }>;
@@ -25,9 +25,9 @@ export type ContentType = z.infer<typeof ContentType>;
  */
 export declare const BaseContent: z.ZodObject<{
     type: z.ZodEnum<{
-        file: "file";
         text: "text";
         image: "image";
+        file: "file";
         tool_call: "tool_call";
         tool_result: "tool_result";
     }>;

package/dist/sdk/schemas/session.d.ts

@@ -178,6 +178,11 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         title: z.ZodString;
         prettyName: z.ZodOptional<z.ZodString>;
         icon: z.ZodOptional<z.ZodString>;
+        verbiage: z.ZodOptional<z.ZodObject<{
+            active: z.ZodString;
+            past: z.ZodString;
+            paramKey: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
         subline: z.ZodOptional<z.ZodString>;
         kind: z.ZodEnum<{
             read: "read";

package/dist/sdk/transports/types.d.ts

@@ -7,6 +7,11 @@ export interface AgentToolInfo {
     description?: string;
     prettyName?: string;
     icon?: string;
+    verbiage?: {
+        active: string;
+        past: string;
+        paramKey?: string;
+    };
 }
 /**
  * Agent MCP (Model Context Protocol) server information

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,11 +49,12 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.46",
+    "@townco/core": "0.0.48",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.25",
     "lucide-react": "^0.552.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
@@ -66,18 +67,18 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.65",
+    "@townco/tsconfig": "0.1.67",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",
-    "react": "^19.2.0",
+    "react": "19.2.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "ink": "^5.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "ink": "^6.4.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "peerDependenciesMeta": {
     "react": {

package/src/styles/global.css

@@ -47,6 +47,14 @@
   --color-text-primary: var(--text-primary);
   --color-text-secondary: var(--text-secondary);
   --color-text-tertiary: var(--text-tertiary);
+  
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
   /* Layout widths - max-width utilities */
   --max-width-chat: 720px;
@@ -149,8 +157,16 @@
   
   /* Text colors from design system */
   --text-primary: var(--color-neutral-900);
-  --text-secondary: var(--color-neutral-600);
+  --text-secondary: var(--color-neutral-700);
   --text-tertiary: var(--color-neutral-500);
+  
+  /* Sidebar colors */
+  --sidebar: var(--color-neutral-50);
+  --sidebar-foreground: var(--color-neutral-950);
+  --sidebar-accent: var(--color-neutral-100);
+  --sidebar-accent-foreground: var(--color-neutral-900);
+  --sidebar-border: var(--color-neutral-200);
+  --sidebar-ring: var(--color-neutral-900);
 }
 
 .dark {
@@ -194,6 +210,14 @@
   --text-primary: var(--color-neutral-50);
   --text-secondary: var(--color-neutral-400);
   --text-tertiary: var(--color-neutral-500);
+  
+  /* Sidebar colors (dark mode) */
+  --sidebar: var(--color-neutral-900);
+  --sidebar-foreground: var(--color-neutral-50);
+  --sidebar-accent: var(--color-neutral-800);
+  --sidebar-accent-foreground: var(--color-neutral-50);
+  --sidebar-border: var(--color-neutral-800);
+  --sidebar-ring: var(--color-neutral-300);
 }
 
 @layer base {
@@ -417,3 +441,106 @@
 .animate-pulse-scale {
   animation: pulse-scale 1s ease-in-out infinite;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 200ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+    transform: translateY(0);
+  }
+}
+
+.animate-slideDown {
+  animation: slideDown 250ms ease-out;
+}
+
+@keyframes collapseUp {
+  from {
+    opacity: 1;
+    max-height: 500px;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.animate-collapseUp {
+  animation: collapseUp 200ms ease-in;
+}
+
+@keyframes pulse-subtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+@keyframes typing {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-typing {
+  animation: typing 1.4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.dark .animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+}