@flamingo-stack/openframe-frontend-core 0.0.316 → 0.0.317

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -91,6 +91,10 @@ export function TimeTrackerPanel({
         onOpenMyTime()
       }
     : undefined
+  const handleCancel = () => {
+    onClose()
+    onCancel()
+  }
 
   const ticketAutocompleteOptions: AutocompleteOption[] = ticketOptions.map((t) => ({
     label: t.label,
@@ -123,7 +127,7 @@ export function TimeTrackerPanel({
           {isActive && (
             <Button
               variant="transparent"
-              onClick={onCancel}
+              onClick={handleCancel}
               className="h-auto p-0 text-h6 font-medium text-ods-text-secondary underline hover:bg-transparent hover:text-ods-text-primary md:h-auto"
             >
               Cancel Entry
@@ -135,7 +139,7 @@ export function TimeTrackerPanel({
           <div className="flex flex-1 items-center border-r border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-s)]">
             <span
               className={cn(
-                'text-h3 font-bold tabular-nums',
+                'text-h3 !font-mono font-bold tabular-nums',
                 isActive ? 'text-ods-text-primary' : 'text-ods-text-secondary',
               )}
             >
@@ -209,10 +213,10 @@ export function TimeTrackerPanel({
           </div>
         </div>
 
-        <div className="flex w-full flex-wrap gap-[var(--spacing-system-m)]">
+        <div className="grid grid-cols-2 gap-[var(--spacing-system-m)]">
           <Button
             variant="outline"
-            className="min-w-0 flex-1"
+            className="min-w-0"
             onClick={handleManualEntry}
             disabled={!onManualEntry}
             leftIcon={<PlusCircleIcon className="text-ods-text-secondary" />}
@@ -221,6 +225,8 @@ export function TimeTrackerPanel({
           </Button>
           <SplitButton
             variant="outline"
+            fullWidth
+            className="min-w-0"
             onClick={handleOpenMyTime}
             disabled={!onOpenMyTime && !onOpenMyTimeMenu}
             mainDisabled={!onOpenMyTime}

package/src/components/navigation/app-header.tsx

@@ -160,7 +160,10 @@ export const AppHeader = React.memo(function AppHeader({
               />}
               aria-label="User"
               disabled={disabled}
-              className={dimmedClass}
+              className={cn(
+                'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+                dimmedClass,
+              )}
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent

package/src/components/ui/date-picker.tsx

@@ -8,6 +8,7 @@ import {
   type DateRange,
   type DayPickerProps,
 } from "react-day-picker";
+import { useMdUp } from "../../hooks";
 import { cn } from "../../utils/cn";
 import { Button } from "./button";
 import { FieldWrapper } from "./field-wrapper";
@@ -133,14 +134,46 @@ function DatePickerCalendar({
 }: DatePickerCalendarProps) {
   const today = new Date();
 
-  // Check if we have a complete range (both from and to, and they're different)
-  const rangeSelected = selected as DateRange | undefined;
+  const isMdUp = useMdUp() ?? true;
+  const monthsToShow = isMdUp ? numberOfMonths : 1;
+
+  const [draftRange, setDraftRange] = React.useState<DateRange | undefined>(
+    mode === "range" ? (selected as DateRange | undefined) : undefined
+  );
+  const [hoveredDate, setHoveredDate] = React.useState<Date | undefined>(undefined);
+
+  const rangeSelected = draftRange;
   const hasCompleteRange =
     mode === "range" &&
-    rangeSelected?.from &&
-    rangeSelected?.to &&
+    !!rangeSelected?.from &&
+    !!rangeSelected?.to &&
     rangeSelected.from.getTime() !== rangeSelected.to.getTime();
 
+  const isPreviewDate = (date: Date): boolean => {
+    if (!draftRange?.from || draftRange.to || !hoveredDate) return false;
+    const start = Math.min(draftRange.from.getTime(), hoveredDate.getTime());
+    const end = Math.max(draftRange.from.getTime(), hoveredDate.getTime());
+    return date.getTime() >= start && date.getTime() <= end;
+  };
+
+  const handleRangeSelect = (triggerDate: Date | undefined): void => {
+    if (!triggerDate) return;
+
+    if (!draftRange?.from || draftRange.to) {
+      setDraftRange({ from: triggerDate, to: undefined });
+      return;
+    }
+    // Second click closes the range, ordering the two ends.
+    const start = draftRange.from;
+    const completed: DateRange =
+      triggerDate.getTime() < start.getTime()
+        ? { from: triggerDate, to: start }
+        : { from: start, to: triggerDate };
+    setDraftRange(completed);
+    setHoveredDate(undefined);
+    onSelect(completed);
+  };
+
   const classNames: DayPickerProps["classNames"] = {
     root: "p-4 date-picker-calendar",
     months: "flex gap-8",
@@ -294,7 +327,10 @@ function DatePickerCalendar({
 
   // Range mode
   return (
-    <div className="bg-ods-card border border-ods-border rounded-[6px] overflow-hidden">
+    <div
+      className="bg-ods-card border border-ods-border rounded-md overflow-hidden"
+      onMouseLeave={() => setHoveredDate(undefined)}
+    >
       <style>{rangeStyles}</style>
       <div className="flex">
         {/* First month */}
@@ -308,19 +344,22 @@ function DatePickerCalendar({
             <span className="text-h4 text-ods-text-primary">
               {formatMonthYear(month)}
             </span>
-            {numberOfMonths === 1 && (
+            {monthsToShow === 1 && (
               <CalendarNavButton
                 direction="right"
                 onClick={handleNextMonth}
                 aria-label="Next month"
               />
             )}
-            {numberOfMonths === 2 && <div className="size-10 md:size-12" />}
+            {monthsToShow === 2 && <div className="size-10 md:size-12" />}
           </div>
           <DayPicker
             mode="range"
-            selected={selected as DateRange | undefined}
-            onSelect={(range) => onSelect(range)}
+            selected={draftRange}
+            onSelect={(_range, triggerDate) => handleRangeSelect(triggerDate)}
+            onDayMouseEnter={(day) => setHoveredDate(day)}
+            modifiers={{ preview: isPreviewDate }}
+            modifiersClassNames={{ preview: "bg-ods-bg-surface" }}
             month={month}
             onMonthChange={setMonth}
             classNames={classNames}
@@ -333,8 +372,8 @@ function DatePickerCalendar({
           />
         </div>
 
-        {/* Second month (if numberOfMonths === 2) */}
-        {numberOfMonths === 2 && (
+        {/* Second month (if monthsToShow === 2) */}
+        {monthsToShow === 2 && (
           <div className="flex-1 border-l border-ods-border">
             <div className="flex items-center justify-between px-4 pt-4">
               <div className="size-10 md:size-12" />
@@ -349,8 +388,11 @@ function DatePickerCalendar({
             </div>
             <DayPicker
               mode="range"
-              selected={selected as DateRange | undefined}
-              onSelect={(range) => onSelect(range)}
+              selected={draftRange}
+              onSelect={(_range, triggerDate) => handleRangeSelect(triggerDate)}
+              onDayMouseEnter={(day) => setHoveredDate(day)}
+              modifiers={{ preview: isPreviewDate }}
+              modifiersClassNames={{ preview: "bg-ods-bg-surface" }}
               month={getSecondMonth(month)}
               classNames={classNames}
               showOutsideDays
@@ -438,9 +480,7 @@ export function DatePicker(props: DatePickerProps) {
     } else {
       const range = value as DateRange | undefined;
       props.onChange?.(range);
-      // Only close popover when BOTH from and to dates are selected
-      // Don't close when user just selected the start date
-      if (range?.from && range?.to && range.from.getTime() !== range.to.getTime()) {
+      if (range?.from && range?.to) {
         setOpen(false);
       }
     }

package/src/components/ui/duration-input.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { Fragment, type KeyboardEvent, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn";
+
+export interface DurationInputProps {
+  /** Duration as `HH:MM:SS`. */
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  className?: string;
+}
+
+type Segments = [string, string, string];
+
+const SEGMENT_META = [
+  { label: "Hours", placeholder: "HH", max: 99 },
+  { label: "Minutes", placeholder: "MM", max: 59 },
+  { label: "Seconds", placeholder: "SS", max: 59 },
+] as const;
+
+const pad2 = (s: string): string => s.padStart(2, "0").slice(-2);
+const compose = (s: Segments): string => `${pad2(s[0])}:${pad2(s[1])}:${pad2(s[2])}`;
+const split = (value: string): Segments => {
+  const parts = value.split(":");
+  return [parts[0] || "00", parts[1] || "00", parts[2] || "00"];
+};
+
+/**
+ * Segmented `HH:MM:SS` entry: each unit is its own field, typing fills the focused
+ * segment and auto-advances, arrows move/increment. Segments clamp to their max
+ * (MM/SS ≤ 59), so an invalid duration can't be produced. Value in/out is `HH:MM:SS`.
+ */
+export function DurationInput({ value, onChange, invalid, className }: DurationInputProps) {
+  const [segments, setSegments] = useState<Segments>(() => split(value));
+  const refs = [useRef<HTMLInputElement>(null), useRef<HTMLInputElement>(null), useRef<HTMLInputElement>(null)];
+
+  // Adopt an externally-set value (edit pre-fill / form reset) without clobbering in-progress typing.
+  useEffect(() => {
+    setSegments((prev) => (compose(prev) === value ? prev : split(value)));
+  }, [value]);
+
+  const focusSegment = (i: number) => {
+    const el = refs[i]?.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+  };
+
+  const commit = (next: Segments, advanceFrom?: number) => {
+    setSegments(next);
+    onChange(compose(next));
+    if (advanceFrom !== undefined && advanceFrom < 2) focusSegment(advanceFrom + 1);
+  };
+
+  const handleChange = (i: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const digits = event.target.value.replace(/\D/g, "").slice(-2);
+    const { max } = SEGMENT_META[i];
+    const next = [...segments] as Segments;
+
+    if (digits.length === 2) {
+      next[i] = String(Math.min(Number(digits), max));
+      commit(next, i);
+    } else if (digits.length === 1 && max === 59 && Number(digits) > 5) {
+      // 6–9 can't start a valid two-digit minute/second, so commit and advance now.
+      next[i] = digits;
+      commit(next, i);
+    } else {
+      next[i] = digits;
+      commit(next);
+    }
+  };
+
+  const handleKeyDown = (i: number) => (event: KeyboardEvent<HTMLInputElement>) => {
+    const el = event.currentTarget;
+    const { max } = SEGMENT_META[i];
+
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const delta = event.key === "ArrowUp" ? 1 : -1;
+      const nextValue = (Number(segments[i] || "0") + delta + (max + 1)) % (max + 1);
+      const next = [...segments] as Segments;
+      next[i] = String(nextValue);
+      commit(next);
+      requestAnimationFrame(() => el.select());
+    } else if (event.key === "ArrowLeft" && el.selectionStart === 0 && i > 0) {
+      event.preventDefault();
+      focusSegment(i - 1);
+    } else if (event.key === "ArrowRight" && el.selectionEnd === el.value.length && i < 2) {
+      event.preventDefault();
+      focusSegment(i + 1);
+    } else if (event.key === "Backspace" && el.value === "" && i > 0) {
+      event.preventDefault();
+      focusSegment(i - 1);
+    } else if (event.key === ":" && i < 2) {
+      event.preventDefault();
+      focusSegment(i + 1);
+    }
+  };
+
+  return (
+    <div
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          event.preventDefault();
+          focusSegment(0);
+        }
+      }}
+      className={cn(
+        "flex h-11 w-full items-center gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-sf)] transition-colors duration-200 md:h-12",
+        "cursor-text focus-within:border-ods-accent",
+        invalid && "border-ods-error focus-within:border-ods-error",
+        className,
+      )}
+    >
+      {SEGMENT_META.map((meta, i) => (
+        <Fragment key={meta.label}>
+          {i > 0 && <span className="text-ods-text-secondary">:</span>}
+          <input
+            ref={refs[i]}
+            inputMode="numeric"
+            size={2}
+            value={segments[i]}
+            onChange={handleChange(i)}
+            onKeyDown={handleKeyDown(i)}
+            onFocus={(event) => event.currentTarget.select()}
+            onBlur={() =>
+              setSegments((prev) => {
+                const padded = [...prev] as Segments;
+                padded[i] = pad2(prev[i]);
+                return padded;
+              })
+            }
+            placeholder={meta.placeholder}
+            aria-label={meta.label}
+            className="rounded-sm bg-transparent text-center !font-mono text-h4 tabular-nums text-ods-text-primary outline-none placeholder:text-ods-text-secondary focus:bg-ods-bg-hover"
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -9,6 +9,7 @@ export * from './checkbox'
 export * from './checkbox-block'
 export * from './checkbox-with-description'
 export * from './date-picker'
+export * from './duration-input'
 export * from './field-wrapper'
 export * from './honeypot-field'
 export * from './info-card'

package/src/stories/MspOrganizationCard.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { ReactNode } from 'react'
+import { MspOrganizationCard } from '../components/chat/msp-organization-card'
+
+/**
+ * MSP Organization card for the AI Assistant welcome screen.
+ *
+ * Shows which organization the user is signing into — square logo,
+ * "Your IT is managed by {name}" with the website beneath, and a trailing
+ * external-link button. Mirrors Figma `openframe — fae-chat` (node 1:5540).
+ */
+const meta: Meta<typeof MspOrganizationCard> = {
+  title: 'Chat/AI Assistant Welcome Screen/MSP Organization',
+  component: MspOrganizationCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Welcome-screen card confirming the active MSP/organization. The trailing button renders only when `href` (anchor, new tab) or `onOpenWebsite` (callback) is provided.',
+      },
+    },
+  },
+  decorators: [
+    // The card itself is width-unconstrained (fills its parent). This 600px
+    // wrapper mirrors the Figma welcome-screen container (node 1:5540 = 600×80).
+    (Story: () => ReactNode) => (
+      <div style={{ width: 600, maxWidth: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    name: 'TechFlow Solutions',
+    website: 'www.techflow.com',
+    href: 'https://www.techflow.com',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof MspOrganizationCard>
+
+/** Default — logo image, website, and a link-out anchor (opens in a new tab). */
+export const Default: Story = {
+  args: {
+    logoUrl:
+      'data:image/svg+xml;utf8,' +
+      encodeURIComponent(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="48" height="48" fill="%231d4ed8"/><circle cx="24" cy="24" r="12" fill="%2360a5fa"/></svg>',
+      ),
+  },
+}
+
+/** No logo — falls back to initials derived from `name`. */
+export const NoLogo: Story = {}
+
+/** Callback variant — the button fires `onOpenWebsite` instead of navigating. */
+export const WithCallback: Story = {
+  args: {
+    href: undefined,
+    onOpenWebsite: () => alert('Open organization website'),
+  },
+}
+
+/** No action — omit both `href` and `onOpenWebsite` to hide the trailing button. */
+export const WithoutAction: Story = {
+  args: {
+    href: undefined,
+    onOpenWebsite: undefined,
+  },
+}
+
+/** Long values truncate to a single line each. */
+export const LongValues: Story = {
+  args: {
+    name: 'Global Managed Services & Infrastructure Partners International',
+    website: 'www.global-managed-services-and-infrastructure-partners.example.com',
+  },
+}