motion-ui-skill 2.0.0

package/components/widgets/compass-widget.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const CX = 88;
+const CY = 84;
+const R = 56;
+const TICK_COUNT = 60;
+
+const CARDINAL_LABELS = [
+  { text: "N", deg: 0 },
+  { text: "E", deg: 90 },
+  { text: "S", deg: 180 },
+  { text: "W", deg: 270 },
+] as const;
+
+// Rounds SVG numbers so server and client render identical coordinates
+function svgCoord(value: number) {
+  return Number(value.toFixed(2));
+}
+
+type DeviceOrientationWithCompass = DeviceOrientationEvent & {
+  webkitCompassHeading?: number;
+};
+
+// Keeps heading within 0–359°
+function normalizeHeading(degrees: number) {
+  return ((degrees % 360) + 360) % 360;
+}
+
+// Reads compass heading from iOS webkit or standard deviceorientation APIs
+function readHeading(event: DeviceOrientationEvent): number | null {
+  const e = event as DeviceOrientationWithCompass;
+
+  if (
+    typeof e.webkitCompassHeading === "number" &&
+    !Number.isNaN(e.webkitCompassHeading)
+  ) {
+    return normalizeHeading(e.webkitCompassHeading);
+  }
+
+  if (event.absolute && event.alpha != null && !Number.isNaN(event.alpha)) {
+    return normalizeHeading(360 - event.alpha);
+  }
+
+  if (event.alpha != null && !Number.isNaN(event.alpha)) {
+    return normalizeHeading(360 - event.alpha);
+  }
+
+  return null;
+}
+
+// iOS Safari requires an explicit permission prompt before orientation events fire
+function needsOrientationPermission() {
+  return (
+    globalThis.DeviceOrientationEvent !== undefined &&
+    "requestPermission" in globalThis.DeviceOrientationEvent
+  );
+}
+
+// Client-only snapshot — false on the server to avoid hydration mismatches
+function useRequiresOrientationPrompt() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => needsOrientationPermission(),
+    () => false,
+  );
+}
+
+// Violet mascot peeking from the bottom of the dial
+function PeekingMascot() {
+  return (
+    <g aria-hidden>
+      <circle cx="88" cy="142" r="58" fill="#7C6CF0" />
+      <circle cx="68" cy="122" r="5" fill="white" />
+      <circle cx="108" cy="122" r="5" fill="white" />
+      <circle cx="69" cy="123" r="2.2" fill="#1C1C1E" />
+      <circle cx="109" cy="123" r="2.2" fill="#1C1C1E" />
+      <path
+        d="M76 138 Q88 146 100 138"
+        stroke="white"
+        strokeWidth="2.2"
+        fill="none"
+        strokeLinecap="round"
+      />
+    </g>
+  );
+}
+
+// Tick ring and N/E/S/W labels — rotated as a group to match device heading
+function CompassFace() {
+  return (
+    <g aria-hidden>
+      {Array.from({ length: TICK_COUNT }, (_, tick) => {
+        const deg = tick * (360 / TICK_COUNT);
+        const rad = ((deg - 90) * Math.PI) / 180;
+        const major = deg % 90 === 0;
+        const inner = R - (major ? 8 : 5);
+        const outer = R - 1;
+        return (
+          <line
+            key={deg}
+            x1={svgCoord(CX + inner * Math.cos(rad))}
+            y1={svgCoord(CY + inner * Math.sin(rad))}
+            x2={svgCoord(CX + outer * Math.cos(rad))}
+            y2={svgCoord(CY + outer * Math.sin(rad))}
+            stroke="white"
+            strokeWidth={major ? 1.6 : 1}
+            strokeLinecap="round"
+            opacity={major ? 0.95 : 0.45}
+          />
+        );
+      })}
+
+      {CARDINAL_LABELS.map(({ text, deg }) => {
+        const rad = ((deg - 90) * Math.PI) / 180;
+        const lr = R + 10;
+        return (
+          <text
+            key={text}
+            x={svgCoord(CX + lr * Math.cos(rad))}
+            y={svgCoord(CY + lr * Math.sin(rad))}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fill="white"
+            fontSize="11"
+            fontWeight="600"
+            fontFamily='-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif'
+          >
+            {text}
+          </text>
+        );
+      })}
+    </g>
+  );
+}
+
+// heading — fallback degrees when device sensors are unavailable
+export type CompassWidgetProps = Readonly<
+  {
+    heading?: number;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const CompassWidget = forwardRef<HTMLDivElement, CompassWidgetProps>(
+  ({ className, heading: fallbackHeading = 0, ...props }, ref) => {
+    const requiresPrompt = useRequiresOrientationPrompt();
+    const [heading, setHeading] = useState(normalizeHeading(fallbackHeading));
+    const [active, setActive] = useState(false);
+    // True once the user grants iOS permission or when no prompt is required
+    const [promptDismissed, setPromptDismissed] = useState(false);
+    const [permissionDenied, setPermissionDenied] = useState(false);
+    const listeningRef = useRef(false);
+
+    const onOrientation = useCallback((event: DeviceOrientationEvent) => {
+      const next = readHeading(event);
+      if (next != null) {
+        setHeading(next);
+        setActive(true);
+      }
+    }, []);
+
+    const startListening = useCallback(() => {
+      if (listeningRef.current) return;
+      globalThis.addEventListener(
+        "deviceorientationabsolute",
+        onOrientation,
+        true,
+      );
+      globalThis.addEventListener("deviceorientation", onOrientation, true);
+      listeningRef.current = true;
+    }, [onOrientation]);
+
+    const stopListening = useCallback(() => {
+      if (listeningRef.current) {
+        globalThis.removeEventListener(
+          "deviceorientationabsolute",
+          onOrientation,
+          true,
+        );
+        globalThis.removeEventListener(
+          "deviceorientation",
+          onOrientation,
+          true,
+        );
+        listeningRef.current = false;
+      }
+    }, [onOrientation]);
+
+    const enableCompass = useCallback(async () => {
+      if (requiresPrompt) {
+        try {
+          const requestPermission = (
+            DeviceOrientationEvent as typeof DeviceOrientationEvent & {
+              requestPermission?: () => Promise<PermissionState>;
+            }
+          ).requestPermission;
+
+          if (!requestPermission) return;
+
+          const result = await requestPermission();
+          if (result === "granted") {
+            setPromptDismissed(true);
+            setPermissionDenied(false);
+            return;
+          }
+
+          setPermissionDenied(true);
+          return;
+        } catch {
+          setPermissionDenied(true);
+          return;
+        }
+      }
+
+      setPromptDismissed(true);
+      setPermissionDenied(false);
+    }, [requiresPrompt]);
+
+    // Subscribe to orientation events once permission is not blocking
+    useEffect(() => {
+      if (requiresPrompt && !promptDismissed) {
+        return stopListening;
+      }
+
+      startListening();
+      return stopListening;
+    }, [requiresPrompt, promptDismissed, startListening, stopListening]);
+
+    const showTapHint = requiresPrompt && !promptDismissed && !permissionDenied;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="minimal-compass-widget"
+        className={cn(
+          "relative h-44 w-44 max-w-full overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <svg
+          viewBox="0 0 176 176"
+          className="absolute inset-0 h-full w-full"
+          aria-hidden
+        >
+          <rect width="176" height="176" fill="#000000" />
+          <PeekingMascot />
+          <g transform={`rotate(${-heading} ${CX} ${CY})`}>
+            <CompassFace />
+          </g>
+        </svg>
+
+        {active && (
+          <span
+            aria-hidden
+            className="absolute top-3.5 right-3.5 h-1.5 w-1.5 rounded-full bg-[#34C759]/50"
+          />
+        )}
+
+        {showTapHint && (
+          <button
+            type="button"
+            aria-label="Enable compass"
+            onClick={() => void enableCompass()}
+            className="absolute inset-0 flex cursor-pointer items-end justify-center border-0 bg-black/50 p-0 pb-3 font-sans"
+          >
+            <span className="text-[10px] font-medium text-white/70">
+              Tap to enable
+            </span>
+          </button>
+        )}
+
+        {permissionDenied && (
+          <output className="absolute inset-0 flex items-end justify-center border-0 bg-black/50 pb-3 font-sans">
+            <span className="text-[10px] font-medium text-white/40">
+              Access denied
+            </span>
+          </output>
+        )}
+      </div>
+    );
+  },
+);
+
+CompassWidget.displayName = "CompassWidget";

package/components/widgets/daily-activity-calendar-widget.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { forwardRef, useMemo, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Clock } from "lucide-react";
+
+/** Monthly activity calendar — highlight active days and a selected date. */
+const WEEKDAY_HEADERS = [
+  { id: "sun", label: "S" },
+  { id: "mon", label: "M" },
+  { id: "tue", label: "T" },
+  { id: "wed", label: "W" },
+  { id: "thu", label: "T" },
+  { id: "fri", label: "F" },
+  { id: "sat", label: "S" },
+] as const;
+
+function daysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+/** Up to six day numbers before today in the same month — demo streak. */
+function defaultActiveDays(today: Date) {
+  const day = today.getDate();
+  const start = Math.max(1, day - 6);
+  return Array.from({ length: day - start }, (_, index) => start + index);
+}
+
+// activeDays — emerald dots; highlightDay — orange selected day (defaults to today)
+export type DailyActivityCalendarWidgetProps = Readonly<
+  {
+    activeDays?: number[];
+    highlightDay?: number;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const DailyActivityCalendarWidget = forwardRef<
+  HTMLDivElement,
+  DailyActivityCalendarWidgetProps
+>(
+  (
+    {
+      className,
+      activeDays: activeDaysProp,
+      highlightDay: highlightDayProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const today = useMemo(() => {
+      const date = new Date();
+      date.setHours(0, 0, 0, 0);
+      return date;
+    }, []);
+
+    const year = today.getFullYear();
+    const monthIndex = today.getMonth();
+    const daysCount = daysInMonth(year, monthIndex);
+    const leadingBlanks = new Date(year, monthIndex, 1).getDay();
+
+    const monthLabel = today.toLocaleDateString("en-US", {
+      month: "long",
+      year: "numeric",
+    });
+    const monthBadge = today.toLocaleDateString("en-US", { month: "short" });
+
+    const activeDays = activeDaysProp ?? defaultActiveDays(today);
+    const highlightDay = highlightDayProp ?? today.getDate();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="daily-activity-calendar-widget"
+        data-year={year}
+        className={cn(
+          "flex h-44 w-44 flex-col overflow-hidden rounded-3xl bg-neutral-900 p-3 font-sans text-white shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mb-3 flex items-center justify-between">
+          <p className="text-sm font-semibold">Daily Activity</p>
+          <Clock size={14} className="text-neutral-400" />
+        </div>
+
+        <div className="mb-2 flex items-center justify-between">
+          <span className="rounded-full bg-neutral-700 px-2 py-0.5 text-[9px]">
+            {monthBadge}
+          </span>
+          <span className="text-[10px] text-neutral-400">{monthLabel}</span>
+        </div>
+
+        <div className="mb-1 grid grid-cols-7 gap-0.5 text-center text-[8px] text-neutral-500">
+          {WEEKDAY_HEADERS.map(({ id, label }) => (
+            <span key={id}>{label}</span>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-0.5 text-center">
+          {Array.from({ length: leadingBlanks }, (_, slot) => (
+            <span key={`start-${slot}`} />
+          ))}
+          {Array.from({ length: daysCount }, (_, dayIndex) => dayIndex + 1).map(
+            (day) => {
+              const isActive = activeDays.includes(day);
+              const isHighlight = day === highlightDay;
+              const isIdle = !isActive && !isHighlight;
+
+              return (
+                <span
+                  key={day}
+                  className={cn(
+                    "flex h-5 w-5 items-center justify-center rounded-full text-[9px] transition-all duration-200 ease-out",
+                    isActive &&
+                      "scale-100 bg-emerald-500 font-semibold text-white",
+                    isHighlight &&
+                      "scale-100 bg-orange-500 font-semibold text-white",
+                    isIdle && "text-neutral-400",
+                  )}
+                >
+                  {day}
+                </span>
+              );
+            },
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+DailyActivityCalendarWidget.displayName = "DailyActivityCalendarWidget";

package/components/widgets/dnd-face-widget.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Moon } from "lucide-react";
+
+const MASCOT = "#A78BFA";
+const ACCENT = "#C4B5FD";
+const DIAL = { cx: 88, cy: 84, r: 56 } as const;
+
+type DndMascotProps = Readonly<{
+  on: boolean;
+}>;
+
+function DndMascot({ on }: DndMascotProps) {
+  return (
+    <g aria-hidden>
+      <circle cx="88" cy="142" r="58" fill={MASCOT} />
+      {on ? (
+        <>
+          <path
+            d="M64 122 Q68 118 72 122"
+            stroke="white"
+            strokeWidth="2.2"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M104 122 Q108 118 112 122"
+            stroke="white"
+            strokeWidth="2.2"
+            fill="none"
+            strokeLinecap="round"
+          />
+        </>
+      ) : (
+        <>
+          <circle cx="68" cy="122" r="5" fill="white" />
+          <circle cx="108" cy="122" r="5" fill="white" />
+          <circle cx="69" cy="123" r="2.2" fill="#1C1C1E" />
+          <circle cx="109" cy="123" r="2.2" fill="#1C1C1E" />
+        </>
+      )}
+      <path
+        d="M76 138 Q88 144 100 138"
+        stroke="white"
+        strokeWidth="2.2"
+        fill="none"
+        strokeLinecap="round"
+      />
+    </g>
+  );
+}
+
+// Do Not Disturb face widget — tap the mascot to toggle focus mode on or off.
+export type DndFaceWidgetProps = Readonly<
+  {
+    label?: string;
+    defaultOn?: boolean;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+export const DndFaceWidget = forwardRef<HTMLButtonElement, DndFaceWidgetProps>(
+  (
+    { className, label = "Focus", defaultOn = true, onClick, ...props },
+    ref,
+  ) => {
+    const [on, setOn] = useState(defaultOn);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={on}
+        aria-label={on ? "Turn Focus mode off" : "Turn Focus mode on"}
+        data-slot="dnd-face-widget"
+        onClick={(event) => {
+          setOn((prev) => !prev);
+          onClick?.(event);
+        }}
+        className={cn(
+          "relative h-44 w-44 max-w-full cursor-pointer overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
+          className,
+        )}
+        {...props}
+      >
+        <svg
+          viewBox="0 0 176 176"
+          className="absolute inset-0 h-full w-full"
+          aria-hidden
+        >
+          <rect width="176" height="176" fill="#000" />
+          <DndMascot on={on} />
+          <circle
+            cx={DIAL.cx}
+            cy={DIAL.cy}
+            r={DIAL.r}
+            fill="none"
+            stroke={on ? ACCENT : "white"}
+            strokeWidth="1.5"
+            opacity={on ? 0.45 : 0.25}
+          />
+        </svg>
+
+        <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
+          <Moon
+            size={14}
+            color={on ? ACCENT : "#FFFFFF66"}
+            fill={on ? ACCENT : "#FFFFFF66"}
+          />
+        </span>
+
+        <div className="absolute inset-x-0 top-[32%] z-10 px-3 text-center">
+          <p
+            className={cn(
+              "text-base leading-none font-semibold",
+              on ? "text-white" : "text-white/40",
+            )}
+          >
+            {on ? label : "Off"}
+          </p>
+        </div>
+      </button>
+    );
+  },
+);
+
+DndFaceWidget.displayName = "DndFaceWidget";

package/components/widgets/electric-scooter-widget.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { Leaf, Bike } from "lucide-react";
+
+export type ElectricScooterWidgetProps = Readonly<
+  {
+    title?: string;
+    date?: string;
+    distance?: string;
+    avgSpeed?: string;
+    duration?: string;
+    image?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Electric Scooter component — styled with Tailwind CSS.
+export const ElectricScooterWidget = forwardRef<
+  HTMLDivElement,
+  ElectricScooterWidgetProps
+>(
+  (
+    {
+      className,
+      title = "Electric Scooter",
+      date = "12 Aug 2024",
+      distance = "3.2km",
+      avgSpeed = "18.4km/h",
+      duration = "22 min",
+      image = "/scooter.png",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="electric-scooter-widget"
+      className={cn(
+        "flex w-72 items-stretch gap-3 rounded-3xl border border-neutral-100 bg-white p-3 font-sans shadow-lg",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative h-28 w-24 shrink-0 overflow-hidden rounded-2xl bg-neutral-50">
+        <Image
+          src={image}
+          alt={title}
+          fill
+          className="object-contain p-2"
+          sizes="96px"
+        />
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col justify-between py-1">
+        <div className="flex items-start justify-between">
+          <div>
+            <p className="text-sm font-bold text-neutral-900">{title}</p>
+            <p className="text-[10px] text-neutral-500">{date}</p>
+          </div>
+          <Leaf size={14} className="text-emerald-500" aria-hidden />
+        </div>
+
+        <div className="grid grid-cols-3 gap-1 border-t border-neutral-100 pt-2">
+          <div>
+            <p className="text-[9px] text-neutral-400">Distance</p>
+            <p className="text-[10px] font-semibold">{distance}</p>
+          </div>
+          <div>
+            <p className="text-[9px] text-neutral-400">Avg speed</p>
+            <p className="text-[10px] font-semibold">{avgSpeed}</p>
+          </div>
+          <div>
+            <p className="text-[9px] text-neutral-400">Duration</p>
+            <p className="flex items-center gap-0.5 text-[10px] font-semibold">
+              <Bike size={8} />
+              {duration}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+ElectricScooterWidget.displayName = "ElectricScooterWidget";