@assure-one/design-system 0.16.0 → 0.17.0

package/dist/index.d.ts

@@ -108,7 +108,7 @@ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefA
 
 /**
  * Blockquote — semantic quote with optional attribution. Uses `font-display`
- * (Geist) at a comfortable reading scale; smart quotes are wrapped automatically.
+ * (Inter) at a comfortable reading scale; smart quotes are wrapped automatically.
  */
 interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {
     author?: string;
@@ -227,6 +227,8 @@ interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Che
     defaultChecked?: boolean | "indeterminate";
     /** Convenience: render with indeterminate state. Mirrors legacy prop. */
     indeterminate?: boolean;
+    /** Box shape. Defaults to "square". */
+    shape?: "square" | "circle";
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -508,7 +510,7 @@ declare const DropdownMenuShortcut: {
 };
 
 /**
- * EmptyState — display headline (Geist), fg-3 description, neutral icon halo on bg-2.
+ * EmptyState — display headline (Inter), fg-3 description, neutral icon halo on bg-2.
  *
  * Public API preserved: `icon`, `title`, `description`, `action`.
  */
@@ -847,7 +849,7 @@ declare const LoadingRows: React$1.ForwardRefExoticComponent<LoadingRowsProps &
 
 /**
  * Logo — Assure suite wordmark. Renders "Assure" in `fg` plus an optional
- * product suffix in `pro-fg` (e.g., "Pro", "Tax"), set in Geist (font-display).
+ * product suffix in `pro-fg` (e.g., "Pro", "Tax"), set in Inter (font-display).
  *
  * The product suffix is configurable so the same component serves every
  * Assure product. The default preserves the original "Assure Pro" output —
@@ -1161,15 +1163,23 @@ interface SearchSelectProps {
      */
     onCreateNew?: () => void;
     createNewLabel?: string;
+    /**
+     * How the collapsed single-value display renders the picked option's
+     * `description`. "inline" (default) appends it as muted "· text" after the
+     * label — the existing behaviour. "pill" renders it as a discrete rounded
+     * badge after the label, so dense metadata (e.g. "1040 · 2025", "todo")
+     * reads as a tag instead of running into the label. Single-mode only.
+     */
+    descriptionVariant?: "inline" | "pill";
 }
