import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { useState as c } from "react";
import { Link as b } from "react-router-dom";
import { useTranslation as C } from "react-i18next";
import { ArrowLeft as h, Palette as o, ChevronRight as p, Globe as u, Bell as g, Star as N, Check as v, Loader2 as S, Lock as P, CheckCircle as L, GripVertical as E, X as U, Search as A, Zap as M, HelpCircle as B, Code2 as X, ArrowRight as G, Info as q } from "lucide-react";
const D = [
  { id: "dark", label: "Dark", dot: "bg-[var(--text-primary)]", active: !0 },
  { id: "light", label: "Light", dot: "bg-[var(--bg-tertiary)]", active: !1 },
  { id: "corporate", label: "Corporate", dot: "bg-[var(--color-accent-600)]", active: !1 }
], K = [
  { id: "indigo", label: "Indigo", color: "#6366f1", active: !0 },
  { id: "violet", label: "Violet", color: "#8b5cf6", active: !1 },
  { id: "emerald", label: "Emerald", color: "#10b981", active: !1 },
  { id: "rose", label: "Rose", color: "#f43f5e", active: !1 }
], F = [
  { code: "fr", label: "Français", flag: "🇫🇷", active: !0 },
  { code: "en", label: "English", flag: "🇬🇧", active: !1 },
  { code: "de", label: "Deutsch", flag: "🇩🇪", active: !1 },
  { code: "it", label: "Italiano", flag: "🇮🇹", active: !1 }
], f = [
  { id: "1", label: "Utilisateurs", app: "Administration", route: "/administration/users" },
  { id: "2", label: "Tickets", app: "Support", route: "/support/tickets" },
  { id: "3", label: "Tenants", app: "Administration", route: "/administration/tenants" }
], I = [
  { id: "4", label: "Permissions", app: "Administration", route: "/administration/permissions" },
  { id: "5", label: "Applications", app: "Administration", route: "/administration/applications" },
  { id: "6", label: "Mon Profil", app: "Mon Espace", route: "/myspace/profile" }
], V = [
  { method: "GET", path: "/api/user/preferences", handler: "GetPreferences" },
  { method: "PUT", path: "/api/user/preferences/selection", handler: "UpdateSelectedTheme" },
  { method: "PUT", path: "/api/user/preferences/language", handler: "UpdateLanguage" },
  { method: "PUT", path: "/api/user/preferences/notifications", handler: "UpdateNotifications" },
  { method: "GET", path: "/api/navigation/module-favorites", handler: "GetFavorites" },
  { method: "PUT", path: "/api/navigation/module-favorites/reorder", handler: "ReorderFavorites" }
], W = [
  { id: "BR-001", category: "Validation", key: "techRef.rules.br001" },
  { id: "BR-002", category: "Sécurité", key: "techRef.rules.br002" },
  { id: "BR-003", category: "Limite", key: "techRef.rules.br003" },
  { id: "BR-004", category: "Scope", key: "techRef.rules.br004" },
  { id: "BR-005", category: "UX", key: "techRef.rules.br005" },
  { id: "BR-006", category: "Sécurité", key: "techRef.rules.br006" }
], H = {
  GET: "bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]",
  PUT: "bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]",
  POST: "bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]",
  DELETE: "bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]"
}, O = [
  { id: "appearance", icon: o, labelKey: "tabs.appearance" },
  { id: "language", icon: u, labelKey: "tabs.language" },
  { id: "notifications", icon: g, labelKey: "tabs.notifications" },
  { id: "favorites", icon: N, labelKey: "tabs.favorites" }
];
function s({ children: a }) {
  return /* @__PURE__ */ r("div", { className: "flex items-start gap-2 px-3 py-2 rounded-md border-l-2 border-[var(--color-accent-500)] bg-[var(--bg-secondary)] text-xs text-[var(--text-secondary)]", children: [
    /* @__PURE__ */ e(q, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-[var(--text-tertiary)]" }),
    /* @__PURE__ */ e("span", { className: "leading-relaxed", children: a })
  ] });
}
function _() {
  const { t: a } = C("docsMyspacePreferences"), [l, y] = c("appearance"), [n, w] = c(!1), [i, k] = c(!0), [d, T] = c(!0), [m, R] = c(!1), [$, j] = c("");
  return /* @__PURE__ */ r("div", { className: "space-y-8 max-w-5xl mx-auto pb-12", children: [
    /* @__PURE__ */ r(
      b,
      {
        to: "/system/docs/user",
        className: "inline-flex items-center gap-1.5 text-sm text-[var(--color-accent-500)] hover:text-[var(--color-accent-600)] transition-colors",
        children: [
          /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
          a("nav.backToMySpace")
        ]
      }
    ),
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-3", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--color-accent-600)]/10", children: /* @__PURE__ */ e(o, { className: "h-6 w-6 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-[var(--text-primary)]", children: a("title") }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-0.5", children: a("subtitle") })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-3 text-sm text-[var(--text-secondary)]", children: [
        /* @__PURE__ */ r("span", { children: [
          "6 ",
          a("header.businessRules")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ r("span", { children: [
          "6 ",
          a("header.apiEndpoints")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ r("span", { children: [
          "4 ",
          a("header.tabs")
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "1" }),
        a("sections.objective")
      ] }),
      /* @__PURE__ */ e("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)]", children: /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] leading-relaxed", children: a("objective") }) })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "2" }),
        a("sections.access")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)] space-y-3", children: [
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("div", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: a("access.navigation") }),
          /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: "Mon Espace" }),
            /* @__PURE__ */ e(p, { className: "h-3.5 w-3.5 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: a("access.module") })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-3 text-xs", children: [
          /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] font-mono text-[var(--text-secondary)]", children: "/myspace/preferences" }),
          /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--color-accent-600)]/10 border border-[var(--color-accent-600)]/20 text-[var(--color-accent-700)] font-mono", children: a("access.permission") })
        ] }),
        /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-tertiary)]", children: a("access.tabNote") })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "3" }),
        a("sections.tabNav")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-3", children: [
          /* @__PURE__ */ e(o, { className: "h-5 w-5 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("h3", { className: "text-sm font-bold text-[var(--text-primary)]", children: a("tabNav.pageTitle") }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("tabNav.pageSubtitle") })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
          /* @__PURE__ */ e("div", { className: "flex gap-1 border-b border-[var(--border-color)] pb-0", children: O.map((t) => {
            const x = t.icon;
            return /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: () => y(t.id),
                className: `flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors -mb-px ${l === t.id ? "border-[var(--color-accent-600)] text-[var(--color-accent-600)]" : "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
                children: [
                  /* @__PURE__ */ e(x, { className: "w-3.5 h-3.5" }),
                  a(t.labelKey)
                ]
              },
              t.id
            );
          }) }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e("span", { children: a("tabNav.currentTab") }),
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-600)] font-medium", children: a(`tabs.${l}`) }),
            /* @__PURE__ */ r("span", { className: "font-mono text-[var(--text-tertiary)]", children: [
              "?tab=",
              l
            ] })
          ] }),
          /* @__PURE__ */ e(s, { children: a("tabNav.annotations.tabs") }),
          /* @__PURE__ */ e(s, { children: a("tabNav.annotations.url") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "4" }),
        a("sections.appearance")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(o, { className: "h-4 w-4 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: a("tabs.appearance") })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: a("appearance.themeSectionLabel") }),
            /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: D.map((t) => /* @__PURE__ */ r(
              "div",
              {
                className: `p-3 rounded-lg border cursor-pointer flex items-center gap-2 ${t.active ? "border-[var(--color-accent-600)] bg-[var(--color-accent-600)]/5" : "border-[var(--border-color)] bg-[var(--bg-secondary)]"}`,
                children: [
                  /* @__PURE__ */ e("div", { className: `w-3 h-3 rounded-full ${t.dot} border border-[var(--border-color)] flex-shrink-0` }),
                  /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[var(--text-primary)] min-w-0 truncate", children: t.label }),
                  t.active && /* @__PURE__ */ e(v, { className: "w-3 h-3 text-[var(--color-accent-600)] ml-auto flex-shrink-0" })
                ]
              },
              t.id
            )) })
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: a("appearance.presetSectionLabel") }),
            /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: K.map((t) => /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                className: `flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors ${t.active ? "border-[var(--color-accent-600)] bg-[var(--color-accent-600)]/5 text-[var(--color-accent-700)]" : "border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-secondary)]"}`,
                children: [
                  /* @__PURE__ */ e("span", { className: "w-3 h-3 rounded-full flex-shrink-0", style: { background: t.color } }),
                  t.label,
                  t.active && /* @__PURE__ */ e(v, { className: "w-3 h-3 text-[var(--color-accent-600)]" })
                ]
              },
              t.id
            )) })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e(S, { className: "w-3.5 h-3.5 animate-spin text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { children: a("appearance.syncLabel") })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)] text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e(P, { className: "w-3.5 h-3.5 flex-shrink-0 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("span", { children: a("appearance.lockedMessage") })
          ] }),
          /* @__PURE__ */ e(s, { children: a("appearance.annotations.themes") }),
          /* @__PURE__ */ e(s, { children: a("appearance.annotations.presets") }),
          /* @__PURE__ */ e(s, { children: a("appearance.annotations.sync") }),
          /* @__PURE__ */ e(s, { children: a("appearance.annotations.lock") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "5" }),
        a("sections.language")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(u, { className: "h-4 w-4 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: a("tabs.language") })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2", children: F.map((t) => /* @__PURE__ */ r(
            "div",
            {
              className: `flex items-center gap-3 p-3 rounded-lg border cursor-pointer ${t.active ? "border-[var(--color-accent-600)] bg-[var(--color-accent-600)]/5" : "border-[var(--border-color)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-hover)]"}`,
              children: [
                /* @__PURE__ */ e("span", { className: "text-base", children: t.flag }),
                /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)] flex-1", children: t.label }),
                /* @__PURE__ */ e("span", { className: "text-xs font-mono text-[var(--text-tertiary)]", children: t.code.toUpperCase() }),
                t.active && /* @__PURE__ */ e(v, { className: "w-4 h-4 text-[var(--color-accent-600)]" })
              ]
            },
            t.code
          )) }),
          /* @__PURE__ */ e(s, { children: a("language.annotations.selection") }),
          /* @__PURE__ */ e(s, { children: a("language.annotations.realtime") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "6" }),
        a("sections.notifications")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(g, { className: "h-4 w-4 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: a("tabs.notifications") })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
          /* @__PURE__ */ r("div", { className: "space-y-3", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ r("div", { children: [
                /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: a("notifications.email.label") }),
                /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("notifications.email.desc") })
              ] }),
              /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => k(!i),
                  className: `relative w-10 h-5.5 rounded-full transition-colors ${i ? "bg-[var(--color-accent-600)]" : "bg-[var(--bg-tertiary)]"}`,
                  style: { minWidth: "2.5rem", height: "1.375rem" },
                  children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: "absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-[var(--bg-card)] shadow transition-transform",
                      style: { transform: i ? "translateX(1.125rem)" : "translateX(0)" }
                    }
                  )
                }
              )
            ] }),
            /* @__PURE__ */ r("div", { className: "flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ r("div", { children: [
                /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: a("notifications.security.label") }),
                /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("notifications.security.desc") })
              ] }),
              /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => T(!d),
                  className: `relative rounded-full transition-colors ${d ? "bg-[var(--color-accent-600)]" : "bg-[var(--bg-tertiary)]"}`,
                  style: { minWidth: "2.5rem", height: "1.375rem" },
                  children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: "absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-[var(--bg-card)] shadow transition-transform",
                      style: { transform: d ? "translateX(1.125rem)" : "translateX(0)" }
                    }
                  )
                }
              )
            ] }),
            /* @__PURE__ */ r("div", { className: "flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ r("div", { children: [
                /* @__PURE__ */ e("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: a("notifications.updates.label") }),
                /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("notifications.updates.desc") })
              ] }),
              /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => R(!m),
                  className: `relative rounded-full transition-colors ${m ? "bg-[var(--color-accent-600)]" : "bg-[var(--bg-tertiary)]"}`,
                  style: { minWidth: "2.5rem", height: "1.375rem" },
                  children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: "absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-[var(--bg-card)] shadow transition-transform",
                      style: { transform: m ? "translateX(1.125rem)" : "translateX(0)" }
                    }
                  )
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e(L, { className: "w-3.5 h-3.5 text-[var(--success-text)]" }),
            /* @__PURE__ */ e("span", { children: a("notifications.autoSaveLabel") })
          ] }),
          /* @__PURE__ */ e(s, { children: a("notifications.annotations.toggles") }),
          /* @__PURE__ */ e(s, { children: a("notifications.annotations.debounce") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "7" }),
        a("sections.favorites")
      ] }),
      /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ r("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center justify-between", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(N, { className: "h-4 w-4 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: a("tabs.favorites") })
          ] }),
          /* @__PURE__ */ r("span", { className: "text-xs px-2 py-0.5 rounded-full bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: [
            f.length,
            "/5"
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4 space-y-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: a("favorites.currentLabel") }),
            /* @__PURE__ */ e("div", { className: "space-y-1.5", children: f.map((t) => /* @__PURE__ */ r(
              "div",
              {
                className: "flex items-center gap-2 p-2.5 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]",
                children: [
                  /* @__PURE__ */ e(E, { className: "w-3.5 h-3.5 text-[var(--text-tertiary)] cursor-grab flex-shrink-0" }),
                  /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
                    /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-primary)] truncate", children: t.label }),
                    /* @__PURE__ */ e("p", { className: "text-[10px] text-[var(--text-tertiary)] truncate", children: t.app })
                  ] }),
                  /* @__PURE__ */ e("button", { type: "button", className: "p-0.5 text-[var(--text-tertiary)] hover:text-[var(--error-text)] flex-shrink-0", children: /* @__PURE__ */ e(U, { className: "w-3 h-3" }) })
                ]
              },
              t.id
            )) })
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: a("favorites.addLabel") }),
            /* @__PURE__ */ r("div", { className: "relative mb-2", children: [
              /* @__PURE__ */ e(A, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-tertiary)]" }),
              /* @__PURE__ */ e(
                "input",
                {
                  type: "text",
                  value: $,
                  onChange: (t) => j(t.target.value),
                  placeholder: a("favorites.searchPlaceholder"),
                  className: "w-full pl-8 pr-3 py-1.5 text-xs border border-[var(--border-color)] rounded-lg bg-[var(--bg-secondary)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)]"
                }
              )
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-1", children: I.map((t) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2 p-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors", children: [
              /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
                /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-primary)] truncate", children: t.label }),
                /* @__PURE__ */ e("p", { className: "text-[10px] text-[var(--text-tertiary)] truncate", children: t.app })
              ] }),
              /* @__PURE__ */ e("button", { type: "button", className: "w-4 h-4 rounded border border-[var(--border-color)] bg-[var(--bg-primary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e("span", { className: "text-[8px] text-[var(--text-tertiary)]", children: "+" }) })
            ] }, t.id)) })
          ] }),
          /* @__PURE__ */ e(s, { children: a("favorites.annotations.limit") }),
          /* @__PURE__ */ e(s, { children: a("favorites.annotations.drag") }),
          /* @__PURE__ */ e(s, { children: a("favorites.annotations.sidebar") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "8" }),
        a("sections.useCases")
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [1, 2, 3].map((t) => /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ e("div", { className: "text-xs font-semibold text-[var(--color-accent-600)] uppercase tracking-wide mb-1", children: a(`useCases.${t}.persona`) }),
        /* @__PURE__ */ e("p", { className: "text-sm font-medium mb-2", children: a(`useCases.${t}.situation`) }),
        /* @__PURE__ */ e("div", { className: "pt-2 border-t border-[var(--border-color)]", children: /* @__PURE__ */ r("p", { className: "text-xs text-[var(--text-secondary)]", children: [
          /* @__PURE__ */ r("span", { className: "font-medium text-[var(--success-text)]", children: [
            a("useCases.withLabel"),
            " "
          ] }),
          a(`useCases.${t}.outcome`)
        ] }) })
      ] }, `usecase-${t}`)) })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "9" }),
        a("sections.features")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)] flex gap-4", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--color-accent-600)]/10 flex-shrink-0 h-fit", children: /* @__PURE__ */ e(M, { className: "h-4 w-4 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-1", children: a(`features.${t}.title`) }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mb-2", children: a(`features.${t}.desc`) }),
          /* @__PURE__ */ r("div", { className: "px-3 py-1.5 rounded-md bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ e("span", { className: "font-medium text-[var(--color-accent-600)]", children: "Ex. " }),
            a(`features.${t}.example`)
          ] })
        ] })
      ] }, `feature-${t}`)) })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-7 h-7 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-xs font-bold", children: "10" }),
        a("sections.faq")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ r("div", { className: "border border-[var(--border-color)] rounded-[var(--radius-card)] p-4 bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ r("div", { className: "flex items-start gap-2 mb-2", children: [
          /* @__PURE__ */ e(B, { className: "h-4 w-4 text-[var(--color-accent-600)] flex-shrink-0 mt-0.5" }),
          /* @__PURE__ */ e("h3", { className: "text-sm font-medium", children: a(`faq.${t}.question`) })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] pl-6", children: a(`faq.${t}.answer`) })
      ] }, `faq-${t}`)) })
    ] }),
    /* @__PURE__ */ r("section", { children: [
      /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          onClick: () => w(!n),
          className: "w-full flex items-center justify-between p-4 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)] hover:bg-[var(--bg-secondary)] transition-colors",
          children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(X, { className: "h-4 w-4 text-[var(--text-tertiary)]" }),
              /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: a("sections.techRef") })
            ] }),
            /* @__PURE__ */ e(p, { className: `h-4 w-4 text-[var(--text-tertiary)] transition-transform ${n ? "rotate-90" : ""}` })
          ]
        }
      ),
      n && /* @__PURE__ */ r("div", { className: "mt-2 border border-[var(--border-color)] rounded-[var(--radius-card)] bg-[var(--bg-card)] divide-y divide-[var(--border-color)]", children: [
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: a("techRef.rulesTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: W.map((t) => /* @__PURE__ */ r("div", { className: "p-3 rounded-lg bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-1", children: [
              /* @__PURE__ */ e("span", { className: "font-mono text-[var(--color-accent-600)]", children: t.id }),
              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)]", children: t.category })
            ] }),
            /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: a(t.key) })
          ] }, t.id)) })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: a("techRef.permissionsTitle") }),
          /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-xs", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-secondary)] font-medium", children: "Permission" }),
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-secondary)] font-medium", children: "Description" })
            ] }) }),
            /* @__PURE__ */ r("tbody", { children: [
              /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
                /* @__PURE__ */ e("td", { className: "py-2 px-2 font-mono text-[var(--color-accent-600)]", children: "myspace.preferences.read" }),
                /* @__PURE__ */ e("td", { className: "py-2 px-2 text-[var(--text-secondary)]", children: a("techRef.perms.read") })
              ] }),
              /* @__PURE__ */ r("tr", { children: [
                /* @__PURE__ */ e("td", { className: "py-2 px-2 font-mono text-[var(--color-accent-600)]", children: "myspace.preferences.update" }),
                /* @__PURE__ */ e("td", { className: "py-2 px-2 text-[var(--text-secondary)]", children: a("techRef.perms.update") })
              ] })
            ] })
          ] }) })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: a("techRef.endpointsTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: V.map((t, x) => /* @__PURE__ */ r("div", { className: "p-2.5 rounded-lg bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-0.5", children: [
              /* @__PURE__ */ e("span", { className: `font-bold px-1.5 py-0.5 rounded border text-xs ${H[t.method]}`, children: t.method }),
              /* @__PURE__ */ e("code", { className: "text-[var(--text-primary)] min-w-0 truncate", children: t.path })
            ] }),
            /* @__PURE__ */ e("div", { className: "text-[var(--text-secondary)] pl-1", children: t.handler })
          ] }, `ep-${x}`)) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "flex justify-between pt-6 border-t border-[var(--border-color)]", children: [
      /* @__PURE__ */ r(
        b,
        {
          to: "/system/docs/user",
          className: "flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-accent-600)] transition-colors text-sm",
          children: [
            /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
            a("nav.backToMySpace")
          ]
        }
      ),
      /* @__PURE__ */ r(
        b,
        {
          to: "/docs/business/myspace/profile",
          className: "flex items-center gap-2 text-[var(--color-accent-600)] hover:underline text-sm",
          children: [
            a("nav.toProfile"),
            /* @__PURE__ */ e(G, { className: "w-4 h-4" })
          ]
        }
      )
    ] })
  ] });
}
export {
  _ as default
};
//# sourceMappingURL=index-yGJlAS8x.js.map
