motion-ui-skill 2.0.0

package/components/docks/presence-dock.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type PresenceDockPerson = Readonly<{
+  id: string;
+  name: string;
+  initials?: string;
+  tone?: "rose" | "sky" | "amber" | "emerald" | "neutral";
+  online?: boolean;
+}>;
+
+export type PresenceDockProps = Readonly<
+  {
+    people?: readonly PresenceDockPerson[];
+    maxVisible?: number;
+    defaultOpen?: boolean;
+    label?: string;
+    onSelect?: (id: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const DEFAULT_PEOPLE: readonly PresenceDockPerson[] = [
+  { id: "ava", name: "Ava Patel", initials: "AP", tone: "rose", online: true },
+  { id: "noah", name: "Noah Kim", initials: "NK", tone: "sky", online: true },
+  {
+    id: "mia",
+    name: "Mia Johnson",
+    initials: "MJ",
+    tone: "amber",
+    online: false,
+  },
+  {
+    id: "leo",
+    name: "Leo Chen",
+    initials: "LC",
+    tone: "emerald",
+    online: true,
+  },
+];
+
+function avatarTone(tone: PresenceDockPerson["tone"]) {
+  switch (tone) {
+    case "rose":
+      return "bg-rose-400 text-white";
+    case "sky":
+      return "bg-sky-400 text-white";
+    case "amber":
+      return "bg-amber-400 text-neutral-900";
+    case "emerald":
+      return "bg-emerald-400 text-neutral-900";
+    default:
+      return "bg-neutral-800 text-white";
+  }
+}
+
+function getInitials(person: PresenceDockPerson) {
+  if (person.initials) return person.initials;
+  return person.name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+// Presence dock — collaborator stack in MacDock frosted shell.
+export const PresenceDock = forwardRef<HTMLDivElement, PresenceDockProps>(
+  (
+    {
+      className,
+      people = DEFAULT_PEOPLE,
+      maxVisible = 3,
+      defaultOpen = false,
+      label,
+      onSelect,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const visible = people.slice(0, maxVisible);
+    const overflow = Math.max(0, people.length - maxVisible);
+    const onlineCount = people.filter((person) => person.online).length;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="presence-dock"
+        className={cn("relative inline-flex font-sans", className)}
+        {...props}
+      >
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-label={label ?? `${onlineCount} people online`}
+          onClick={() => setOpen((value) => !value)}
+          className="ease-smooth relative flex h-[3.75rem] items-center rounded-full border border-neutral-50 bg-white/50 px-2.5 py-2 shadow-xl shadow-black/10 backdrop-blur-md transition-transform duration-300 will-change-transform hover:scale-[1.02]"
+        >
+          <span className="flex items-center">
+            {visible.map((person, index) => (
+              <span
+                key={person.id}
+                className={cn(
+                  "relative flex size-11 items-center justify-center rounded-full border-2 border-white text-[11px] font-semibold shadow-xs",
+                  avatarTone(person.tone),
+                  index > 0 && "-ml-2.5",
+                  index === 0 && "z-30",
+                  index === 1 && "z-20",
+                  index === 2 && "z-10",
+                )}
+              >
+                {getInitials(person)}
+                {person.online ? (
+                  <span className="absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-white bg-emerald-400" />
+                ) : null}
+              </span>
+            ))}
+            {overflow > 0 ? (
+              <span className="-ml-2.5 flex size-11 items-center justify-center rounded-full border-2 border-white bg-neutral-900 text-[11px] font-semibold text-white">
+                +{overflow}
+              </span>
+            ) : null}
+          </span>
+          <span className="ml-2.5 text-xs font-medium text-neutral-600">
+            {onlineCount} live
+          </span>
+        </button>
+
+        <ul
+          className={cn(
+            "ease-smooth absolute top-[calc(100%+0.5rem)] left-0 z-20 w-full origin-top overflow-hidden rounded-2xl border border-neutral-50 bg-white/90 p-2 shadow-xl shadow-black/10 backdrop-blur-md transition-[opacity,transform] duration-200",
+            open
+              ? "pointer-events-auto scale-100 opacity-100"
+              : "pointer-events-none scale-95 opacity-0",
+          )}
+        >
+          {people.map((person) => (
+            <li key={person.id}>
+              <button
+                type="button"
+                onClick={() => onSelect?.(person.id)}
+                className="ease-smooth flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left transition-colors duration-150 hover:bg-neutral-50"
+              >
+                <span
+                  className={cn(
+                    "relative flex size-11 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold",
+                    avatarTone(person.tone),
+                  )}
+                >
+                  {getInitials(person)}
+                  <span
+                    className={cn(
+                      "absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-white",
+                      person.online ? "bg-emerald-400" : "bg-neutral-300",
+                    )}
+                  />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium text-neutral-900">
+                    {person.name}
+                  </span>
+                  <span className="text-xs text-neutral-500">
+                    {person.online ? "Active now" : "Away"}
+                  </span>
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);
+
+PresenceDock.displayName = "PresenceDock";

package/components/docks/spotlight-bar.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import {
+  forwardRef,
+  useId,
+  useState,
+  type ComponentPropsWithoutRef,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+
+import { Command, Search, Sparkles } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+export type SpotlightSuggestion = Readonly<{
+  id: string;
+  label: string;
+  hint?: string;
+}>;
+
+export type SpotlightBarProps = Readonly<
+  {
+    placeholder?: string;
+    suggestions?: readonly SpotlightSuggestion[];
+    showShortcut?: boolean;
+    onSubmit?: (value: string) => void;
+    onSelectSuggestion?: (id: string) => void;
+  } & Omit<ComponentPropsWithoutRef<"form">, "onSubmit">
+>;
+
+const DEFAULT_SUGGESTIONS: readonly SpotlightSuggestion[] = [
+  { id: "new-page", label: "Create page", hint: "P" },
+  { id: "invite", label: "Invite teammate", hint: "I" },
+  { id: "analytics", label: "Open analytics", hint: "A" },
+];
+
+// Spotlight bar — frosted command search bar aligned with MacDock shell.
+export const SpotlightBar = forwardRef<HTMLFormElement, SpotlightBarProps>(
+  (
+    {
+      className,
+      placeholder = "Search actions, pages, people…",
+      suggestions = DEFAULT_SUGGESTIONS,
+      showShortcut = true,
+      onSubmit,
+      onSelectSuggestion,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = useId();
+    const [value, setValue] = useState("");
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const filtered = suggestions.filter((item) =>
+      item.label.toLowerCase().includes(value.trim().toLowerCase()),
+    );
+
+    const run = (event?: FormEvent) => {
+      event?.preventDefault();
+      const target = filtered[activeIndex];
+      if (target) {
+        onSelectSuggestion?.(target.id);
+        setValue("");
+        setOpen(false);
+        return;
+      }
+      if (value.trim()) {
+        onSubmit?.(value.trim());
+        setValue("");
+        setOpen(false);
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+        setOpen(true);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActiveIndex((index) =>
+          filtered.length === 0 ? 0 : (index + 1) % filtered.length,
+        );
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveIndex((index) =>
+          filtered.length === 0
+            ? 0
+            : (index - 1 + filtered.length) % filtered.length,
+        );
+      }
+      if (event.key === "Escape") setOpen(false);
+    };
+
+    return (
+      <form
+        ref={ref}
+        data-slot="spotlight-bar"
+        onSubmit={run}
+        className={cn("relative w-sm font-sans", className)}
+        {...props}
+      >
+        <div className="flex items-center gap-2.5 rounded-2xl border border-neutral-50 bg-white/50 p-3 shadow-xl shadow-black/10 backdrop-blur-md">
+          <label htmlFor={inputId} className="sr-only">
+            Spotlight search
+          </label>
+          <Search
+            size={16}
+            aria-hidden
+            className="ml-1 shrink-0 text-neutral-400"
+          />
+          <input
+            id={inputId}
+            value={value}
+            onChange={(event) => {
+              setValue(event.target.value);
+              setOpen(true);
+              setActiveIndex(0);
+            }}
+            onFocus={() => setOpen(true)}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            className="min-w-0 flex-1 bg-transparent text-sm text-neutral-900 ring-0 outline-none placeholder:text-neutral-400 focus:border-transparent focus:ring-0"
+          />
+          {showShortcut ? (
+            <kbd className="hidden items-center gap-0.5 rounded-md border border-neutral-100 bg-neutral-50 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500 md:inline-flex">
+              <Command size={10} aria-hidden />K
+            </kbd>
+          ) : null}
+        </div>
+
+        <ul
+          role="listbox"
+          className={cn(
+            "ease-smooth absolute top-[calc(100%+0.5rem)] left-0 z-10 w-full origin-top overflow-hidden rounded-2xl border border-neutral-50 bg-white/90 p-2 shadow-xl shadow-black/10 backdrop-blur-md transition-[opacity,transform] duration-200",
+            open && filtered.length > 0
+              ? "pointer-events-auto scale-100 opacity-100"
+              : "pointer-events-none scale-95 opacity-0",
+          )}
+        >
+          {filtered.map((item, index) => (
+            <li key={item.id}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={index === activeIndex}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => {
+                  onSelectSuggestion?.(item.id);
+                  setValue("");
+                  setOpen(false);
+                }}
+                className={cn(
+                  "ease-smooth flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2.5 text-left transition-colors duration-150",
+                  index === activeIndex
+                    ? "bg-neutral-100 text-neutral-900"
+                    : "text-neutral-700 hover:bg-neutral-50",
+                )}
+              >
+                <span className="flex min-w-0 items-center gap-2">
+                  <Sparkles
+                    size={14}
+                    aria-hidden
+                    className="shrink-0 text-neutral-400"
+                  />
+                  <span className="truncate text-sm font-medium">
+                    {item.label}
+                  </span>
+                </span>
+                {item.hint ? (
+                  <kbd className="rounded-md border border-neutral-100 bg-white px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
+                    {item.hint}
+                  </kbd>
+                ) : null}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </form>
+    );
+  },
+);
+
+SpotlightBar.displayName = "SpotlightBar";

package/components/dropdowns/file-menu-dropdown.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Edit, Copy, Pin, Folder, Trash } from "lucide-react";
+
+type IconComponent = ComponentType<
+  Readonly<{ size?: number; className?: string }>
+>;
+
+export type ContextMenuItem = Readonly<{
+  id: string;
+  label?: string;
+  icon?: IconComponent;
+  kbd?: string;
+  danger?: boolean;
+  separator?: boolean;
+}>;
+
+export type FileMenuDropdownProps = Readonly<
+  {
+    cardTitle?: string;
+    cardHint?: string;
+    triggerAriaLabel?: string;
+    menuAriaLabel?: string;
+    items?: readonly ContextMenuItem[];
+    onItemClick?: (item: ContextMenuItem) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultItems: readonly ContextMenuItem[] = [
+  { id: "edit", label: "Edit", icon: Edit, kbd: "ctrl + E" },
+  { id: "duplicate", label: "Duplicate", icon: Copy, kbd: "ctrl + D" },
+  { id: "pin", label: "Pin to top", icon: Pin },
+  { id: "move", label: "Move to folder", icon: Folder },
+  { id: "separator-delete", separator: true },
+  { id: "delete", label: "Delete", icon: Trash, danger: true, kbd: "⌫" },
+];
+
+type ContextMenuItemRowProps = Readonly<{
+  item: ContextMenuItem;
+  onSelect: (item: ContextMenuItem) => void;
+}>;
+
+function ContextMenuItemRow({ item, onSelect }: ContextMenuItemRowProps) {
+  if (item.separator) {
+    return <hr className="mx-1 my-1 h-px border-0 bg-neutral-100" />;
+  }
+
+  const Icon = item.icon;
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      aria-label={item.label}
+      onClick={() => onSelect(item)}
+      className={cn(
+        "flex w-full cursor-pointer items-center justify-between rounded-lg px-2.5 py-2 text-[12px] font-medium transition-colors",
+        item.danger
+          ? "text-red-500 hover:bg-red-50"
+          : "text-neutral-700 hover:bg-neutral-50",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {Icon ? (
+          <Icon
+            size={12}
+            className={item.danger ? "text-red-400" : "text-neutral-400"}
+          />
+        ) : null}
+        {item.label}
+      </div>
+      {item.kbd ? (
+        <kbd className="font-mono text-[9px] text-neutral-400">{item.kbd}</kbd>
+      ) : null}
+    </button>
+  );
+}
+
+// Production-ready Context Menu component — styled with Tailwind CSS.
+export const FileMenuDropdown = forwardRef<
+  HTMLDivElement,
+  FileMenuDropdownProps
+>(
+  (
+    {
+      cardTitle = "Card Component",
+      cardHint = "Right-click or tap",
+      triggerAriaLabel = "Open context menu",
+      menuAriaLabel = "Context menu",
+      items = defaultItems,
+      onItemClick,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const innerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const close = (event: MouseEvent) => {
+        if (!innerRef.current?.contains(event.target as Node)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", close);
+      return () => document.removeEventListener("mousedown", close);
+    }, []);
+
+    useEffect(() => {
+      const onEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("keydown", onEscape);
+      return () => document.removeEventListener("keydown", onEscape);
+    }, []);
+
+    const handleItemSelect = (item: ContextMenuItem) => {
+      setOpen(false);
+      onItemClick?.(item);
+    };
+
+    const toggleOpen = () => setOpen((prev) => !prev);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="context-menu-dropdown"
+        className={cn("relative inline-block font-sans", className)}
+        {...props}
+      >
+        <div ref={innerRef}>
+          <button
+            type="button"
+            aria-label={triggerAriaLabel}
+            aria-expanded={open}
+            aria-haspopup="menu"
+            onContextMenu={(event) => {
+              event.preventDefault();
+              setOpen(true);
+            }}
+            onClick={toggleOpen}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                toggleOpen();
+              }
+            }}
+            className="flex flex-col items-center justify-center select-none"
+          >
+            <div className="mb-2 flex h-24 w-24 cursor-pointer items-center justify-center rounded-3xl bg-cyan-200">
+              <Folder size={48} className="text-white" fill="white" />
+            </div>
+            <p className="text-[10px] font-medium text-neutral-700">
+              {cardTitle}
+            </p>
+            <p className="mt-1 text-[10px] text-neutral-200">{cardHint}</p>
+          </button>
+
+          {open ? (
+            <div
+              role="menu"
+              aria-label={menuAriaLabel}
+              className="absolute top-1/2 left-1/2 z-100 w-48 -translate-x-1/2 -translate-y-1/2 rounded-xl border border-neutral-100 bg-white p-1 shadow-[0_20px_50px_-12px_rgba(0,0,0,0.05)]"
+            >
+              {items.map((item) => (
+                <ContextMenuItemRow
+                  key={item.id}
+                  item={item}
+                  onSelect={handleItemSelect}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+FileMenuDropdown.displayName = "FileMenuDropdown";