@flytedan/flytebot-design-system 0.15.0 → 0.16.0

package/dist/index.js

@@ -5403,6 +5403,43 @@ function savePrefs(prefs, opts) {
   } catch {
   }
 }
+function createLocalStorageAppearanceStore(opts) {
+  const key = opts?.storageKey ?? DEFAULT_STORAGE_KEY;
+  const storage = resolveStorage(opts);
+  let snapshot = loadPrefs(opts);
+  const listeners3 = /* @__PURE__ */ new Set();
+  const notify = () => listeners3.forEach((l) => l());
+  const onStorageEvent = (e) => {
+    if (e.key !== null && e.key !== key) return;
+    snapshot = loadPrefs(opts);
+    notify();
+  };
+  return {
+    getSnapshot: () => snapshot,
+    write(prefs) {
+      snapshot = prefs;
+      if (storage) {
+        try {
+          storage.setItem(key, JSON.stringify(prefs));
+        } catch {
+        }
+      }
+      notify();
+    },
+    subscribe(onChange) {
+      listeners3.add(onChange);
+      if (listeners3.size === 1 && typeof window !== "undefined") {
+        window.addEventListener("storage", onStorageEvent);
+      }
+      return () => {
+        listeners3.delete(onChange);
+        if (listeners3.size === 0 && typeof window !== "undefined") {
+          window.removeEventListener("storage", onStorageEvent);
+        }
+      };
+    }
+  };
+}
 function applyPrefs(prefs, root = document.documentElement) {
   root.setAttribute("data-theme", resolveTheme(prefs.theme));
   root.setAttribute("data-text-scale", prefs.textScale);
@@ -5411,11 +5448,10 @@ function applyPrefs(prefs, root = document.documentElement) {
   if (prefs.reduceMotion) root.setAttribute("data-motion", "reduce");
   else root.removeAttribute("data-motion");
 }
-function useAppearancePrefs(opts) {
-  const [prefs, setPrefs] = React33.useState(() => loadPrefs(opts));
+function useAppearancePrefs(store) {
+  const prefs = React33.useSyncExternalStore(store.subscribe, store.getSnapshot);
   React33.useEffect(() => {
     applyPrefs(prefs);
-    savePrefs(prefs, opts);
   }, [prefs]);
   React33.useEffect(() => {
     if (prefs.theme !== "system" || typeof window === "undefined" || typeof window.matchMedia !== "function") {
@@ -5426,9 +5462,12 @@ function useAppearancePrefs(opts) {
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [prefs]);
-  const update = React33.useCallback((patch) => {
-    setPrefs((p) => ({ ...p, ...patch }));
-  }, []);
+  const update = React33.useCallback(
+    (patch) => {
+      store.write({ ...store.getSnapshot(), ...patch });
+    },
+    [store]
+  );
   return [prefs, update];
 }
 
@@ -5445,8 +5484,12 @@ var TEXT_SCALE_OPTIONS = [
   { value: "lg", label: "L" },
   { value: "xl", label: "XL" }
 ];
-function AppearanceMenu({ className = "", ...storeOptions }) {
-  const [prefs, update] = useAppearancePrefs(storeOptions);
+function AppearanceMenu({ className = "", store: storeProp, storageKey, storage, defaults }) {
+  const store = React34.useMemo(
+    () => storeProp ?? createLocalStorageAppearanceStore({ storageKey, storage, defaults }),
+    [storeProp, storageKey, storage, defaults]
+  );
+  const [prefs, update] = useAppearancePrefs(store);
   const [open, setOpen] = React34.useState(false);
   const anchorRef = React34.useRef(null);
   const patch = (p) => update(p);
@@ -5683,137 +5726,172 @@ function ApiSpecBrowser({
 // src/components/platform/ProfilePage.tsx
 import * as React36 from "react";
 import { jsx as jsx61, jsxs as jsxs57 } from "react/jsx-runtime";
-var TIMEZONES = ["America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Anchorage", "Pacific/Honolulu", "Europe/London", "Europe/Berlin"];
-var NOTIFY = [
-  { key: "planShared", label: "A plan is shared with me", detail: "Someone sends you a plan or a client link." },
-  { key: "planChanged", label: "A plan I own changes", detail: "Budget moves, campuses added or removed." },
-  { key: "goalMissed", label: "The reviewer flags a missed criterion", detail: "After every solve, if a criterion is short." },
-  { key: "flagChanged", label: "A feature flag affecting me changes", detail: "Someone toggles a feature you can see." },
-  { key: "weekly", label: "Weekly digest", detail: "Monday summary of plan activity." }
-];
-function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSessions = true, className = "", ...rest }) {
+function fieldInitialValue(field, user) {
+  if (field.value) return field.value(user);
+  const raw = user[field.key];
+  return raw == null ? "" : String(raw);
+}
+function groupFields(fields) {
+  const order = [];
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const field of fields) {
+    const group = field.group ?? "Identity";
+    if (!byGroup.has(group)) {
+      byGroup.set(group, { group, description: field.groupDescription, fields: [] });
+      order.push(group);
+    }
+    const entry = byGroup.get(group);
+    if (entry.description === void 0) entry.description = field.groupDescription;
+    entry.fields.push(field);
+  }
+  return order.map((g) => byGroup.get(g));
+}
+function ProfilePage({
+  user: userProp,
+  fields = [],
+  notifications = [],
+  extra,
+  onChangePhoto,
+  onSave,
+  onNavigate,
+  sessions,
+  onSignOutEverywhere,
+  className = ""
+}) {
   const { user: sessionUser, roles, permissions, saveProfile: saveProfile2 } = useSessionContext();
   const user = userProp || sessionUser;
-  const [draft, setDraft] = React36.useState(() => ({
-    name: user.name || "",
-    title: user.title || "",
-    email: user.email || "",
-    phone: user.phone || "",
-    timezone: user.timezone || TIMEZONES[2],
-    bio: user.bio || "",
-    notify: user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true }
-  }));
+  const initialFieldValues = React36.useMemo(() => {
+    const values2 = {};
+    for (const field of fields) values2[field.key] = fieldInitialValue(field, user);
+    return values2;
+  }, [user.id, fields]);
+  const initialNotify = React36.useMemo(() => {
+    const values2 = {};
+    for (const n of notifications) values2[n.key] = !!user.notify?.[n.key];
+    return values2;
+  }, [user.id, notifications]);
+  const [values, setValues] = React36.useState(initialFieldValues);
+  const [notify, setNotify] = React36.useState(initialNotify);
   const [saving, setSaving] = React36.useState(false);
   const [saved, setSaved] = React36.useState(false);
-  const set = (k, v) => {
-    setDraft((d) => Object.assign({}, d, { [k]: v }));
+  const [prevUserId, setPrevUserId] = React36.useState(user.id);
+  if (user.id !== prevUserId) {
+    setPrevUserId(user.id);
+    setValues(initialFieldValues);
+    setNotify(initialNotify);
+    setSaved(false);
+  }
+  const setField = (key, v) => {
+    setValues((d) => ({ ...d, [key]: v }));
     setSaved(false);
   };
-  const setNotify = (k) => {
-    setDraft((d) => Object.assign({}, d, { notify: Object.assign({}, d.notify, { [k]: !d.notify[k] }) }));
+  const toggleNotify = (key) => {
+    setNotify((d) => ({ ...d, [key]: !d[key] }));
     setSaved(false);
   };
-  const dirty = draft.name !== (user.name || "") || draft.title !== (user.title || "") || draft.phone !== (user.phone || "") || draft.timezone !== (user.timezone || TIMEZONES[2]) || draft.bio !== (user.bio || "") || JSON.stringify(draft.notify) !== JSON.stringify(user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true });
-  const canSave = !!(onSave || saveProfile2);
+  const dirty = fields.some((f) => values[f.key] !== initialFieldValues[f.key]) || notifications.some((n) => notify[n.key] !== initialNotify[n.key]);
+  const canSave = !!(onSave || saveProfile2) && (fields.length > 0 || notifications.length > 0);
   const save = async () => {
     if (!canSave) return;
     setSaving(true);
-    if (onSave) await onSave(draft);
-    else await saveProfile2(draft);
-    setSaving(false);
-    setSaved(true);
+    const draft = { ...values };
+    if (notifications.length > 0) draft.notify = notify;
+    try {
+      if (onSave) await onSave(draft);
+      else await saveProfile2(draft);
+      setSaved(true);
+    } finally {
+      setSaving(false);
+    }
   };
-  const liveSessions = sessions || [
-    { id: "s1", device: "MacBook Pro \xB7 Chrome", where: "Denver, CO", when: "Active now", current: true },
-    { id: "s2", device: "iPhone 15 \xB7 Safari", where: "Denver, CO", when: "2 hours ago" },
-    { id: "s3", device: "Windows \xB7 Edge", where: "Chicago, IL", when: "Aug 12" }
-  ];
-  return /* @__PURE__ */ jsxs57("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 20, maxWidth: 860 }, ...rest, children: [
+  const discard = () => {
+    setValues(initialFieldValues);
+    setNotify(initialNotify);
+    setSaved(false);
+  };
+  const displayName = fields.some((f) => f.key === "name") ? values.name || user.name : user.name;
+  const fieldGroups = groupFields(fields);
+  return /* @__PURE__ */ jsxs57("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 20, maxWidth: 860 }, children: [
     /* @__PURE__ */ jsxs57("div", { className: "fd-stack", style: { gap: 10 }, children: [
       /* @__PURE__ */ jsx61("span", { className: "fd-overline fd-muted", children: "Account" }),
       /* @__PURE__ */ jsx61("h1", { className: "fd-h1", style: { margin: 0 }, children: "Your profile" }),
       /* @__PURE__ */ jsx61("p", { className: "fd-body fd-secondary fd-prose", style: { margin: 0 }, children: "How you appear to colleagues and clients across every flytedesk app, and what we send you." })
     ] }),
     /* @__PURE__ */ jsx61(Card, { elevation: "flat", children: /* @__PURE__ */ jsxs57("div", { className: "fd-row", style: { gap: 16, flexWrap: "wrap", alignItems: "flex-start" }, children: [
-      /* @__PURE__ */ jsx61(Avatar, { name: draft.name || user.name, size: "lg" }),
+      /* @__PURE__ */ jsx61(Avatar, { name: displayName, size: "lg" }),
       /* @__PURE__ */ jsxs57("div", { className: "fd-stack", style: { gap: 4, flex: 1, minWidth: 200 }, children: [
-        /* @__PURE__ */ jsx61("span", { className: "fd-h3", style: { margin: 0 }, children: draft.name || user.name }),
-        /* @__PURE__ */ jsxs57("span", { className: "fd-body-sm fd-muted", children: [
-          draft.title || "No title set",
-          " \xB7 ",
-          user.team || "No team"
-        ] }),
+        /* @__PURE__ */ jsx61("span", { className: "fd-h3", style: { margin: 0 }, children: displayName }),
         /* @__PURE__ */ jsxs57("span", { className: "fd-row", style: { gap: 6, flexWrap: "wrap", paddingTop: 4 }, children: [
           roles.map((r) => /* @__PURE__ */ jsx61(Badge, { tone: r.id === "owner" ? "success" : "neutral", children: r.name }, r.id)),
           user.sso ? /* @__PURE__ */ jsx61(Badge, { tone: "info", icon: "shield-check", children: "SSO" }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsx61(Button, { variant: "secondary", size: "sm", icon: "image", children: "Change photo" })
+      onChangePhoto ? /* @__PURE__ */ jsx61(Button, { variant: "secondary", size: "sm", icon: "image", onClick: onChangePhoto, children: "Change photo" }) : null
     ] }) }),
-    /* @__PURE__ */ jsx61(
+    fieldGroups.map(({ group, description, fields: groupFieldDefs }) => /* @__PURE__ */ jsx61(
       Card,
       {
-        title: /* @__PURE__ */ jsxs57("span", { className: "fd-stack", style: { gap: 2 }, children: [
-          /* @__PURE__ */ jsx61("span", { children: "Identity" }),
-          /* @__PURE__ */ jsx61("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: "Name and title appear on plans you share" })
-        ] }),
+        title: description ? /* @__PURE__ */ jsxs57("span", { className: "fd-stack", style: { gap: 2 }, children: [
+          /* @__PURE__ */ jsx61("span", { children: group }),
+          /* @__PURE__ */ jsx61("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: description })
+        ] }) : group,
         elevation: "flat",
         children: /* @__PURE__ */ jsxs57("div", { className: "fd-stack", style: { gap: 14 }, children: [
-          /* @__PURE__ */ jsxs57("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-            /* @__PURE__ */ jsx61(Input, { label: "Full name", value: draft.name, onChange: (e) => set("name", e.target.value) }),
-            /* @__PURE__ */ jsx61(Input, { label: "Job title", value: draft.title, onChange: (e) => set("title", e.target.value), placeholder: "e.g. Senior media planner" })
-          ] }),
-          /* @__PURE__ */ jsxs57("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-            /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx61("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: groupFieldDefs.filter((f) => f.type !== "textarea").map((field) => {
+            const help = typeof field.help === "function" ? field.help(user) : field.help;
+            const readOnly = field.readOnly || field.type === "readonly";
+            if (field.type === "select") {
+              return /* @__PURE__ */ jsx61(
+                Select,
+                {
+                  label: field.label,
+                  value: values[field.key],
+                  onChange: readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                  options: field.options ?? [],
+                  placeholder: field.placeholder,
+                  help,
+                  disabled: readOnly
+                },
+                field.key
+              );
+            }
+            return /* @__PURE__ */ jsx61(
               Input,
               {
-                label: "Work email",
-                value: draft.email,
-                readOnly: true,
-                disabled: true,
-                help: user.sso ? "Managed by your identity provider \u2014 change it there." : "Contact an administrator to change this."
-              }
-            ),
-            /* @__PURE__ */ jsx61(Input, { label: "Phone", value: draft.phone, onChange: (e) => set("phone", e.target.value), placeholder: "Optional" })
-          ] }),
-          /* @__PURE__ */ jsx61(
-            Textarea,
-            {
-              label: "Short bio",
-              value: draft.bio,
-              onChange: (e) => set("bio", e.target.value),
-              rows: 3,
-              placeholder: "Optional \u2014 shown to colleagues on shared plans.",
-              help: "Never shown to clients."
-            }
-          )
+                label: field.label,
+                value: values[field.key],
+                onChange: readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                readOnly,
+                disabled: readOnly,
+                placeholder: field.placeholder,
+                help
+              },
+              field.key
+            );
+          }) }),
+          groupFieldDefs.filter((f) => f.type === "textarea").map((field) => {
+            const help = typeof field.help === "function" ? field.help(user) : field.help;
+            return /* @__PURE__ */ jsx61(
+              Textarea,
+              {
+                label: field.label,
+                value: values[field.key],
+                onChange: field.readOnly ? void 0 : (e) => setField(field.key, e.target.value),
+                readOnly: field.readOnly,
+                disabled: field.readOnly,
+                rows: field.rows ?? 3,
+                placeholder: field.placeholder,
+                help
+              },
+              field.key
+            );
+          })
         ] })
-      }
-    ),
-    /* @__PURE__ */ jsx61(Card, { title: "Working preferences", elevation: "flat", children: /* @__PURE__ */ jsxs57("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 14 }, children: [
-      /* @__PURE__ */ jsx61(
-        Select,
-        {
-          label: "Time zone",
-          value: draft.timezone,
-          onChange: (e) => set("timezone", e.target.value),
-          options: TIMEZONES,
-          help: "Flight dates and schedules render in this zone."
-        }
-      ),
-      /* @__PURE__ */ jsx61(Select, { label: "Start of week", options: ["Monday", "Sunday"], placeholder: "Monday" })
-    ] }) }),
-    /* @__PURE__ */ jsx61(
-      Card,
-      {
-        title: /* @__PURE__ */ jsxs57("span", { className: "fd-stack", style: { gap: 2 }, children: [
-          /* @__PURE__ */ jsx61("span", { children: "Notifications" }),
-          /* @__PURE__ */ jsx61("span", { className: "fd-body-sm fd-muted", style: { fontWeight: 400 }, children: "Email only for now \u2014 in-app notifications are on the roadmap" })
-        ] }),
-        elevation: "flat",
-        children: /* @__PURE__ */ jsx61("div", { className: "fd-stack", style: { gap: 14 }, children: NOTIFY.map((n) => /* @__PURE__ */ jsx61(Switch, { checked: !!draft.notify[n.key], onChange: () => setNotify(n.key), label: n.label, description: n.detail }, n.key)) })
-      }
-    ),
+      },
+      group
+    )),
+    extra,
+    notifications.length > 0 ? /* @__PURE__ */ jsx61(Card, { title: "Notifications", elevation: "flat", children: /* @__PURE__ */ jsx61("div", { className: "fd-stack", style: { gap: 14 }, children: notifications.map((n) => /* @__PURE__ */ jsx61(Switch, { checked: !!notify[n.key], onChange: () => toggleNotify(n.key), label: n.label, description: n.description }, n.key)) }) }) : null,
     /* @__PURE__ */ jsxs57(
       Card,
       {
@@ -5845,13 +5923,13 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
         ]
       }
     ),
-    showSessions ? /* @__PURE__ */ jsx61(
+    sessions ? /* @__PURE__ */ jsx61(
       Card,
       {
         title: "Signed-in devices",
         elevation: "flat",
-        action: /* @__PURE__ */ jsx61(Button, { size: "sm", variant: "ghost", icon: "sign-out", children: "Sign out everywhere" }),
-        children: /* @__PURE__ */ jsx61("div", { className: "fd-stack", style: { gap: 0 }, children: liveSessions.map((s) => /* @__PURE__ */ jsxs57("div", { className: "fd-row", style: { gap: 12, padding: "10px 0", borderTop: "1px solid var(--border)", flexWrap: "wrap" }, children: [
+        action: /* @__PURE__ */ jsx61(Button, { size: "sm", variant: "ghost", icon: "sign-out", onClick: onSignOutEverywhere, children: "Sign out everywhere" }),
+        children: /* @__PURE__ */ jsx61("div", { className: "fd-stack", style: { gap: 0 }, children: sessions.length === 0 ? /* @__PURE__ */ jsx61("p", { className: "fd-body-sm fd-muted", style: { margin: 0 }, children: "No other signed-in devices." }) : sessions.map((s) => /* @__PURE__ */ jsxs57("div", { className: "fd-row", style: { gap: 12, padding: "10px 0", borderTop: "1px solid var(--border)", flexWrap: "wrap" }, children: [
           /* @__PURE__ */ jsx61("i", { className: "ph ph-device-mobile", style: { fontSize: 16, color: "var(--text-muted)" }, "aria-hidden": "true" }),
           /* @__PURE__ */ jsxs57("span", { className: "fd-stack", style: { gap: 1, flex: 1, minWidth: 160 }, children: [
             /* @__PURE__ */ jsx61("span", { className: "fd-body-sm", style: { fontWeight: 600 }, children: s.device }),
@@ -5877,19 +5955,7 @@ function ProfilePage({ user: userProp, onSave, onNavigate, sessions, showSession
       boxShadow: "0 -4px 16px rgba(11,13,17,.06)"
     }, children: [
       /* @__PURE__ */ jsx61("span", { className: "fd-body-sm", style: { fontWeight: 600, flex: 1 }, children: saved ? "Saved." : dirty ? "Unsaved changes" : "No pending changes" }),
-      /* @__PURE__ */ jsx61(
-        Button,
-        {
-          size: "sm",
-          variant: "ghost",
-          disabled: !dirty || saving,
-          onClick: () => {
-            setDraft({ name: user.name || "", title: user.title || "", email: user.email || "", phone: user.phone || "", timezone: user.timezone || TIMEZONES[2], bio: user.bio || "", notify: user.notify || { planShared: true, planChanged: true, goalMissed: true, flagChanged: false, weekly: true } });
-            setSaved(false);
-          },
-          children: "Discard"
-        }
-      ),
+      /* @__PURE__ */ jsx61(Button, { size: "sm", variant: "ghost", disabled: !dirty || saving, onClick: discard, children: "Discard" }),
       /* @__PURE__ */ jsx61(Button, { size: "sm", icon: "check", disabled: !dirty || !canSave, loading: saving, onClick: save, children: "Save changes" })
     ] })
   ] });
@@ -11734,6 +11800,7 @@ export {
   channelWeightOf,
   computeNeedMore,
   computeVirtualWindow,
+  createLocalStorageAppearanceStore,
   createVersionStore,
   eqFilter,
   extensionOf,