-declare function SearchSelect({ options, selected: selectedProp, onSelect: onSelectProp, onRemove: onRemoveProp, value, onValueChange, onCreate, placeholder, className, disabled, groupFilter, pinnedGroups, closeOnSelect: closeOnSelectProp, showGroupCounts, onCreateNew, createNewLabel, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
+declare function SearchSelect({ options, selected: selectedProp, onSelect: onSelectProp, onRemove: onRemoveProp, value, onValueChange, onCreate, placeholder, className, disabled, groupFilter, pinnedGroups, closeOnSelect: closeOnSelectProp, showGroupCounts, onCreateNew, createNewLabel, descriptionVariant, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
 declare namespace SearchSelect {
     var displayName: string;
 }
 
 /**
  * SectionHeader — title + description block for marketing-style sections.
- * Uses Geist (`font-display`) with the spec's `-0.022em` letterspacing.
+ * Uses Inter (`font-display`) with the spec's `-0.022em` letterspacing.
  */
 interface SectionHeaderProps {
     title: string;
@@ -1409,7 +1419,7 @@ declare const StarRating: React$1.ForwardRefExoticComponent<StarRatingProps & Re
 
 /**
  * Stat — paired numeric display + caption (the StatNum primitive).
- * Numerals are set in `font-display` (Geist) at a fluid clamp size with
+ * Numerals are set in `font-display` (Inter) at a fluid clamp size with
  * `font-variant-numeric: tabular-nums` for vertical alignment.
  */
 interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1680,6 +1690,16 @@ interface SidebarProps extends React$1.HTMLAttributes<HTMLElement> {
      * `collapsible` alone is a no-op.
      */
     collapsible?: boolean;
+    /**
+     * Visual treatment.
+     *   - `"classic"` (default) — full-height column flush to the left
+     *     edge with a right rule. The legacy look; unchanged.
+     *   - `"floating"` — a detached, rounded card inset from the viewport
+     *     with a soft shadow (modern SaaS pattern). Nav rows get larger
+     *     hit areas and a pill active state. Exposed as `data-variant` so
+     *     descendant atoms restyle via `group-data-[variant=floating]`.
+     */
+    variant?: "classic" | "floating";
 }
 declare const Sidebar: React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>>;
 interface SidebarTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1946,7 +1966,7 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
 declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLElement>>;
 type PageHeaderSpecProps = React.HTMLAttributes<HTMLSpanElement>;
 /**
- * PageHeaderSpec — small `.spec`-style span (Geist Mono w/ tnum/lnum/ss01).
+ * PageHeaderSpec — small `.spec`-style span (Inter w/ tnum/lnum/ss01).
  * Used inside the `meta` slot for numeric facts ("4 due today",
  * "EIN ·· 12-3456789").
  */
@@ -2162,7 +2182,7 @@ declare const DataTableCell: React$1.ForwardRefExoticComponent<DataTableCellProp
  */
 declare const DataTableCellName: React$1.ForwardRefExoticComponent<DataTableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 /**
- * DataTableCellMono — currency / IDs / numerics. Geist Mono with
+ * DataTableCellMono — currency / IDs / numerics. Inter with
  * tabular numerals and tight tracking.
  */
 declare const DataTableCellMono: React$1.ForwardRefExoticComponent<DataTableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
@@ -2617,7 +2637,18 @@ interface UseStopwatchReturn {
     reset: () => void;
 }
 declare function useStopwatch(): UseStopwatchReturn;
-type TimeLoggerProps = React$1.HTMLAttributes<HTMLDivElement>;
+interface TimeLoggerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout direction.
+     *   - `"vertical"` (default) — the stacked panel; rows separated by top
+     *     rules. For popovers and side panels.
+     *   - `"horizontal"` — a single compact bar; segments sit side by side,
+     *     separated by left rules. For an app top/bottom bar. Exposed as
+     *     `data-orientation` so segment atoms flip their divider via
+     *     `group-data-[orientation=horizontal]/timelogger`.
+     */
+    orientation?: "vertical" | "horizontal";
+}
 declare const TimeLogger: React$1.ForwardRefExoticComponent<TimeLoggerProps & React$1.RefAttributes<HTMLDivElement>>;
 interface TimeLoggerHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     title?: React$1.ReactNode;

package/dist/index.js

@@ -90,9 +90,9 @@ var colors = {
 };
 var typography = {
   family: {
-    display: '"Geist", "Inter", -apple-system, system-ui, sans-serif',
+    display: '"Inter", -apple-system, system-ui, sans-serif',
     body: '"Inter", -apple-system, system-ui, sans-serif',
-    mono: '"Geist Mono", "JetBrains Mono", ui-monospace, monospace'
+    mono: '"Inter", -apple-system, system-ui, sans-serif'
   },
   weight: {
     regular: 400,
@@ -230,11 +230,24 @@ var systemTokens = {
     dangerBg: "var(--color-danger-bg)",
     dangerLine: "var(--color-danger-line)"
   },
+  gradient: {
+    brand: "var(--gradient-brand)",
+    pro: "var(--gradient-pro)",
+    audit: "var(--gradient-audit)",
+    books: "var(--gradient-books)",
+    tax: "var(--gradient-tax)"
+  },
   shadow: {
     quiet: "var(--shadow-quiet)",
     card: "var(--shadow-card)",
     pop: "var(--shadow-pop)",
-    focusRing: "var(--shadow-focus-ring)"
+    focusRing: "var(--shadow-focus-ring)",
+    xs: "var(--shadow-xs)",
+    sm: "var(--shadow-sm)",
+    md: "var(--shadow-md)",
+    lg: "var(--shadow-lg)",
+    xl: "var(--shadow-xl)",
+    "2xl": "var(--shadow-2xl)"
   },
   radius: {
     btn: "var(--radius-btn)",
@@ -2235,6 +2248,7 @@ var AccordionTrigger = React36.forwardRef(function AccordionTrigger2({ children,
         "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
         "hover:text-fg-2",
         "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-fg",
         "[&[data-state=open]>svg]:rotate-180",
         className
       ),
@@ -3013,7 +3027,16 @@ var CardAction = forwardRef(
   }
 );
 CardAction.displayName = "CardAction";
-var Checkbox = React36.forwardRef(function Checkbox2({ label, indeterminate, checked, defaultChecked, className, id: providedId, ...props }, ref) {
+var Checkbox = React36.forwardRef(function Checkbox2({
+  label,
+  indeterminate,
+  checked,
+  defaultChecked,
+  shape = "square",
+  className,
+  id: providedId,
+  ...props
+}, ref) {
   const generatedId = React36.useId();
   const id = providedId ?? generatedId;
   const resolvedChecked = indeterminate ? "indeterminate" : checked;
@@ -3026,18 +3049,19 @@ var Checkbox = React36.forwardRef(function Checkbox2({ label, indeterminate, che
         checked: resolvedChecked,
         defaultChecked,
         className: cn(
-          "peer border-rule-strong bg-surface text-fg-on-pro flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
+          "peer border-rule-strong bg-surface text-pro-fg flex size-4 shrink-0 items-center justify-center border",
+          shape === "circle" ? "rounded-full" : "rounded-[4px]",
           "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
           "hover:border-fg-4",
           "focus-visible:border-accent focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-          "data-[state=checked]:border-pro-fg data-[state=checked]:bg-pro-fg",
-          "data-[state=indeterminate]:border-pro-fg data-[state=indeterminate]:bg-pro-fg",
+          "data-[state=checked]:border-pro-fg data-[state=checked]:bg-pro-bg",
+          "data-[state=indeterminate]:border-pro-fg data-[state=indeterminate]:bg-pro-bg",
           "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
           "aria-[invalid=true]:border-danger-line",
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
       }
     ),
     label && /* @__PURE__ */ jsx(
@@ -6062,7 +6086,8 @@ function SearchSelect({
   closeOnSelect: closeOnSelectProp = false,
   showGroupCounts = false,
   onCreateNew,
-  createNewLabel = "Create new"
+  createNewLabel = "Create new",
+  descriptionVariant = "inline"
 }) {
   const isSingleMode = value !== void 0 || onValueChange !== void 0;
   const singleSelectedOption = React36.useMemo(
@@ -6219,10 +6244,10 @@ function SearchSelect({
             "div",
             {
               className: cn(
-                "rounded-input border-rule-strong bg-surface relative flex h-9 w-full items-center border",
-                "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+                "rounded-input border-rule-strong bg-surface relative flex h-9 w-full items-center border outline-none",
+                "transition-[color,background-color,border-color] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
                 "motion-reduce:transition-none",
-                "focus-within:border-accent focus-within:[box-shadow:var(--shadow-focus-ring)]",
+                "focus-within:[outline:1px_solid_var(--color-pro-fg)] focus-within:[outline-offset:-1px]",
                 showValue && "hover:bg-bg-2 gap-2 pr-2 pl-3",
                 disabled && "bg-bg-disabled cursor-not-allowed"
               ),
@@ -6233,7 +6258,7 @@ function SearchSelect({
                     type: "button",
                     onClick: () => !disabled && setOpen(true),
                     disabled,
-                    className: "flex h-full flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
+                    className: "flex h-full min-w-0 flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
                     children: [
                       singleValue.icon && /* @__PURE__ */ jsx(
                         "span",
@@ -6246,7 +6271,15 @@ function SearchSelect({
                           children: singleValue.icon
                         }
                       ),
-                      /* @__PURE__ */ jsxs("span", { className: "text-fg flex-1 truncate text-[13px]", children: [
+                      descriptionVariant === "pill" && singleValue.description ? (
+                        // Pill variant: label truncates, description rides after it
+                        // as a discrete shrink-0 badge so dense metadata reads as a
+                        // tag instead of running into the label.
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-[13px]", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-fg truncate", children: singleValue.label }),
+                          /* @__PURE__ */ jsx("span", { className: "rounded-pill border-rule bg-bg-2 text-fg-3 shrink-0 border px-1.5 py-0.5 text-[11px] leading-none", children: singleValue.description })
+                        ] })
+                      ) : /* @__PURE__ */ jsxs("span", { className: "text-fg min-w-0 flex-1 truncate text-[13px]", children: [
                         singleValue.label,
                         singleValue.description && /* @__PURE__ */ jsxs("span", { className: "text-fg-4", children: [
                           " \xB7 ",
@@ -7981,7 +8014,8 @@ function SidebarProvider({
 SidebarProvider.displayName = "SidebarProvider";
 var PEEK_ENTER_DELAY_MS = 100;
 var PEEK_LEAVE_DELAY_MS = 200;
-var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = false, onMouseEnter, onMouseLeave, style, ...props }, ref) {
+var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = false, variant = "classic", onMouseEnter, onMouseLeave, style, ...props }, ref) {
+  const isFloating = variant === "floating";
   const ctx = React36.useContext(SidebarContext);
   const state = collapsible && ctx ? ctx.state : "expanded";
   const peekLockCount = collapsible && ctx ? ctx.peekLockCount : 0;
@@ -8044,12 +8078,19 @@ var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = fa
         "data-overlay": overlay ? "true" : void 0,
         "data-labels": labelsHidden ? "hide" : "show",
         "data-collapsible": collapsible ? "true" : void 0,
+        "data-variant": variant,
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         style: { width: effectiveWidth, ...style },
         className: cn(
-          "group/sidebar scrollbar-thin flex h-dvh shrink-0 flex-col overflow-y-auto",
-          "border-rule bg-bg-2 border-r px-3 pt-4 pb-4",
+          "group/sidebar scrollbar-thin flex shrink-0 flex-col overflow-y-auto px-3 pt-4 pb-4",
+          // Classic: full-height column flush to the left edge with a right
+          // rule. The legacy look.
+          !isFloating && "h-dvh border-rule bg-bg-2 border-r",
+          // Floating: a detached, rounded card inset from the viewport with a
+          // soft shadow — the modern SaaS pattern. The clear figure/ground gap
+          // (Aesthetic-Usability) reads as its own surface above the canvas.
+          isFloating && "border-rule bg-surface shadow-card m-2.5 h-[calc(100dvh-1.25rem)] rounded-2xl border",
           // 220ms feels right for a ~192px width sweep — slower than the
           // 150ms `--duration-fast` (which reads as a snap on this size of
           // movement) but well short of `--duration-slow` (which feels
@@ -8338,6 +8379,11 @@ var SidebarLink = React36.forwardRef(
           // when the column widens during peek. The label simply collapses
           // to width 0 via <SidebarLinkLabel>.
           "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
+          // Floating variant: softer corners + a taller hit area (Fitts's
+          // law — a larger target is faster and lower-error to acquire), and
+          // a full pill highlight for active instead of the left rail bar.
+          "group-data-[variant=floating]/sidebar:gap-3 group-data-[variant=floating]/sidebar:rounded-lg group-data-[variant=floating]/sidebar:py-2",
+          "group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden",
           className
         ),
         ...props,
@@ -8347,10 +8393,12 @@ var SidebarLink = React36.forwardRef(
             "span",
             {
               className: cn(
-                // line-clamp-1 (not `truncate`) so multi-word labels clip at a
-                // word boundary; collapses cleanly with the rail-mode max-width
-                // animation since both rules only constrain visible content.
-                "min-w-0 flex-1 line-clamp-1",
+                // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
+                // to the right edge with a gap from the label, instead of
+                // butting against it. A line-clamp box swallows the badge's
+                // auto margin, which is why "Billing$48k" rendered glued.
+                // Single-line label clips via overflow; badge stays put.
+                "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden whitespace-nowrap",
                 "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
                 "max-w-full opacity-100",
                 "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
@@ -8486,7 +8534,10 @@ var SidebarLinkGroup = React36.forwardRef(
       "data-[active=true]:before:top-1/2 data-[active=true]:before:left-0",
       "data-[active=true]:before:h-4 data-[active=true]:before:w-[2px] data-[active=true]:before:-translate-y-1/2",
       "data-[active=true]:before:bg-pro-fg data-[active=true]:before:rounded-r-full",
-      "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85"
+      "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
+      // Floating variant — match SidebarLink: taller hit area, pill active.
+      "group-data-[variant=floating]/sidebar:gap-3 group-data-[variant=floating]/sidebar:rounded-lg group-data-[variant=floating]/sidebar:py-2",
+      "group-data-[variant=floating]/sidebar:data-[active=true]:before:hidden"
     );
     const labelSpan = /* @__PURE__ */ jsx(
       "span",
@@ -10161,30 +10212,43 @@ function useStopwatch() {
   }, [setPhase]);
   return { phase, elapsedMs, isRunning: phase === "running", start, pause, resume, stop, reset };
 }
-var TimeLogger = forwardRef(function TimeLogger2({ className, children, ...props }, ref) {
+var TimeLogger = forwardRef(function TimeLogger2({ className, orientation = "vertical", children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: cn("bg-surface text-fg-2 flex w-full flex-col", className),
+      "data-orientation": orientation,
+      className: cn(
+        "group/timelogger bg-surface text-fg-2 flex w-full",
+        orientation === "horizontal" ? "flex-row items-stretch" : "flex-col",
+        className
+      ),
       ...props,
       children
     }
   );
 });
 TimeLogger.displayName = "TimeLogger";
+var horizontalSegment = "group-data-[orientation=horizontal]/timelogger:border-t-0 group-data-[orientation=horizontal]/timelogger:border-l group-data-[orientation=horizontal]/timelogger:first:border-l-0";
 var TimeLoggerHeader = forwardRef(
   function TimeLoggerHeader2({ title = "Track Time", icon, loggedMinutes = 0, goalMinutes, className, ...props }, ref) {
     const hasGoal = goalMinutes != null;
     const pct = hasGoal && goalMinutes > 0 ? Math.min(100, loggedMinutes / goalMinutes * 100) : 0;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), ...props, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-fg flex items-center gap-2 text-base font-semibold [&_svg]:size-[18px]", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-pro-fg", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(ClockIcon, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-fg flex items-center gap-2.5 text-[17px] font-semibold", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bg-pro-bg text-pro-fg flex size-7 shrink-0 items-center justify-center rounded-lg [&_svg]:size-[17px]",
+              "aria-hidden": "true",
+              children: icon ?? /* @__PURE__ */ jsx(ClockIcon, {})
+            }
+          ),
           title
         ] }),
         hasGoal && /* @__PURE__ */ jsxs("div", { className: "text-fg-3 font-mono text-[13px] tabular-nums", children: [
-          /* @__PURE__ */ jsx("b", { className: "text-fg font-medium", children: formatDuration(loggedMinutes * 60) }),
+          /* @__PURE__ */ jsx("b", { className: "text-fg font-semibold", children: formatDuration(loggedMinutes * 60) }),
           " /",
           " ",
           formatDuration(goalMinutes * 60)
@@ -10193,7 +10257,7 @@ var TimeLoggerHeader = forwardRef(
       hasGoal && /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-bg-3 relative h-[3px] w-full",
+          className: "bg-bg-3 relative h-1 w-full",
           role: "progressbar",
           "aria-label": "Daily goal progress",
           "aria-valuemin": 0,
@@ -10202,7 +10266,7 @@ var TimeLoggerHeader = forwardRef(
           children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: "bg-pro-fg h-full rounded-r-full transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              className: "h-full rounded-r-full bg-[image:var(--gradient-pro)] transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
               style: { width: `${pct}%` }
             }
           )
@@ -10222,7 +10286,11 @@ var TimeLoggerContextRow = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-2.5 border-t px-4 py-2.5", className),
+        className: cn(
+          "border-rule-soft flex items-center gap-2.5 border-t px-4 py-3",
+          horizontalSegment,
+          className
+        ),
         ...props,
         children: [
           onClientSelect ? /* @__PURE__ */ jsxs(
@@ -10267,7 +10335,15 @@ var TimeLoggerTimer = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-2 border-t px-4 py-2.5", className),
+        className: cn(
+          "border-rule-soft flex items-center gap-2.5 border-t px-4 py-4",
+          // In a horizontal bar this segment is usually the `flex-1` grower;
+          // min-w-0 lets the clock shrink instead of pushing the trailing
+          // segment off the edge.
+          "group-data-[orientation=horizontal]/timelogger:min-w-0",
+          horizontalSegment,
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -10275,7 +10351,7 @@ var TimeLoggerTimer = forwardRef(
             {
               className: cn(
                 "text-fg placeholder:text-fg-4 min-w-0 flex-1 border-0 bg-transparent outline-none",
-                showClock ? "font-mono text-[22px] font-medium tracking-tight tabular-nums" : "text-[15px]"
+                showClock ? "font-mono text-[28px] font-semibold tracking-tight tabular-nums" : "text-[15px]"
               ),
               value: showClock ? formatClock(elapsedMs) : value ?? "",
               onChange: (event) => onValueChange?.(event.target.value),
@@ -10288,9 +10364,9 @@ var TimeLoggerTimer = forwardRef(
             Button,
             {
               type: "button",
-              variant: "secondary",
+              variant: "ghost",
               size: "icon",
-              className: "rounded-full",
+              className: "text-fg-3 hover:bg-bg-3 hover:text-fg size-10 rounded-full",
               "aria-label": phase === "paused" ? "Resume timer" : "Pause timer",
               disabled: phase === "idle" || phase === "stopped",
               onClick: phase === "paused" ? onResume : onPause,
@@ -10303,7 +10379,7 @@ var TimeLoggerTimer = forwardRef(
               type: "button",
               variant: "destructive",
               size: "icon",
-              className: "rounded-full",
+              className: "shadow-card hover:shadow-pop size-12 rounded-full transition-[transform,box-shadow] active:scale-95 motion-reduce:transition-none",
               "aria-label": "Stop timer",
               onClick: onStop,
               children: /* @__PURE__ */ jsx(StopIcon, {})
@@ -10314,7 +10390,7 @@ var TimeLoggerTimer = forwardRef(
               type: "button",
               variant: "primary",
               size: "icon",
-              className: "rounded-full",
+              className: "shadow-card hover:shadow-pop size-12 rounded-full bg-[image:var(--gradient-brand)] transition-[transform,box-shadow] active:scale-95 motion-reduce:transition-none",
               "aria-label": "Start timer",
               onClick: onStart,
               children: /* @__PURE__ */ jsx(PlayIcon, {})
@@ -10345,7 +10421,9 @@ var TimeLoggerField = forwardRef(
       trailing !== void 0 ? trailing : interactive ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "text-fg-4 size-4 shrink-0" }) : null
     ] });
     const classes = cn(
-      "border-rule-soft flex w-full items-center gap-3 border-t px-4 py-2.5 text-left",
+      "border-rule-soft flex w-full items-center gap-3 border-t px-4 py-3 text-left",
+      "group-data-[orientation=horizontal]/timelogger:w-auto",
+      horizontalSegment,
       interactive && "hover:bg-surface-2 focus-visible:bg-surface-2 cursor-pointer transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] outline-none motion-reduce:transition-none",
       className
     );
@@ -10368,7 +10446,7 @@ var TimeLoggerField = forwardRef(
 TimeLoggerField.displayName = "TimeLoggerField";
 var TimeLoggerNotes = forwardRef(
   function TimeLoggerNotes2({ value, onValueChange, icon, placeholder = "Add notes", className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs("div", { className: "border-rule-soft flex items-center gap-3 border-t px-4 py-2.5", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "border-rule-soft flex items-center gap-3 border-t px-4 py-3", children: [
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -10486,7 +10564,8 @@ var TimeLoggerActions = forwardRef(
       {
         ref,
         className: cn(
-          "border-rule bg-surface-2 flex items-center gap-2 border-t px-4 py-2.5",
+          "border-rule bg-surface-2 flex items-center gap-2 border-t px-4 py-3",
+          horizontalSegment,
           className
         ),
         ...props,
@@ -10514,7 +10593,10 @@ var TimeLoggerEntry = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule-soft flex items-center gap-3 border-t px-4 py-2", className),
+        className: cn(
+          "border-rule-soft hover:bg-surface-2 flex items-center gap-3 border-t px-4 py-2.5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -10565,7 +10647,7 @@ var TimeLoggerFooter = forwardRef(
       "div",
       {
         ref,
-        className: cn("border-rule flex gap-2 border-t px-4 py-2.5 [&>*]:flex-1", className),
+        className: cn("border-rule flex gap-2 border-t px-4 py-3 [&>*]:flex-1", className),
         ...props,
         children
       }