auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/components/ProjectStarters.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+/**
+ * The conversation column of an empty project, before anything has been said.
+ *
+ * It is for anyone, not people who write briefs, so it doesn't teach how to write a prompt: it offers complete
+ * sentences. One click puts a sentence in the composer, Enter starts it, nothing to fill in. They are everyday
+ * things (a shop promo, a birthday wish, a trip, a pet, a bedtime story…), not jargon. "Shuffle" shows another
+ * group.
+ *
+ * The line below says files can simply be added: not only photos and videos, but audio, slides, PDFs, sheets, any
+ * file. That is the one other way in besides typing.
+ */
+import React from 'react';
+import {
+  ArrowUpRight, Atom, Briefcase, Cake, Cat, ChartColumn, ChefHat, Dumbbell, Flower2, Heart, Images,
+  Mic, Moon, Orbit, PartyPopper, Plane, Presentation, RefreshCw, Rocket, Scissors, ShoppingBag, Sparkles,
+  Upload, type LucideIcon,
+} from 'lucide-react';
+import { useT } from '@/i18n';
+import { BrandLogo } from './BrandLogo';
+
+/**
+ * Four groups of five, most common first (a promo, an explainer, a social ad, cutting your own footage, slides to
+ * video); later groups are smaller everyday moments. Together they cover every kind of film the app makes.
+ */
+const GROUPS = [
+  ['s1', 's2', 's3', 's4', 's5'],
+  ['s6', 's7', 's8', 's9', 's10'],
+  ['s11', 's12', 's13', 's14', 's15'],
+  ['s16', 's17', 's18', 's19', 's20'],
+] as const;
+
+/**
+ * A line icon before each sentence, so it is recognized at a glance before it is read.
+ * Same color as the text, no backing: a signpost should not outshine the sentence.
+ */
+const ICONS: Record<string, LucideIcon> = {
+  s1: Rocket, s2: Orbit, s3: ShoppingBag, s4: Scissors, s5: Presentation,
+  s6: Sparkles, s7: Moon, s8: Flower2, s9: ChartColumn, s10: Atom,
+  s11: Plane, s12: Cake, s13: Dumbbell, s14: Mic, s15: PartyPopper,
+  s16: Cat, s17: Heart, s18: Briefcase, s19: ChefHat, s20: Images,
+};
+
+export function ProjectStarters({
+  onPick,
+  onAttach,
+}: {
+  /** Puts the sentence in the composer (unsent) and focuses it; Enter starts it. */
+  onPick: (text: string) => void;
+  onAttach: () => void;
+}) {
+  const t = useT();
+  const [group, setGroup] = React.useState(0);
+  return (
+    <div className="mx-auto w-full max-w-[400px] py-2">
+      <BrandLogo size={26} />
+      <h2 className="mt-4 text-[20px] font-semibold tracking-[-0.02em] text-[var(--text)]">{t('starter.title')}</h2>
+      <p className="mt-1.5 text-[13px] leading-relaxed text-[var(--text-muted)]">{t('starter.hint')}</p>
+
+      <div className="mt-5 flex items-center justify-between">
+        <span className="text-[12px] text-[var(--text-faint)]">{t('starter.tryLabel')}</span>
+        <button
+          type="button"
+          onClick={() => setGroup((g) => (g + 1) % GROUPS.length)}
+          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[12px] text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
+        >
+          <RefreshCw size={11} />
+          {t('starter.shuffle')}
+        </button>
+      </div>
+      {/* All four groups stack in one grid cell, only the current one visible, so the height is always the tallest
+          group's. Otherwise lines wrapping differently per group would change the height, and the centered title and
+          "Shuffle" would jump out from under the pointer. */}
+      <div className="mt-2 grid">
+        {GROUPS.map((ids, gi) => {
+          const on = gi === group;
+          return (
+            <ul
+              key={on ? `on-${gi}` : gi}
+              aria-hidden={!on}
+              inert={!on}
+              className={`col-start-1 row-start-1 flex flex-col gap-1.5 ${on ? '' : 'invisible'}`}
+              style={on ? { animation: 'openfilm-rise 0.2s ease-out both' } : undefined}
+            >
+              {ids.map((id) => {
+                const text = t(`starter.${id}`);
+                const Icon = ICONS[id]!;
+                return (
+                  <li key={id}>
+                    <button
+                      type="button"
+                      onClick={() => onPick(text)}
+                      className="group flex w-full items-center gap-2.5 rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3.5 py-2.5 text-left text-[13.5px] leading-snug text-[var(--text)] transition hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]"
+                    >
+                      <Icon aria-hidden size={15} strokeWidth={1.8} className="shrink-0" />
+                      <span className="min-w-0 flex-1">{text}</span>
+                      <ArrowUpRight size={14} className="shrink-0 text-[var(--text-faint)] transition group-hover:text-[var(--text)]" />
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          );
+        })}
+      </div>
+
+      <button
+        type="button"
+        onClick={onAttach}
+        className="mt-4 inline-flex items-center gap-1.5 rounded-lg px-1 py-1 text-[12.5px] text-[var(--text-muted)] transition hover:text-[var(--text)]"
+      >
+        <Upload size={14} />
+        {t('starter.attach')}
+      </button>
+    </div>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/Tooltip.tsx

@@ -0,0 +1,191 @@
+/**
+ * A tooltip that shows after half a second.
+ *
+ * Not the native `title`: its delay is the system's (a second or two), and icon buttons rely on the tooltip to say
+ * what they are; by then the person has already clicked to find out.
+ *
+ * The delay is only for the first one: moving to another button within a moment shows at once. Waiting again on
+ * every button while scanning a toolbar is worse than no tooltip.
+ *
+ * Side: above the button by default; most buttons sit near the bottom or the middle, so above covers nothing.
+ * Buttons at the top of the window use `side="bottom"`.
+ *
+ * A shortcut shows as `Name (⌘Z)`, after the name, one step fainter. The modifier follows the platform
+ * (⌘ on Mac, Ctrl elsewhere).
+ */
+'use client';
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { chatLayer } from '@/lib/chat-layer';
+
+/** How long the first hover waits. */
+const DELAY_MS = 500;
+/** How long after leaving a button another one shows without waiting. */
+const WARM_MS = 600;
+
+let warmUntil = 0;
+
+/** Minimum gap between the bubble and the window edge. */
+const EDGE_PAD = 8;
+/** How close to the bubble's ends the arrow may go; further out it runs onto the rounded corner and looks broken. */
+const ARROW_INSET = 12;
+
+export function Tooltip({
+  label, shortcut, side = 'top', content, children,
+}: {
+  /** Empty or undefined: no tooltip right now; the child renders as is. */
+  label: string | undefined;
+  /** The shortcut, already formatted for the platform. Shown as `Name (⌘Z)`. */
+  shortcut?: string;
+  /** Which side the tooltip shows on. Buttons at the top of the window use `bottom`. */
+  side?: 'top' | 'bottom';
+  /** A card in place of the line of text (a pill's picture and facts on hover). `label` is still needed: it decides whether to show. */
+  content?: React.ReactNode;
+  /** The element the tooltip belongs to. It must take a ref and mouse events. */
+  children: React.ReactElement;
+}): React.ReactElement {
+  const [at, setAt] = React.useState<{ x: number; y: number } | null>(null);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const host = React.useRef<HTMLElement | null>(null);
+  const bubble = React.useRef<HTMLDivElement | null>(null);
+  /** How far to shift back and where the arrow goes, known only once measured. Hidden until then (see visibility below). */
+  const [fit, setFit] = React.useState<{ shift: number; arrow: number } | null>(null);
+
+  /* Near the window edge, a bubble centered on its button would be half outside and its text clipped. So it is
+     pushed back in, and the arrow moves the other way by as much, so it still points at the button.
+     useLayoutEffect, not useEffect: this must finish before the browser paints. */
+  React.useLayoutEffect(() => {
+    if (!at) {
+      setFit(null);
+      return;
+    }
+    const el = bubble.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const half = w / 2;
+    const min = EDGE_PAD + half;
+    const max = window.innerWidth - EDGE_PAD - half;
+    /* A window narrower than the bubble makes min exceed max: center it then, overflowing both sides equally. */
+    const want = max < min ? window.innerWidth / 2 : Math.min(Math.max(at.x, min), max);
+    const shift = want - at.x;
+    setFit({
+      shift: Math.round(shift),
+      arrow: Math.round(Math.min(Math.max(half - shift, ARROW_INSET), w - ARROW_INSET)),
+    });
+  }, [at, label, shortcut]);
+
+  const clear = React.useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  const show = React.useCallback(() => {
+    const el = host.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setAt({
+      x: Math.round(r.left + r.width / 2),
+      y: Math.round(side === 'bottom' ? r.bottom : r.top),
+    });
+  }, [side]);
+
+  const onEnter = React.useCallback((e: React.MouseEvent) => {
+    host.current = e.currentTarget as HTMLElement;
+    clear();
+    if (Date.now() < warmUntil) {
+      show();
+      return;
+    }
+    timer.current = setTimeout(show, DELAY_MS);
+  }, [clear, show]);
+
+  const onLeave = React.useCallback(() => {
+    clear();
+    if (at) warmUntil = Date.now() + WARM_MS;
+    setAt(null);
+  }, [at, clear]);
+
+  React.useEffect(() => clear, [clear]);
+
+  if (!label) return children;
+
+  /* Chain the child's own handlers: `cloneElement` overrides, it doesn't merge. Otherwise the child's own
+     `onMouseDown` silently disappears (toolbar buttons use it to keep focus where it is). */
+  const own = children.props as Partial<React.DOMAttributes<HTMLElement>>;
+  const chain = <E extends React.SyntheticEvent>(
+    mine: (e: E) => void,
+    theirs?: (e: E) => void,
+  ) => (e: E) => { theirs?.(e); mine(e); };
+
+  const child = React.cloneElement(children, {
+    onMouseEnter: chain(onEnter, own.onMouseEnter),
+    onMouseLeave: chain(onLeave, own.onMouseLeave),
+    /* Hide on press: a tooltip left after a click covers the part of the UI that just changed. */
+    onMouseDown: chain(onLeave, own.onMouseDown),
+  } as Partial<React.HTMLAttributes<HTMLElement>>);
+
+  return (
+    <>
+      {child}
+      {at && typeof document !== 'undefined'
+        ? createPortal(
+          <div
+            ref={bubble}
+            role="tooltip"
+            className={`pointer-events-none fixed z-[10200] -translate-x-1/2 rounded-[8px] text-[12px] font-medium shadow-md ${
+              content ? 'p-2' : 'whitespace-nowrap px-2.5 py-[5px]'
+            } ${
+              side === 'bottom' ? '' : '-translate-y-full'
+            }`}
+            style={{
+              left: at.x + (fit?.shift ?? 0),
+              /* The arrow tip 2px from the button: the bubble sits against it, not floating. */
+              top: side === 'bottom' ? at.y + 2 + ARROW_H : at.y - 2 - ARROW_H,
+              /* Hidden on the first frame, before the shift is measured, so it doesn't jump from the wrong place. */
+              visibility: fit ? 'visible' : 'hidden',
+              background: 'var(--tooltip-bg)',
+              color: 'var(--tooltip-text)',
+              border: '1px solid var(--tooltip-border)',
+            }}
+          >
+            {content ?? label}
+            {shortcut && !content ? (
+              /* Same color, fainter: a separate gray looks dirty on a dark bubble. */
+              <span style={{ opacity: 0.55, marginLeft: 5 }}>({shortcut})</span>
+            ) : null}
+            <span
+              aria-hidden
+              className="absolute block"
+              style={{
+                left: fit?.arrow ?? '50%',
+                width: ARROW_BOX,
+                height: ARROW_BOX,
+                background: 'var(--tooltip-bg)',
+                /* A square turned 45° with only its two outer edges stroked, over the bubble's border, makes one seamless arrow. */
+                ...(side === 'bottom'
+                  ? {
+                    top: -ARROW_BOX / 2 - 0.5,
+                    transform: 'translateX(-50%) rotate(45deg)',
+                    borderTop: '1px solid var(--tooltip-border)',
+                    borderLeft: '1px solid var(--tooltip-border)',
+                  }
+                  : {
+                    bottom: -ARROW_BOX / 2 - 0.5,
+                    transform: 'translateX(-50%) rotate(45deg)',
+                    borderBottom: '1px solid var(--tooltip-border)',
+                    borderRight: '1px solid var(--tooltip-border)',
+                  }),
+              }}
+            />
+          </div>,
+          chatLayer(),
+        )
+        : null}
+    </>
+  );
+}
+
+/** The arrow square's side; turned, it sticks out of the bubble by half its diagonal. */
+const ARROW_BOX = 7;
+const ARROW_H = Math.round((ARROW_BOX * Math.SQRT2) / 2);