@xenide-io/the-old-ui-theme 0.4.6 → 0.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai-message-blocknote-4Q4U2T2W.mjs +63 -0
- package/dist/chunk-IAH7Z46I.mjs +104 -0
- package/dist/suite.js +501 -240
- package/dist/suite.mjs +291 -199
- package/package.json +3 -1
- package/src/styles/suite-skin.css +22 -0
- package/src/suite/components/ai-message-blocknote.test.tsx +40 -0
- package/src/suite/components/ai-message-blocknote.tsx +61 -0
- package/src/suite/components/ai-panel.test.ts +20 -0
- package/src/suite/components/ai-panel.tsx +255 -12
package/dist/suite.mjs
CHANGED
|
@@ -3,6 +3,10 @@ import {
|
|
|
3
3
|
DropdownMenu,
|
|
4
4
|
Tooltip
|
|
5
5
|
} from "./chunk-G53YLHVE.mjs";
|
|
6
|
+
import {
|
|
7
|
+
SuiteThemeProvider,
|
|
8
|
+
useSuiteTheme
|
|
9
|
+
} from "./chunk-IAH7Z46I.mjs";
|
|
6
10
|
import {
|
|
7
11
|
__spreadProps,
|
|
8
12
|
__spreadValues
|
|
@@ -1979,110 +1983,20 @@ function TodayCalibrating({
|
|
|
1979
1983
|
);
|
|
1980
1984
|
}
|
|
1981
1985
|
|
|
1982
|
-
// src/suite/components/
|
|
1986
|
+
// src/suite/components/ai-panel.tsx
|
|
1983
1987
|
import {
|
|
1984
|
-
|
|
1988
|
+
lazy,
|
|
1989
|
+
Suspense,
|
|
1985
1990
|
useCallback as useCallback2,
|
|
1986
|
-
useContext,
|
|
1987
1991
|
useEffect as useEffect6,
|
|
1988
|
-
useMemo,
|
|
1989
|
-
useState as useState7
|
|
1990
|
-
} from "react";
|
|
1991
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1992
|
-
var SuiteThemeContext = createContext(null);
|
|
1993
|
-
function systemTheme(fallback) {
|
|
1994
|
-
if (typeof window === "undefined") return fallback;
|
|
1995
|
-
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
1996
|
-
}
|
|
1997
|
-
function resolveTheme(theme, fallback) {
|
|
1998
|
-
return theme === "system" ? systemTheme(fallback) : theme;
|
|
1999
|
-
}
|
|
2000
|
-
function applyTheme(theme, config) {
|
|
2001
|
-
const resolved = resolveTheme(theme, config.fallbackTheme);
|
|
2002
|
-
if (typeof document === "undefined") return resolved;
|
|
2003
|
-
document.documentElement.setAttribute(
|
|
2004
|
-
"data-theme",
|
|
2005
|
-
resolved === "dark" ? config.darkThemeId : config.lightThemeId
|
|
2006
|
-
);
|
|
2007
|
-
document.documentElement.classList.toggle("dark", resolved === "dark");
|
|
2008
|
-
if (config.themeColorLight && config.themeColorDark) {
|
|
2009
|
-
const meta = document.getElementById(
|
|
2010
|
-
"theme-color-meta"
|
|
2011
|
-
);
|
|
2012
|
-
if (meta) {
|
|
2013
|
-
meta.content = resolved === "light" ? config.themeColorLight : config.themeColorDark;
|
|
2014
|
-
}
|
|
2015
|
-
}
|
|
2016
|
-
return resolved;
|
|
2017
|
-
}
|
|
2018
|
-
function readStoredTheme(storageKey) {
|
|
2019
|
-
if (typeof window === "undefined") return "system";
|
|
2020
|
-
const stored = localStorage.getItem(storageKey);
|
|
2021
|
-
if (stored === "light" || stored === "dark" || stored === "system")
|
|
2022
|
-
return stored;
|
|
2023
|
-
return "system";
|
|
2024
|
-
}
|
|
2025
|
-
function SuiteThemeProvider({
|
|
2026
|
-
config,
|
|
2027
|
-
children
|
|
2028
|
-
}) {
|
|
2029
|
-
const [state, setState] = useState7(() => {
|
|
2030
|
-
const theme2 = readStoredTheme(config.storageKey);
|
|
2031
|
-
if (typeof document === "undefined") {
|
|
2032
|
-
return { theme: theme2, resolvedTheme: config.fallbackTheme };
|
|
2033
|
-
}
|
|
2034
|
-
const domTheme = document.documentElement.getAttribute("data-theme");
|
|
2035
|
-
const resolvedTheme2 = domTheme === config.darkThemeId ? "dark" : domTheme === config.lightThemeId ? "light" : resolveTheme(theme2, config.fallbackTheme);
|
|
2036
|
-
return { theme: theme2, resolvedTheme: resolvedTheme2 };
|
|
2037
|
-
});
|
|
2038
|
-
const { theme, resolvedTheme } = state;
|
|
2039
|
-
useEffect6(() => {
|
|
2040
|
-
if (theme !== "system") return;
|
|
2041
|
-
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
2042
|
-
const update = () => {
|
|
2043
|
-
const resolved = applyTheme("system", config);
|
|
2044
|
-
setState((current) => __spreadProps(__spreadValues({}, current), { resolvedTheme: resolved }));
|
|
2045
|
-
};
|
|
2046
|
-
media.addEventListener("change", update);
|
|
2047
|
-
return () => media.removeEventListener("change", update);
|
|
2048
|
-
}, [theme, config]);
|
|
2049
|
-
const setTheme = useCallback2(
|
|
2050
|
-
(next) => {
|
|
2051
|
-
const resolved = applyTheme(next, config);
|
|
2052
|
-
setState({ theme: next, resolvedTheme: resolved });
|
|
2053
|
-
localStorage.setItem(config.storageKey, next);
|
|
2054
|
-
},
|
|
2055
|
-
[config]
|
|
2056
|
-
);
|
|
2057
|
-
const toggleTheme = useCallback2(() => {
|
|
2058
|
-
setState((prev) => {
|
|
2059
|
-
const next = resolveTheme(prev.theme, config.fallbackTheme) === "dark" ? "light" : "dark";
|
|
2060
|
-
const resolved = applyTheme(next, config);
|
|
2061
|
-
localStorage.setItem(config.storageKey, next);
|
|
2062
|
-
return { theme: next, resolvedTheme: resolved };
|
|
2063
|
-
});
|
|
2064
|
-
}, [config]);
|
|
2065
|
-
const value = useMemo(
|
|
2066
|
-
() => ({ theme, resolvedTheme, setTheme, toggleTheme }),
|
|
2067
|
-
[theme, resolvedTheme, setTheme, toggleTheme]
|
|
2068
|
-
);
|
|
2069
|
-
return /* @__PURE__ */ jsx17(SuiteThemeContext.Provider, { value, children });
|
|
2070
|
-
}
|
|
2071
|
-
function useSuiteTheme() {
|
|
2072
|
-
const ctx = useContext(SuiteThemeContext);
|
|
2073
|
-
if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
|
|
2074
|
-
return ctx;
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
|
-
// src/suite/components/ai-panel.tsx
|
|
2078
|
-
import {
|
|
2079
|
-
useCallback as useCallback3,
|
|
2080
|
-
useEffect as useEffect7,
|
|
2081
1992
|
useRef as useRef3,
|
|
2082
|
-
useState as
|
|
1993
|
+
useState as useState7
|
|
2083
1994
|
} from "react";
|
|
2084
1995
|
import { Check as Check2, Copy, Sparks, Xmark as X2 } from "iconoir-react";
|
|
2085
|
-
import { Fragment as Fragment5, jsx as
|
|
1996
|
+
import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1997
|
+
var SuiteAiBlockNoteMessage = lazy(
|
|
1998
|
+
() => import("./ai-message-blocknote-4Q4U2T2W.mjs")
|
|
1999
|
+
);
|
|
2086
2000
|
var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
|
|
2087
2001
|
function openSuiteAskAi(detail) {
|
|
2088
2002
|
if (typeof window === "undefined") return;
|
|
@@ -2092,6 +2006,22 @@ function openSuiteAskAi(detail) {
|
|
|
2092
2006
|
})
|
|
2093
2007
|
);
|
|
2094
2008
|
}
|
|
2009
|
+
var LAUNCHER_EDGE_GAP = 12;
|
|
2010
|
+
var LAUNCHER_STORAGE_KEY = "suite-ask-ai-launcher-position";
|
|
2011
|
+
function resolveSuiteAiLauncherPosition(side, desiredY, viewportWidth, viewportHeight, launcherWidth, launcherHeight) {
|
|
2012
|
+
const maxX = Math.max(
|
|
2013
|
+
LAUNCHER_EDGE_GAP,
|
|
2014
|
+
viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP
|
|
2015
|
+
);
|
|
2016
|
+
const maxY = Math.max(
|
|
2017
|
+
LAUNCHER_EDGE_GAP,
|
|
2018
|
+
viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP
|
|
2019
|
+
);
|
|
2020
|
+
return {
|
|
2021
|
+
x: side === "left" ? LAUNCHER_EDGE_GAP : maxX,
|
|
2022
|
+
y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY)
|
|
2023
|
+
};
|
|
2024
|
+
}
|
|
2095
2025
|
function SuiteAiPanel({
|
|
2096
2026
|
presets = [],
|
|
2097
2027
|
emptyState = "Ask anything about your workspace, or look something up online.",
|
|
@@ -2103,21 +2033,64 @@ function SuiteAiPanel({
|
|
|
2103
2033
|
spinner: Spinner,
|
|
2104
2034
|
hideLauncher = false
|
|
2105
2035
|
}) {
|
|
2106
|
-
const [open, setOpen] =
|
|
2107
|
-
const [prompt, setPrompt] =
|
|
2108
|
-
const [messages, setMessages] =
|
|
2109
|
-
const [loading, setLoading] =
|
|
2110
|
-
const [hydrating, setHydrating] =
|
|
2111
|
-
const [error, setError] =
|
|
2112
|
-
const [copiedId, setCopiedId] =
|
|
2036
|
+
const [open, setOpen] = useState7(false);
|
|
2037
|
+
const [prompt, setPrompt] = useState7("");
|
|
2038
|
+
const [messages, setMessages] = useState7([]);
|
|
2039
|
+
const [loading, setLoading] = useState7(false);
|
|
2040
|
+
const [hydrating, setHydrating] = useState7(false);
|
|
2041
|
+
const [error, setError] = useState7("");
|
|
2042
|
+
const [copiedId, setCopiedId] = useState7(null);
|
|
2043
|
+
const [launcherSide, setLauncherSide] = useState7("right");
|
|
2044
|
+
const [launcherPosition, setLauncherPosition] = useState7(null);
|
|
2045
|
+
const [draggingLauncher, setDraggingLauncher] = useState7(false);
|
|
2113
2046
|
const scrollerRef = useRef3(null);
|
|
2047
|
+
const launcherRef = useRef3(null);
|
|
2048
|
+
const launcherSideRef = useRef3("right");
|
|
2049
|
+
const launcherPositionRef = useRef3(null);
|
|
2050
|
+
const launcherDragRef = useRef3(null);
|
|
2051
|
+
const suppressLauncherClickRef = useRef3(false);
|
|
2114
2052
|
const pendingPromptRef = useRef3(null);
|
|
2115
|
-
|
|
2053
|
+
useEffect6(() => {
|
|
2054
|
+
const launcher = launcherRef.current;
|
|
2055
|
+
if (!launcher) return;
|
|
2056
|
+
let side = "right";
|
|
2057
|
+
let desiredY = window.innerHeight - launcher.offsetHeight - 20;
|
|
2058
|
+
try {
|
|
2059
|
+
const stored = JSON.parse(
|
|
2060
|
+
localStorage.getItem(LAUNCHER_STORAGE_KEY) || "null"
|
|
2061
|
+
);
|
|
2062
|
+
if ((stored == null ? void 0 : stored.side) === "left" || (stored == null ? void 0 : stored.side) === "right")
|
|
2063
|
+
side = stored.side;
|
|
2064
|
+
if (typeof (stored == null ? void 0 : stored.y) === "number") desiredY = stored.y;
|
|
2065
|
+
} catch (e) {
|
|
2066
|
+
}
|
|
2067
|
+
launcherSideRef.current = side;
|
|
2068
|
+
setLauncherSide(side);
|
|
2069
|
+
const placeLauncher = () => {
|
|
2070
|
+
var _a, _b;
|
|
2071
|
+
const element = launcherRef.current;
|
|
2072
|
+
if (!element) return;
|
|
2073
|
+
const next = resolveSuiteAiLauncherPosition(
|
|
2074
|
+
launcherSideRef.current,
|
|
2075
|
+
(_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : desiredY,
|
|
2076
|
+
window.innerWidth,
|
|
2077
|
+
window.innerHeight,
|
|
2078
|
+
element.offsetWidth,
|
|
2079
|
+
element.offsetHeight
|
|
2080
|
+
);
|
|
2081
|
+
launcherPositionRef.current = next;
|
|
2082
|
+
setLauncherPosition(next);
|
|
2083
|
+
};
|
|
2084
|
+
placeLauncher();
|
|
2085
|
+
window.addEventListener("resize", placeLauncher);
|
|
2086
|
+
return () => window.removeEventListener("resize", placeLauncher);
|
|
2087
|
+
}, []);
|
|
2088
|
+
const scrollToBottom = useCallback2(() => {
|
|
2116
2089
|
const el = scrollerRef.current;
|
|
2117
2090
|
if (!el) return;
|
|
2118
2091
|
el.scrollTop = el.scrollHeight;
|
|
2119
2092
|
}, []);
|
|
2120
|
-
const hydrate =
|
|
2093
|
+
const hydrate = useCallback2(async () => {
|
|
2121
2094
|
var _a;
|
|
2122
2095
|
setHydrating(true);
|
|
2123
2096
|
setError("");
|
|
@@ -2135,7 +2108,7 @@ function SuiteAiPanel({
|
|
|
2135
2108
|
setHydrating(false);
|
|
2136
2109
|
}
|
|
2137
2110
|
}, [fetchChat]);
|
|
2138
|
-
|
|
2111
|
+
useEffect6(() => {
|
|
2139
2112
|
function onOpen(event) {
|
|
2140
2113
|
var _a;
|
|
2141
2114
|
const detail = event.detail;
|
|
@@ -2148,7 +2121,7 @@ function SuiteAiPanel({
|
|
|
2148
2121
|
window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
|
|
2149
2122
|
return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
|
|
2150
2123
|
}, []);
|
|
2151
|
-
|
|
2124
|
+
useEffect6(() => {
|
|
2152
2125
|
if (!open) return;
|
|
2153
2126
|
void hydrate().then(() => {
|
|
2154
2127
|
const pending = pendingPromptRef.current;
|
|
@@ -2158,7 +2131,7 @@ function SuiteAiPanel({
|
|
|
2158
2131
|
}
|
|
2159
2132
|
});
|
|
2160
2133
|
}, [open, hydrate]);
|
|
2161
|
-
|
|
2134
|
+
useEffect6(() => {
|
|
2162
2135
|
if (open) scrollToBottom();
|
|
2163
2136
|
}, [messages, loading, open, scrollToBottom]);
|
|
2164
2137
|
async function ask(text) {
|
|
@@ -2207,24 +2180,137 @@ function SuiteAiPanel({
|
|
|
2207
2180
|
} catch (e) {
|
|
2208
2181
|
}
|
|
2209
2182
|
}
|
|
2183
|
+
function saveLauncherPosition(side, position) {
|
|
2184
|
+
try {
|
|
2185
|
+
localStorage.setItem(
|
|
2186
|
+
LAUNCHER_STORAGE_KEY,
|
|
2187
|
+
JSON.stringify({ side, y: position.y })
|
|
2188
|
+
);
|
|
2189
|
+
} catch (e) {
|
|
2190
|
+
}
|
|
2191
|
+
}
|
|
2192
|
+
function dockLauncher(side, desiredY) {
|
|
2193
|
+
const launcher = launcherRef.current;
|
|
2194
|
+
if (!launcher) return;
|
|
2195
|
+
const next = resolveSuiteAiLauncherPosition(
|
|
2196
|
+
side,
|
|
2197
|
+
desiredY,
|
|
2198
|
+
window.innerWidth,
|
|
2199
|
+
window.innerHeight,
|
|
2200
|
+
launcher.offsetWidth,
|
|
2201
|
+
launcher.offsetHeight
|
|
2202
|
+
);
|
|
2203
|
+
launcherSideRef.current = side;
|
|
2204
|
+
launcherPositionRef.current = next;
|
|
2205
|
+
setLauncherSide(side);
|
|
2206
|
+
setLauncherPosition(next);
|
|
2207
|
+
saveLauncherPosition(side, next);
|
|
2208
|
+
}
|
|
2209
|
+
function startLauncherDrag(event) {
|
|
2210
|
+
if (event.pointerType === "mouse" && event.button !== 0) return;
|
|
2211
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
2212
|
+
launcherDragRef.current = {
|
|
2213
|
+
pointerId: event.pointerId,
|
|
2214
|
+
offsetX: event.clientX - rect.left,
|
|
2215
|
+
offsetY: event.clientY - rect.top,
|
|
2216
|
+
startX: event.clientX,
|
|
2217
|
+
startY: event.clientY
|
|
2218
|
+
};
|
|
2219
|
+
suppressLauncherClickRef.current = false;
|
|
2220
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2221
|
+
setDraggingLauncher(true);
|
|
2222
|
+
}
|
|
2223
|
+
function moveLauncher(event) {
|
|
2224
|
+
const drag = launcherDragRef.current;
|
|
2225
|
+
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2226
|
+
const launcher = event.currentTarget;
|
|
2227
|
+
const maxX = Math.max(
|
|
2228
|
+
LAUNCHER_EDGE_GAP,
|
|
2229
|
+
window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP
|
|
2230
|
+
);
|
|
2231
|
+
const maxY = Math.max(
|
|
2232
|
+
LAUNCHER_EDGE_GAP,
|
|
2233
|
+
window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP
|
|
2234
|
+
);
|
|
2235
|
+
const next = {
|
|
2236
|
+
x: Math.min(
|
|
2237
|
+
Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
|
|
2238
|
+
maxX
|
|
2239
|
+
),
|
|
2240
|
+
y: Math.min(
|
|
2241
|
+
Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
|
|
2242
|
+
maxY
|
|
2243
|
+
)
|
|
2244
|
+
};
|
|
2245
|
+
if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4) {
|
|
2246
|
+
suppressLauncherClickRef.current = true;
|
|
2247
|
+
}
|
|
2248
|
+
launcherPositionRef.current = next;
|
|
2249
|
+
setLauncherPosition(next);
|
|
2250
|
+
}
|
|
2251
|
+
function finishLauncherDrag(event) {
|
|
2252
|
+
var _a, _b, _c, _d;
|
|
2253
|
+
const drag = launcherDragRef.current;
|
|
2254
|
+
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2255
|
+
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
|
2256
|
+
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2257
|
+
}
|
|
2258
|
+
launcherDragRef.current = null;
|
|
2259
|
+
setDraggingLauncher(false);
|
|
2260
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
2261
|
+
const currentX = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.x) != null ? _b : rect.left;
|
|
2262
|
+
const side = currentX + rect.width / 2 < window.innerWidth / 2 ? "left" : "right";
|
|
2263
|
+
dockLauncher(side, (_d = (_c = launcherPositionRef.current) == null ? void 0 : _c.y) != null ? _d : rect.top);
|
|
2264
|
+
}
|
|
2265
|
+
function moveLauncherWithKeyboard(event) {
|
|
2266
|
+
var _a, _b;
|
|
2267
|
+
if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
|
|
2268
|
+
return;
|
|
2269
|
+
event.preventDefault();
|
|
2270
|
+
const currentY = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : event.currentTarget.getBoundingClientRect().top;
|
|
2271
|
+
if (event.key === "ArrowLeft") dockLauncher("left", currentY);
|
|
2272
|
+
else if (event.key === "ArrowRight") dockLauncher("right", currentY);
|
|
2273
|
+
else
|
|
2274
|
+
dockLauncher(
|
|
2275
|
+
launcherSideRef.current,
|
|
2276
|
+
currentY + (event.key === "ArrowUp" ? -24 : 24)
|
|
2277
|
+
);
|
|
2278
|
+
}
|
|
2210
2279
|
const Icon = BrandIcon != null ? BrandIcon : Sparks;
|
|
2211
2280
|
return /* @__PURE__ */ jsxs15(Fragment5, { children: [
|
|
2212
|
-
!hideLauncher ? /* @__PURE__ */ jsxs15(
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2281
|
+
!hideLauncher ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
|
|
2282
|
+
/* @__PURE__ */ jsxs15(
|
|
2283
|
+
"button",
|
|
2284
|
+
{
|
|
2285
|
+
ref: launcherRef,
|
|
2286
|
+
type: "button",
|
|
2287
|
+
"data-test": "ai-panel-launcher",
|
|
2288
|
+
onClick: () => {
|
|
2289
|
+
if (suppressLauncherClickRef.current) {
|
|
2290
|
+
suppressLauncherClickRef.current = false;
|
|
2291
|
+
return;
|
|
2292
|
+
}
|
|
2293
|
+
setOpen(true);
|
|
2294
|
+
},
|
|
2295
|
+
onPointerDown: startLauncherDrag,
|
|
2296
|
+
onPointerMove: moveLauncher,
|
|
2297
|
+
onPointerUp: finishLauncherDrag,
|
|
2298
|
+
onPointerCancel: finishLauncherDrag,
|
|
2299
|
+
onKeyDown: moveLauncherWithKeyboard,
|
|
2300
|
+
className: `fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? "cursor-grabbing" : "cursor-grab"}`,
|
|
2301
|
+
style: launcherPosition ? { left: launcherPosition.x, top: launcherPosition.y } : { bottom: 20, right: 20 },
|
|
2302
|
+
"aria-label": "Open Ask AI",
|
|
2303
|
+
"aria-describedby": "suite-ask-ai-launcher-help",
|
|
2304
|
+
children: [
|
|
2305
|
+
/* @__PURE__ */ jsx17(Icon, { className: "h-4 w-4 text-ph-brand" }),
|
|
2306
|
+
"Ask AI"
|
|
2307
|
+
]
|
|
2308
|
+
}
|
|
2309
|
+
),
|
|
2310
|
+
/* @__PURE__ */ jsx17("span", { id: "suite-ask-ai-launcher-help", className: "sr-only", children: "Drag to reposition, or use arrow keys. The launcher docks to the nearest screen edge." })
|
|
2311
|
+
] }) : null,
|
|
2226
2312
|
open ? /* @__PURE__ */ jsxs15("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
|
|
2227
|
-
/* @__PURE__ */
|
|
2313
|
+
/* @__PURE__ */ jsx17(
|
|
2228
2314
|
"button",
|
|
2229
2315
|
{
|
|
2230
2316
|
type: "button",
|
|
@@ -2236,19 +2322,19 @@ function SuiteAiPanel({
|
|
|
2236
2322
|
/* @__PURE__ */ jsxs15(
|
|
2237
2323
|
"aside",
|
|
2238
2324
|
{
|
|
2239
|
-
className:
|
|
2325
|
+
className: `absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
|
|
2240
2326
|
"data-test": "suite-ask-ai-panel",
|
|
2241
2327
|
children: [
|
|
2242
2328
|
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
|
|
2243
2329
|
/* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
|
|
2244
2330
|
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2331
|
+
/* @__PURE__ */ jsx17(Icon, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
|
|
2332
|
+
/* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-ph-ink", children: title })
|
|
2247
2333
|
] }),
|
|
2248
|
-
/* @__PURE__ */
|
|
2334
|
+
/* @__PURE__ */ jsx17("p", { className: "mt-0.5 text-[11px] text-ph-mutedtext", children: "Shared across your suite \xB7 same chat in every app" })
|
|
2249
2335
|
] }),
|
|
2250
2336
|
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
|
|
2251
|
-
messages.length > 0 ? /* @__PURE__ */
|
|
2337
|
+
messages.length > 0 ? /* @__PURE__ */ jsx17(
|
|
2252
2338
|
"button",
|
|
2253
2339
|
{
|
|
2254
2340
|
type: "button",
|
|
@@ -2259,19 +2345,19 @@ function SuiteAiPanel({
|
|
|
2259
2345
|
children: "Clear"
|
|
2260
2346
|
}
|
|
2261
2347
|
) : null,
|
|
2262
|
-
/* @__PURE__ */
|
|
2348
|
+
/* @__PURE__ */ jsx17(
|
|
2263
2349
|
"button",
|
|
2264
2350
|
{
|
|
2265
2351
|
type: "button",
|
|
2266
2352
|
onClick: () => setOpen(false),
|
|
2267
2353
|
className: "rounded p-1 hover:bg-ph-muted",
|
|
2268
2354
|
"aria-label": "Close",
|
|
2269
|
-
children: /* @__PURE__ */
|
|
2355
|
+
children: /* @__PURE__ */ jsx17(X2, { className: "h-4 w-4" })
|
|
2270
2356
|
}
|
|
2271
2357
|
)
|
|
2272
2358
|
] })
|
|
2273
2359
|
] }),
|
|
2274
|
-
presets.length > 0 && messages.length === 0 ? /* @__PURE__ */
|
|
2360
|
+
presets.length > 0 && messages.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2", children: presets.map((preset) => /* @__PURE__ */ jsx17(
|
|
2275
2361
|
"button",
|
|
2276
2362
|
{
|
|
2277
2363
|
type: "button",
|
|
@@ -2288,14 +2374,14 @@ function SuiteAiPanel({
|
|
|
2288
2374
|
ref: scrollerRef,
|
|
2289
2375
|
className: "flex-1 space-y-3 overflow-y-auto p-4",
|
|
2290
2376
|
children: [
|
|
2291
|
-
error ? /* @__PURE__ */
|
|
2377
|
+
error ? /* @__PURE__ */ jsx17("p", { className: "bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger", children: error }) : null,
|
|
2292
2378
|
hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
|
|
2293
|
-
/* @__PURE__ */
|
|
2379
|
+
/* @__PURE__ */ jsx17(Spinner, { className: "h-4 w-4 animate-spin" }),
|
|
2294
2380
|
"Loading chat\u2026"
|
|
2295
2381
|
] }) : null,
|
|
2296
2382
|
!hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs15("div", { className: "mt-10 px-2 text-center", children: [
|
|
2297
|
-
/* @__PURE__ */
|
|
2298
|
-
/* @__PURE__ */
|
|
2383
|
+
/* @__PURE__ */ jsx17("p", { className: "font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
|
|
2384
|
+
/* @__PURE__ */ jsx17("p", { className: "mt-2 text-sm leading-relaxed text-ph-subtle", children: emptyState })
|
|
2299
2385
|
] }) : null,
|
|
2300
2386
|
messages.map((message, index) => {
|
|
2301
2387
|
const isUser = message.role === "user";
|
|
@@ -2305,7 +2391,13 @@ function SuiteAiPanel({
|
|
|
2305
2391
|
className: isUser ? "ml-8 rounded-2xl bg-ph-brand/10 px-3.5 py-2.5 text-sm text-ph-ink" : "mr-4 rounded-2xl bg-ph-muted px-3.5 py-2.5 text-sm text-ph-ink",
|
|
2306
2392
|
"data-test": isUser ? "ask-ai-user" : "ask-ai-assistant",
|
|
2307
2393
|
children: [
|
|
2308
|
-
/* @__PURE__ */
|
|
2394
|
+
isUser ? /* @__PURE__ */ jsx17("p", { className: "whitespace-pre-wrap", children: message.content }) : /* @__PURE__ */ jsx17(
|
|
2395
|
+
Suspense,
|
|
2396
|
+
{
|
|
2397
|
+
fallback: /* @__PURE__ */ jsx17("p", { className: "whitespace-pre-wrap", children: message.content }),
|
|
2398
|
+
children: /* @__PURE__ */ jsx17(SuiteAiBlockNoteMessage, { markdown: message.content })
|
|
2399
|
+
}
|
|
2400
|
+
),
|
|
2309
2401
|
!isUser ? /* @__PURE__ */ jsxs15(
|
|
2310
2402
|
"button",
|
|
2311
2403
|
{
|
|
@@ -2313,7 +2405,7 @@ function SuiteAiPanel({
|
|
|
2313
2405
|
onClick: () => void copyMessage(index, message.content),
|
|
2314
2406
|
className: "mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink",
|
|
2315
2407
|
children: [
|
|
2316
|
-
copiedId === index ? /* @__PURE__ */
|
|
2408
|
+
copiedId === index ? /* @__PURE__ */ jsx17(Check2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx17(Copy, { className: "h-3 w-3" }),
|
|
2317
2409
|
copiedId === index ? "Copied" : "Copy"
|
|
2318
2410
|
]
|
|
2319
2411
|
}
|
|
@@ -2324,14 +2416,14 @@ function SuiteAiPanel({
|
|
|
2324
2416
|
);
|
|
2325
2417
|
}),
|
|
2326
2418
|
loading ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
|
|
2327
|
-
/* @__PURE__ */
|
|
2419
|
+
/* @__PURE__ */ jsx17(Spinner, { className: "h-4 w-4 animate-spin" }),
|
|
2328
2420
|
"Thinking\u2026"
|
|
2329
2421
|
] }) : null
|
|
2330
2422
|
]
|
|
2331
2423
|
}
|
|
2332
2424
|
),
|
|
2333
|
-
/* @__PURE__ */
|
|
2334
|
-
/* @__PURE__ */
|
|
2425
|
+
/* @__PURE__ */ jsx17("div", { className: "border-t border-ph-border p-3", children: /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
|
|
2426
|
+
/* @__PURE__ */ jsx17(
|
|
2335
2427
|
"textarea",
|
|
2336
2428
|
{
|
|
2337
2429
|
value: prompt,
|
|
@@ -2349,7 +2441,7 @@ function SuiteAiPanel({
|
|
|
2349
2441
|
className: "flex-1 resize-none rounded-xl border border-ph-border bg-ph-canvas p-2.5 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
|
|
2350
2442
|
}
|
|
2351
2443
|
),
|
|
2352
|
-
/* @__PURE__ */
|
|
2444
|
+
/* @__PURE__ */ jsx17(
|
|
2353
2445
|
"button",
|
|
2354
2446
|
{
|
|
2355
2447
|
type: "button",
|
|
@@ -2370,9 +2462,9 @@ function SuiteAiPanel({
|
|
|
2370
2462
|
|
|
2371
2463
|
// src/suite/lib/use-sidebar-width.ts
|
|
2372
2464
|
import {
|
|
2373
|
-
useCallback as
|
|
2374
|
-
useEffect as
|
|
2375
|
-
useState as
|
|
2465
|
+
useCallback as useCallback3,
|
|
2466
|
+
useEffect as useEffect7,
|
|
2467
|
+
useState as useState8
|
|
2376
2468
|
} from "react";
|
|
2377
2469
|
var SIDEBAR_RAIL_WIDTH = 56;
|
|
2378
2470
|
var SIDEBAR_COLLAPSE_THRESHOLD = 80;
|
|
@@ -2388,10 +2480,10 @@ function snapWidth(width) {
|
|
|
2388
2480
|
return Math.min(SIDEBAR_MAX_WIDTH, width);
|
|
2389
2481
|
}
|
|
2390
2482
|
function useSidebarWidth(storageKey) {
|
|
2391
|
-
const [width, setWidth] =
|
|
2392
|
-
const [narrowViewport, setNarrowViewport] =
|
|
2483
|
+
const [width, setWidth] = useState8(SIDEBAR_DEFAULT_WIDTH);
|
|
2484
|
+
const [narrowViewport, setNarrowViewport] = useState8(false);
|
|
2393
2485
|
const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
|
|
2394
|
-
|
|
2486
|
+
useEffect7(() => {
|
|
2395
2487
|
let stored = null;
|
|
2396
2488
|
try {
|
|
2397
2489
|
stored = localStorage.getItem(storageKey);
|
|
@@ -2403,14 +2495,14 @@ function useSidebarWidth(storageKey) {
|
|
|
2403
2495
|
queueMicrotask(() => setWidth(snapWidth(clampWidth(parsed))));
|
|
2404
2496
|
}
|
|
2405
2497
|
}, [storageKey]);
|
|
2406
|
-
|
|
2498
|
+
useEffect7(() => {
|
|
2407
2499
|
const media = window.matchMedia("(max-width: 639px)");
|
|
2408
2500
|
const sync = () => setNarrowViewport(media.matches);
|
|
2409
2501
|
sync();
|
|
2410
2502
|
media.addEventListener("change", sync);
|
|
2411
2503
|
return () => media.removeEventListener("change", sync);
|
|
2412
2504
|
}, []);
|
|
2413
|
-
const persist =
|
|
2505
|
+
const persist = useCallback3(
|
|
2414
2506
|
(value) => {
|
|
2415
2507
|
try {
|
|
2416
2508
|
localStorage.setItem(storageKey, String(value));
|
|
@@ -2419,7 +2511,7 @@ function useSidebarWidth(storageKey) {
|
|
|
2419
2511
|
},
|
|
2420
2512
|
[storageKey]
|
|
2421
2513
|
);
|
|
2422
|
-
const setCollapsed =
|
|
2514
|
+
const setCollapsed = useCallback3(
|
|
2423
2515
|
(value) => {
|
|
2424
2516
|
setWidth((current) => {
|
|
2425
2517
|
const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? SIDEBAR_DEFAULT_WIDTH : snapWidth(current);
|
|
@@ -2429,11 +2521,11 @@ function useSidebarWidth(storageKey) {
|
|
|
2429
2521
|
},
|
|
2430
2522
|
[persist]
|
|
2431
2523
|
);
|
|
2432
|
-
const resetWidth =
|
|
2524
|
+
const resetWidth = useCallback3(() => {
|
|
2433
2525
|
setWidth(SIDEBAR_DEFAULT_WIDTH);
|
|
2434
2526
|
persist(SIDEBAR_DEFAULT_WIDTH);
|
|
2435
2527
|
}, [persist]);
|
|
2436
|
-
const startResize =
|
|
2528
|
+
const startResize = useCallback3(
|
|
2437
2529
|
(event) => {
|
|
2438
2530
|
event.preventDefault();
|
|
2439
2531
|
const startX = event.clientX;
|
|
@@ -2460,9 +2552,9 @@ function useSidebarWidth(storageKey) {
|
|
|
2460
2552
|
|
|
2461
2553
|
// src/suite/lib/motion.tsx
|
|
2462
2554
|
import { LazyMotion, domAnimation, m } from "motion/react";
|
|
2463
|
-
import { jsx as
|
|
2555
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
2464
2556
|
function SuiteMotionProvider({ children }) {
|
|
2465
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ jsx18(LazyMotion, { features: domAnimation, strict: true, children });
|
|
2466
2558
|
}
|
|
2467
2559
|
var SUITE_SPRINGS = {
|
|
2468
2560
|
/** Snappy panel/sheet entrances — small overshoot. */
|
|
@@ -2474,24 +2566,24 @@ var SUITE_SPRINGS = {
|
|
|
2474
2566
|
};
|
|
2475
2567
|
|
|
2476
2568
|
// src/suite/components/suite-skeleton.tsx
|
|
2477
|
-
import { jsx as
|
|
2569
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2478
2570
|
function SuiteSkeleton({
|
|
2479
2571
|
className,
|
|
2480
2572
|
lines = 1,
|
|
2481
2573
|
circle,
|
|
2482
2574
|
width
|
|
2483
2575
|
}) {
|
|
2484
|
-
return /* @__PURE__ */
|
|
2576
|
+
return /* @__PURE__ */ jsx19(
|
|
2485
2577
|
"div",
|
|
2486
2578
|
{
|
|
2487
2579
|
className: cn("space-y-2", circle ? "flex flex-col items-center" : ""),
|
|
2488
2580
|
"aria-hidden": true,
|
|
2489
|
-
children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */
|
|
2581
|
+
children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx19(
|
|
2490
2582
|
"div",
|
|
2491
2583
|
{
|
|
2492
2584
|
className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
|
|
2493
2585
|
style: { animationDelay: `${index * 80}ms` },
|
|
2494
|
-
children: /* @__PURE__ */
|
|
2586
|
+
children: /* @__PURE__ */ jsx19(
|
|
2495
2587
|
"div",
|
|
2496
2588
|
{
|
|
2497
2589
|
className: cn(
|
|
@@ -2530,20 +2622,20 @@ function SuiteSkeletonCard({
|
|
|
2530
2622
|
className: "mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]",
|
|
2531
2623
|
style: { animationDelay: "100ms" },
|
|
2532
2624
|
children: [
|
|
2533
|
-
/* @__PURE__ */
|
|
2625
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-10 w-10 rounded-xl" }),
|
|
2534
2626
|
/* @__PURE__ */ jsxs16("div", { className: "flex-1 space-y-2", children: [
|
|
2535
|
-
/* @__PURE__ */
|
|
2536
|
-
/* @__PURE__ */
|
|
2627
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-4 w-1/3" }),
|
|
2628
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3 w-1/2" })
|
|
2537
2629
|
] })
|
|
2538
2630
|
]
|
|
2539
2631
|
}
|
|
2540
2632
|
) : null,
|
|
2541
|
-
/* @__PURE__ */
|
|
2633
|
+
/* @__PURE__ */ jsx19("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx19(
|
|
2542
2634
|
"div",
|
|
2543
2635
|
{
|
|
2544
2636
|
className: "animate-[skeleton-stagger_0.5s_ease-out_both]",
|
|
2545
2637
|
style: { animationDelay: `${200 + index * 80}ms` },
|
|
2546
|
-
children: /* @__PURE__ */
|
|
2638
|
+
children: /* @__PURE__ */ jsx19(
|
|
2547
2639
|
"div",
|
|
2548
2640
|
{
|
|
2549
2641
|
className: "ph-skeleton h-3",
|
|
@@ -2561,16 +2653,16 @@ function SuiteSkeletonList({
|
|
|
2561
2653
|
className,
|
|
2562
2654
|
items = 4
|
|
2563
2655
|
}) {
|
|
2564
|
-
return /* @__PURE__ */
|
|
2656
|
+
return /* @__PURE__ */ jsx19("div", { className: cn("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx19(
|
|
2565
2657
|
"div",
|
|
2566
2658
|
{
|
|
2567
2659
|
className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
|
|
2568
2660
|
style: { animationDelay: `${index * 100}ms` },
|
|
2569
2661
|
children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4", children: [
|
|
2570
|
-
/* @__PURE__ */
|
|
2662
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-10 w-10 rounded-lg" }),
|
|
2571
2663
|
/* @__PURE__ */ jsxs16("div", { className: "min-w-0 flex-1 space-y-2", children: [
|
|
2572
|
-
/* @__PURE__ */
|
|
2573
|
-
/* @__PURE__ */
|
|
2664
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3.5 w-3/4" }),
|
|
2665
|
+
/* @__PURE__ */ jsx19("div", { className: "ph-skeleton h-3 w-1/2" })
|
|
2574
2666
|
] })
|
|
2575
2667
|
] })
|
|
2576
2668
|
},
|
|
@@ -2595,12 +2687,12 @@ function SuiteEmptyState({
|
|
|
2595
2687
|
),
|
|
2596
2688
|
children: [
|
|
2597
2689
|
/* @__PURE__ */ jsxs16("div", { className: "pointer-events-none absolute inset-0 overflow-hidden opacity-60", "aria-hidden": true, children: [
|
|
2598
|
-
/* @__PURE__ */
|
|
2599
|
-
/* @__PURE__ */
|
|
2690
|
+
/* @__PURE__ */ jsx19("div", { className: "absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" }),
|
|
2691
|
+
/* @__PURE__ */ jsx19("div", { className: "absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" })
|
|
2600
2692
|
] }),
|
|
2601
2693
|
/* @__PURE__ */ jsxs16("div", { className: "relative", children: [
|
|
2602
|
-
icon ? /* @__PURE__ */
|
|
2603
|
-
/* @__PURE__ */
|
|
2694
|
+
icon ? /* @__PURE__ */ jsx19("div", { className: "mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]", children: icon }) : null,
|
|
2695
|
+
/* @__PURE__ */ jsx19(
|
|
2604
2696
|
"h3",
|
|
2605
2697
|
{
|
|
2606
2698
|
className: cn(
|
|
@@ -2610,8 +2702,8 @@ function SuiteEmptyState({
|
|
|
2610
2702
|
children: title
|
|
2611
2703
|
}
|
|
2612
2704
|
),
|
|
2613
|
-
description ? /* @__PURE__ */
|
|
2614
|
-
action ? /* @__PURE__ */
|
|
2705
|
+
description ? /* @__PURE__ */ jsx19("p", { className: "mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle", children: description }) : null,
|
|
2706
|
+
action ? /* @__PURE__ */ jsx19("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: action }) : null
|
|
2615
2707
|
] })
|
|
2616
2708
|
]
|
|
2617
2709
|
}
|
|
@@ -2620,7 +2712,7 @@ function SuiteEmptyState({
|
|
|
2620
2712
|
|
|
2621
2713
|
// src/suite/components/suite-settings-mobile-nav.tsx
|
|
2622
2714
|
import { isValidElement } from "react";
|
|
2623
|
-
import { jsx as
|
|
2715
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2624
2716
|
function SuiteSettingsMobileNav({
|
|
2625
2717
|
items,
|
|
2626
2718
|
activeHref,
|
|
@@ -2629,16 +2721,16 @@ function SuiteSettingsMobileNav({
|
|
|
2629
2721
|
ariaLabel = "Settings sections",
|
|
2630
2722
|
className
|
|
2631
2723
|
}) {
|
|
2632
|
-
return /* @__PURE__ */
|
|
2724
|
+
return /* @__PURE__ */ jsx20(
|
|
2633
2725
|
"nav",
|
|
2634
2726
|
{
|
|
2635
2727
|
"data-test": dataTest,
|
|
2636
2728
|
"aria-label": ariaLabel,
|
|
2637
2729
|
className: cn("suite-settings-mobile-nav lg:hidden", className),
|
|
2638
|
-
children: /* @__PURE__ */
|
|
2730
|
+
children: /* @__PURE__ */ jsx20("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
|
|
2639
2731
|
const Icon = item.icon;
|
|
2640
2732
|
const active = activeHref === item.href || activeHref.startsWith(`${item.href}/`);
|
|
2641
|
-
const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */
|
|
2733
|
+
const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx20(
|
|
2642
2734
|
Icon,
|
|
2643
2735
|
{
|
|
2644
2736
|
className: cn(
|
|
@@ -2662,8 +2754,8 @@ function SuiteSettingsMobileNav({
|
|
|
2662
2754
|
),
|
|
2663
2755
|
children: [
|
|
2664
2756
|
iconNode,
|
|
2665
|
-
/* @__PURE__ */
|
|
2666
|
-
active ? /* @__PURE__ */
|
|
2757
|
+
/* @__PURE__ */ jsx20("span", { className: "whitespace-nowrap", children: item.label }),
|
|
2758
|
+
active ? /* @__PURE__ */ jsx20("span", { className: "absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" }) : null
|
|
2667
2759
|
]
|
|
2668
2760
|
},
|
|
2669
2761
|
item.href
|
|
@@ -2675,7 +2767,7 @@ function SuiteSettingsMobileNav({
|
|
|
2675
2767
|
|
|
2676
2768
|
// src/suite/components/suite-sidebar.tsx
|
|
2677
2769
|
import Link2 from "next/link";
|
|
2678
|
-
import { jsx as
|
|
2770
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2679
2771
|
function renderNode(node, collapsed) {
|
|
2680
2772
|
if (typeof node === "function") return node(collapsed);
|
|
2681
2773
|
return node;
|
|
@@ -2710,8 +2802,8 @@ function SuiteSidebar({
|
|
|
2710
2802
|
collapsed ? "flex-col items-center gap-1 px-1 py-2" : "h-14 items-center justify-between gap-2 px-3"
|
|
2711
2803
|
),
|
|
2712
2804
|
children: [
|
|
2713
|
-
/* @__PURE__ */
|
|
2714
|
-
collapsed ? null : /* @__PURE__ */
|
|
2805
|
+
/* @__PURE__ */ jsx21("div", { className: cn("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
|
|
2806
|
+
collapsed ? null : /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
|
|
2715
2807
|
]
|
|
2716
2808
|
}
|
|
2717
2809
|
),
|
|
@@ -2730,8 +2822,8 @@ function SuiteSidebar({
|
|
|
2730
2822
|
"aria-label": "Pages",
|
|
2731
2823
|
className: "shrink-0 space-y-0.5",
|
|
2732
2824
|
children: [
|
|
2733
|
-
/* @__PURE__ */
|
|
2734
|
-
/* @__PURE__ */
|
|
2825
|
+
/* @__PURE__ */ jsx21("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
|
|
2826
|
+
/* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
|
|
2735
2827
|
const Icon = item.icon;
|
|
2736
2828
|
const active = Boolean(item.active);
|
|
2737
2829
|
const link = /* @__PURE__ */ jsxs18(
|
|
@@ -2747,7 +2839,7 @@ function SuiteSidebar({
|
|
|
2747
2839
|
collapsed ? "mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
|
|
2748
2840
|
),
|
|
2749
2841
|
children: [
|
|
2750
|
-
/* @__PURE__ */
|
|
2842
|
+
/* @__PURE__ */ jsx21(
|
|
2751
2843
|
"span",
|
|
2752
2844
|
{
|
|
2753
2845
|
className: cn(
|
|
@@ -2755,7 +2847,7 @@ function SuiteSidebar({
|
|
|
2755
2847
|
item.iconClassName
|
|
2756
2848
|
),
|
|
2757
2849
|
"aria-hidden": true,
|
|
2758
|
-
children: /* @__PURE__ */
|
|
2850
|
+
children: /* @__PURE__ */ jsx21(
|
|
2759
2851
|
Icon,
|
|
2760
2852
|
{
|
|
2761
2853
|
className: "h-full w-full",
|
|
@@ -2764,7 +2856,7 @@ function SuiteSidebar({
|
|
|
2764
2856
|
)
|
|
2765
2857
|
}
|
|
2766
2858
|
),
|
|
2767
|
-
/* @__PURE__ */
|
|
2859
|
+
/* @__PURE__ */ jsx21(
|
|
2768
2860
|
"span",
|
|
2769
2861
|
{
|
|
2770
2862
|
className: cn(
|
|
@@ -2775,17 +2867,17 @@ function SuiteSidebar({
|
|
|
2775
2867
|
children: item.label
|
|
2776
2868
|
}
|
|
2777
2869
|
),
|
|
2778
|
-
!collapsed && item.badge ? /* @__PURE__ */
|
|
2870
|
+
!collapsed && item.badge ? /* @__PURE__ */ jsx21("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
|
|
2779
2871
|
]
|
|
2780
2872
|
},
|
|
2781
2873
|
item.label
|
|
2782
2874
|
);
|
|
2783
|
-
return collapsed ? /* @__PURE__ */
|
|
2875
|
+
return collapsed ? /* @__PURE__ */ jsx21(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
|
|
2784
2876
|
}) })
|
|
2785
2877
|
]
|
|
2786
2878
|
}
|
|
2787
2879
|
),
|
|
2788
|
-
secondaryNav ? /* @__PURE__ */
|
|
2880
|
+
secondaryNav ? /* @__PURE__ */ jsx21(
|
|
2789
2881
|
"div",
|
|
2790
2882
|
{
|
|
2791
2883
|
className: "min-h-0 flex-1",
|
|
@@ -2796,7 +2888,7 @@ function SuiteSidebar({
|
|
|
2796
2888
|
]
|
|
2797
2889
|
}
|
|
2798
2890
|
),
|
|
2799
|
-
/* @__PURE__ */
|
|
2891
|
+
/* @__PURE__ */ jsx21(
|
|
2800
2892
|
"div",
|
|
2801
2893
|
{
|
|
2802
2894
|
className: cn(
|
|
@@ -2813,7 +2905,7 @@ function SuiteSidebar({
|
|
|
2813
2905
|
),
|
|
2814
2906
|
children: [
|
|
2815
2907
|
renderNode(userMenu, collapsed),
|
|
2816
|
-
!collapsed && footerExtras ? /* @__PURE__ */
|
|
2908
|
+
!collapsed && footerExtras ? /* @__PURE__ */ jsx21("div", { className: "ml-auto shrink-0", children: renderNode(footerExtras, collapsed) }) : null
|
|
2817
2909
|
]
|
|
2818
2910
|
}
|
|
2819
2911
|
)
|
|
@@ -2825,7 +2917,7 @@ function SuiteSidebar({
|
|
|
2825
2917
|
}
|
|
2826
2918
|
|
|
2827
2919
|
// src/suite/components/suite-app-layout.tsx
|
|
2828
|
-
import { jsx as
|
|
2920
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2829
2921
|
function SuiteAppLayout({
|
|
2830
2922
|
sidebar,
|
|
2831
2923
|
children,
|
|
@@ -2852,7 +2944,7 @@ function SuiteAppLayout({
|
|
|
2852
2944
|
"data-collapsed": collapsed ? "true" : "false",
|
|
2853
2945
|
children: [
|
|
2854
2946
|
sidebar,
|
|
2855
|
-
onStartResize ? /* @__PURE__ */
|
|
2947
|
+
onStartResize ? /* @__PURE__ */ jsx22(
|
|
2856
2948
|
"div",
|
|
2857
2949
|
{
|
|
2858
2950
|
role: "separator",
|
|
@@ -2867,8 +2959,8 @@ function SuiteAppLayout({
|
|
|
2867
2959
|
}
|
|
2868
2960
|
),
|
|
2869
2961
|
/* @__PURE__ */ jsxs19("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
|
|
2870
|
-
mobileHeader ? /* @__PURE__ */
|
|
2871
|
-
/* @__PURE__ */
|
|
2962
|
+
mobileHeader ? /* @__PURE__ */ jsx22("div", { className: "shrink-0 lg:hidden", children: mobileHeader }) : null,
|
|
2963
|
+
/* @__PURE__ */ jsx22(
|
|
2872
2964
|
"main",
|
|
2873
2965
|
{
|
|
2874
2966
|
id: "main-content",
|
|
@@ -2881,7 +2973,7 @@ function SuiteAppLayout({
|
|
|
2881
2973
|
children
|
|
2882
2974
|
}
|
|
2883
2975
|
),
|
|
2884
|
-
bottomNav ? /* @__PURE__ */
|
|
2976
|
+
bottomNav ? /* @__PURE__ */ jsx22("div", { className: "shrink-0 lg:hidden", children: bottomNav }) : null
|
|
2885
2977
|
] })
|
|
2886
2978
|
]
|
|
2887
2979
|
}
|