@vvedantb/ui 0.3.2 → 0.4.0-rc.1

package/src/composer/input-area/useInputAreaPrediction.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import {
+  ghostSuggestion,
+  scheduleCompletion,
+  shouldSkipPrediction,
+} from "./composerPrediction";
+
+/**
+ * As-you-type ghost text for `InputArea`. The caller renders `suggestion` and
+ * owns accepting it. A result shows only while the draft it was requested for
+ * is still the current draft. Pass `getPrediction` to make the request.
+ */
+export function useInputAreaPrediction({
+  value,
+  suspended = false,
+  enabled = true,
+  getPrediction,
+}: {
+  value: string;
+  suspended?: boolean;
+  enabled?: boolean;
+  getPrediction?: (text: string) => Promise<string>;
+}): { suggestion: string | undefined; dismiss: () => void } {
+  const [result, setResult] = useState<{ forValue: string; text: string }>();
+  const [dismissedFor, setDismissedFor] = useState<string>();
+
+  const idle =
+    !enabled ||
+    getPrediction === undefined ||
+    suspended ||
+    shouldSkipPrediction(value);
+  const settled = result?.forValue === value || dismissedFor === value;
+
+  // Debounced request: it has to react to the draft changing.
+  useEffect(() => {
+    if (idle || settled || getPrediction === undefined) return;
+    return scheduleCompletion(
+      value,
+      getPrediction,
+      (text) => setResult({ forValue: value, text }),
+    );
+  }, [value, idle, settled, getPrediction]);
+
+  const visible = !idle && dismissedFor !== value && result?.forValue === value;
+  return {
+    suggestion: visible ? ghostSuggestion(value, result.text) : undefined,
+    dismiss: () => setDismissedFor(value),
+  };
+}

package/src/index.ts

@@ -100,3 +100,24 @@ export * from "./ai-elements/suggestion";
 export * from "./audio";
 
 export * from "./composer";
+export { toast } from "sonner";
+
+// Shell: router-free pieces. Shell's own `cn` and `ClassValue` are not re-exported;
+// use the root `cn` (clsx + tailwind-merge).
+export { SidebarHeader } from "../shell/src/SidebarHeader";
+export type { SidebarHeaderProps } from "../shell/src/SidebarHeader";
+export { PillTabs } from "../shell/src/PillTabs";
+export type { PillTabItem, PillTabsProps } from "../shell/src/PillTabs";
+export { SessionsHoverCard } from "../shell/src/SessionsHoverCard";
+export type {
+  SessionsHoverCardContext,
+  SessionsHoverCardProps,
+  SessionsHoverCardSurface,
+} from "../shell/src/SessionsHoverCard";
+
+// App helpers: confirm skip, update watcher, settings chrome, stable auth.
+export * from "../app/src/index";
+
+// Native tokens (JS values that match tokens.css).
+export { tokens } from "../tokens/src/native";
+export type { Tokens } from "../tokens/src/native";

package/src/ui/button.tsx

@@ -39,17 +39,26 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  /** Rendered before the children. Ignored with `asChild`. */
+  startContent?: React.ReactNode;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, startContent, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        {asChild ? children : (
+          <>
+            {startContent}
+            {children}
+          </>
+        )}
+      </Comp>
     );
   },
 );

package/src/ui/dropdown-menu.tsx

@@ -75,14 +75,42 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    /** Leading icon or mark. Ignored with `asChild`. */
+    startContent?: React.ReactNode;
+    /** Second line under the label. Ignored with `asChild`. */
+    description?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(menuItemClass, inset && "pl-8", className)}
-    {...props}
-  />
-));
+>(
+  (
+    { className, inset, startContent, description, children, asChild, ...props },
+    ref,
+  ) => (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      asChild={asChild}
+      className={cn(menuItemClass, inset && "pl-8", className)}
+      {...props}
+    >
+      {asChild || (startContent === undefined && description === undefined) ? (
+        children
+      ) : (
+        <>
+          {startContent}
+          {description === undefined ? (
+            children
+          ) : (
+            <span className="flex min-w-0 flex-col">
+              <span>{children}</span>
+              <span className="text-xs text-muted-foreground">
+                {description}
+              </span>
+            </span>
+          )}
+        </>
+      )}
+    </DropdownMenuPrimitive.Item>
+  ),
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<

package/tokens/README.md

@@ -1,13 +1,13 @@
 # `@vvedantb/ui/tokens`
 
-Design tokens and shared Tailwind v4 CSS for the vvedantb web apps, plus JS tokens for React Native. These are subpaths of `@vvedantb/ui`, source-exported: no build step. Paths in the `File` column are relative to `packages/ui/tokens/`.
+Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and Tailwind preset are subpaths of `@vvedantb/ui`; the native JS tokens are named exports of the root (`tokens`, `Tokens`). Source-exported: no build step. Paths in the `File` column are relative to `packages/ui/tokens/`.
 
 ## Exports
 
 | Export | File | What it is |
 | --- | --- | --- |
 | `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, `*` border and `body` defaults. In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. |
-| `@vvedantb/ui/tokens/native` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
+| `tokens` and `Tokens` from `@vvedantb/ui` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
 | `@vvedantb/ui/tokens/css/base.css` | `src/css/base.css` | `html` touch/accent, `::selection`, control transitions, pointer cursor, range accent (`@layer base`). |
 | `@vvedantb/ui/tokens/css/dialog.css` | `src/css/dialog.css` | Unlayered `max-width: none` for `@vvedantb/ui` compact (bottom-sheet) dialogs. |
 | `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |

package/src/sonner.ts

@@ -1,2 +0,0 @@
-export * from "./ui/sonner";
-export { toast } from "sonner";