@workerdeck/ui 0.22.0 → 1.0.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { r as SessionPanelProps } from "./SessionPanel-13l25ubU.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-E_L_ldQ5.mjs";
 import * as _$react from "react";
 import { CSSProperties } from "react";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";
@@ -8,80 +8,32 @@ import { WorkerDeckClient } from "@workerdeck/client";
 interface SessionWorkspaceProps {
   client: WorkerDeckClient;
   sessionId: string | undefined;
-  /** Passed straight through to {@link SessionPanel} — including the render-prop
-   * form that claims the session-actions menu. */
   header?: SessionPanelProps['header'];
-  /**
-   * Panel seams the workspace does not interpret, forwarded verbatim.
-   *
-   * They are listed rather than spread so the workspace stays explicit about
-   * what it passes on: the panel owns the session's one attach, and a seam that
-   * silently arrived here would be a second place to look for why a session
-   * renders the way it does.
-   */
   transcriptVariant?: SessionPanelProps['transcriptVariant'];
   transcriptDensity?: SessionPanelProps['transcriptDensity'];
   transcriptFont?: SessionPanelProps['transcriptFont'];
-  /** The overview ruler in place of the scrollbar — see `SessionPanel`. */
   scrubber?: SessionPanelProps['scrubber'];
-  scrubberMarks?: SessionPanelProps['scrubberMarks'];
-  /** The last prompt pinned above the transcript — see `SessionPanel`. */
+  bookmarks?: SessionPanelProps['bookmarks'];
+  onToggleBookmark?: SessionPanelProps['onToggleBookmark'];
   stickyPrompt?: SessionPanelProps['stickyPrompt'];
-  /** Take the panel body over with one sub-agent's work — see `SessionPanel`. */
   openSubagent?: SessionPanelProps['openSubagent'];
-  /** Travel to a row in the conversation without framing anything — where a
-   * **task** press lands, as opposed to `openSubagent`'s takeover. See
-   * `SessionPanel`. */
   reveal?: SessionPanelProps['reveal'];
-  /** The outward half of `openSubagent`: which sub-agent the panel now has
-   * framed, or `undefined` for the conversation — see `SessionPanel`. */
   onSubagentChange?: SessionPanelProps['onSubagentChange'];
-  /** Which end of the panel the status bar sits at — see `SessionPanel`. */
   statusPlacement?: SessionPanelProps['statusPlacement'];
   controlsSurface?: SessionPanelProps['controlsSurface'];
+  fontSize?: SessionPanelProps['fontSize'];
+  onLinkClick?: SessionPanelProps['onLinkClick'];
   unseen?: SessionPanelProps['unseen'];
-  /** Viewer mode — no composer, no approval prompts. Forwarded verbatim to
-   * {@link SessionPanel}; the file tree and editor are unaffected, since reading
-   * a run's files is the point of a read-only view. */
   readOnly?: SessionPanelProps['readOnly'];
   onVitals?: SessionPanelProps['onVitals'];
-  /** Rail width in pixels on first render. */
   defaultRailWidth?: number;
-  /** Start with the file rail collapsed even on a wide viewport. */
   defaultRailCollapsed?: boolean;
-  /**
-   * The rail moved. Paired with the two defaults so an embedder can persist the
-   * layout — the workspace deliberately does not, because *where* to keep it (a
-   * Memento, localStorage, a workspace file) is the embedder's call, and a
-   * component that picked one would be wrong in the other hosts.
-   */
   onRailChange?: (rail: {
     width: number;
     collapsed: boolean;
   }) => void;
   className?: string;
 }
-/**
- * A VS Code-shaped workspace around a live session: file tree on the left, open
- * files above, the agent below.
- *
- * **Strictly additive.** {@link SessionPanel} is untouched and still the whole
- * session surface on its own — an embedder picks one or the other, and one that
- * has its own file tree keeps using the panel.
- *
- * Two things here are load-bearing and easy to break:
- *
- * 1. **The editor region is absent from the layout when nothing is open**, not
- *    collapsed to zero height. A zero-height pane leaves a draggable splitter and
- *    parks the composer at an odd offset; absence is what makes the agent's
- *    "claims the full column" state actually look like the panel alone.
- * 2. **`SessionPanel` keeps its position in the tree across that transition.** It
- *    holds the WebSocket attach and the entire transcript, so moving it between
- *    parents — or wrapping it conditionally — would remount it and drop the
- *    session's rendered history on the floor the first time someone opens a file.
- *    The conditional children before it are `? :` expressions that leave a null in
- *    their slot, which is exactly what keeps its index stable.
- */
 declare function SessionWorkspace({
   client,
   sessionId,
@@ -90,13 +42,16 @@ declare function SessionWorkspace({
   transcriptDensity,
   transcriptFont,
   scrubber,
-  scrubberMarks,
+  bookmarks,
+  onToggleBookmark,
   stickyPrompt,
   openSubagent,
   reveal,
   onSubagentChange,
   statusPlacement,
   controlsSurface,
+  fontSize,
+  onLinkClick,
   unseen,
   readOnly,
   onVitals,
@@ -108,30 +63,14 @@ declare function SessionWorkspace({
 //#endregion
 //#region src/components/agent/FileTree.d.ts
 interface FileTreeProps {
-  /** Tree state from `useHostFileTree` — this component holds none of its own. */
   tree: UseHostFileTreeResult;
-  /** Optional search from `useHostFileSearch`; omit and the box is not offered. */
   search?: UseHostFileSearchResult;
-  /** Path of the focused file, highlighted in the tree. */
   activePath?: string;
   onOpenFile: (path: string) => void;
-  /** Offered as a button in the header when given. */
   onCollapse?: () => void;
   style?: CSSProperties;
   className?: string;
 }
-/**
- * The workspace's left rail: an expandable tree of the session's project,
- * with a search box over the same fuzzy route `@file` completion uses.
- *
- * Presentational by construction — every piece of state it renders comes from
- * the hooks in `@workerdeck/react`, and the only thing it owns is the search
- * query, which is the text in its own input.
- *
- * Searching replaces the tree with matches rather than filtering it: the route
- * answers with paths from all over the project, and threading those back into
- * tree positions would mean expanding a dozen directories to show six results.
- */
 declare function FileTree({
   tree,
   search,
@@ -150,19 +89,6 @@ interface EditorTabsProps {
   onClose: (path: string) => void;
   className?: string;
 }
-/**
- * The open-file tab strip.
- *
- * Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
- * carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
- * getting the primitive to render something else costs more than the roving
- * tabindex it would have provided. So that part is here, explicitly, along with
- * the two affordances that actually make a tab strip feel right: middle-click to
- * close, and the active tab scrolling itself into view.
- *
- * Deliberately state-free. Which files are open, which is focused and what
- * closing does are all decided by `useOpenFiles`.
- */
 declare function EditorTabs({
   files,
   activePath,
@@ -174,27 +100,15 @@ declare function EditorTabs({
 //#region src/components/agent/FileViewer.d.ts
 interface FileViewerProps {
   file: OpenFile | undefined;
-  /** From `/fs/roots`. False renders the editor read-only rather than letting
-   * someone type into a file this gateway will refuse to write. */
   canWrite?: boolean;
   onChange?: (path: string, content: string) => void;
   onSave?: (path: string) => void;
-  /** Discard this tab's edits — local only, no re-read. */
   onRevert?: (path: string) => void;
-  /** Take the version on disk, discarding this tab's edits. */
   onReload?: (path: string) => void;
-  /** Take this tab's version, over whatever is on disk now. */
   onOverwrite?: (path: string) => void;
   onDismissConflict?: (path: string) => void;
   className?: string;
 }
-/**
- * The focused file: Monaco, plus the states a file can be in that are not
- * "here is some text".
- *
- * No path row — the tab's tooltip carries the path and the size, and a line of
- * monospace above every file is chrome that never earns its height.
- */
 declare function FileViewer({
   file,
   canWrite,
@@ -209,42 +123,13 @@ declare function FileViewer({
 //#endregion
 //#region src/components/agent/CodeEditor.d.ts
 interface CodeEditorProps {
-  /** Absolute path — decides the language and identifies the model. */
   path: string;
-  /** Text to show. Applied to the model when it differs from what is on screen,
-   * so an external reload lands without fighting the user's cursor. */
   value: string;
   onChange?: (value: string) => void;
-  /** Ctrl/Cmd+S. Wired inside Monaco because the editor swallows keydown. */
   onSave?: () => void;
   readOnly?: boolean;
   className?: string;
 }
-/**
- * Monaco — VS Code's own editor — behind a small React surface.
- *
- * Two deliberate choices, both about `@workerdeck/ui` being a **published
- * library** rather than an app:
- *
- * 1. **Loaded on demand.** The `import()` is inside an effect, so Monaco is a
- *    separate chunk that arrives when someone first opens a file. A dashboard
- *    that never opens one never pays for it, and Monaco's ~90 language grammars
- *    are themselves lazy (each `registerLanguage` carries an `import()` loader),
- *    so opening a `.ts` file fetches the TypeScript grammar and nothing else.
- * 2. **No `MonacoEnvironment` is configured here, and none is needed.** Workers
- *    in a library become every embedder's bootstrapping problem, and
- *    `packages/web` ships prebuilt static files at a domain root, which is
- *    exactly where hardcoded worker URLs break. The editor is configured so it
- *    never asks for one: `wordBasedSuggestions` and `quickSuggestions` off,
- *    no diff editor. A host that wants the worker-backed language services
- *    (TypeScript IntelliSense, JSON schema validation) sets `MonacoEnvironment`
- *    itself before the first file is opened — Monaco is a singleton and nothing
- *    here fights that.
- *
- * One model per path, kept across tab switches, so undo history and view state
- * survive clicking away and back — which is most of what makes tabs feel like
- * tabs rather than like re-opening a file.
- */
 declare function CodeEditor({
   path,
   value,

package/build/workspace.mjs

@@ -1,24 +1,11 @@
-import { Ht as Button, Wt as cn, _t as Tip, ft as Splitter, mt as Spinner, t as SessionPanel, yt as TooltipProvider, zt as Input } from "./SessionPanel-DgwjH4Ve.mjs";
-import { d as formatBytes } from "./status-BE-zg88x.mjs";
+import { Bt as Input, Gt as cn, R as EntryIcon, Ut as Button, bt as TooltipProvider, ht as Spinner, pt as Splitter, t as SessionPanel, vt as Tip } from "./SessionPanel-DDgBkHsi.mjs";
+import { f as formatBytes } from "./status-C0HSLZas.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, File, FileWarning, Folder, FolderOpen, Link2, PanelLeftClose, PanelLeftOpen, RefreshCw, Search, TriangleAlert, X } from "lucide-react";
+import { ChevronRight, File, FileWarning, Folder, FolderOpen, PanelLeftClose, PanelLeftOpen, RefreshCw, Search, TriangleAlert, X } from "lucide-react";
 import { currentText, isDirty, useHostFileRoots, useHostFileSearch, useHostFileTree, useOpenFiles, useSessionInfo } from "@workerdeck/react";
 import { createPortal } from "react-dom";
 //#region src/components/agent/EditorTabs.tsx
-/**
-* The open-file tab strip.
-*
-* Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
-* carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
-* getting the primitive to render something else costs more than the roving
-* tabindex it would have provided. So that part is here, explicitly, along with
-* the two affordances that actually make a tab strip feel right: middle-click to
-* close, and the active tab scrolling itself into view.
-*
-* Deliberately state-free. Which files are open, which is focused and what
-* closing does are all decided by `useOpenFiles`.
-*/
 function EditorTabs({ files, activePath, onActivate, onClose, className }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, {
 		delay: 500,
@@ -113,21 +100,7 @@ function Tab({ file, active, onActivate, onClose, onArrow }) {
 }
 //#endregion
 //#region src/components/agent/FileTree.tsx
-/** How far one level of nesting indents, in pixels. Inline rather than a Tailwind
-* class because depth is a number at runtime and `pl-${n}` is not a class. */
 const INDENT = 12;
-/**
-* The workspace's left rail: an expandable tree of the session's project,
-* with a search box over the same fuzzy route `@file` completion uses.
-*
-* Presentational by construction — every piece of state it renders comes from
-* the hooks in `@workerdeck/react`, and the only thing it owns is the search
-* query, which is the text in its own input.
-*
-* Searching replaces the tree with matches rather than filtering it: the route
-* answers with paths from all over the project, and threading those back into
-* tree positions would mean expanding a dozen directories to show six results.
-*/
 function FileTree({ tree, search, activePath, onOpenFile, onCollapse, style, className }) {
 	const [query, setQuery] = useState("");
 	const [matches, setMatches] = useState();
@@ -246,8 +219,6 @@ function FileTree({ tree, search, activePath, onOpenFile, onCollapse, style, cla
 		})]
 	});
 }
-/** One clickable line. A directory and a file differ only in what the click does
-* and whether there is a chevron — visually they are the same row. */
 function Row({ label, detail, title, icon, chevron, indent = 0, active, onClick }) {
 	const ref = useRef(null);
 	useEffect(() => {
@@ -277,48 +248,15 @@ function Row({ label, detail, title, icon, chevron, indent = 0, active, onClick
 		]
 	});
 }
-/** Last segment of a relative match. */
 function fileName(relative) {
 	return relative.slice(relative.lastIndexOf("/") + 1);
 }
-/** Everything before it, or `undefined` for a file at the search root. */
 function directoryOf(relative) {
 	const cut = relative.lastIndexOf("/");
 	return cut === -1 ? void 0 : relative.slice(0, cut);
 }
-/** A symlink is reported as itself and never silently resolved — following it is
-* the next request's problem, and that request is refused if it escapes the roots. */
-function EntryIcon({ type }) {
-	if (type === "symlink") return /* @__PURE__ */ jsx(Link2, { className: "size-3.5 shrink-0 text-fg-4" });
-	return /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0 text-fg-4" });
-}
 //#endregion
 //#region src/components/agent/CodeEditor.tsx
-/**
-* Monaco — VS Code's own editor — behind a small React surface.
-*
-* Two deliberate choices, both about `@workerdeck/ui` being a **published
-* library** rather than an app:
-*
-* 1. **Loaded on demand.** The `import()` is inside an effect, so Monaco is a
-*    separate chunk that arrives when someone first opens a file. A dashboard
-*    that never opens one never pays for it, and Monaco's ~90 language grammars
-*    are themselves lazy (each `registerLanguage` carries an `import()` loader),
-*    so opening a `.ts` file fetches the TypeScript grammar and nothing else.
-* 2. **No `MonacoEnvironment` is configured here, and none is needed.** Workers
-*    in a library become every embedder's bootstrapping problem, and
-*    `packages/web` ships prebuilt static files at a domain root, which is
-*    exactly where hardcoded worker URLs break. The editor is configured so it
-*    never asks for one: `wordBasedSuggestions` and `quickSuggestions` off,
-*    no diff editor. A host that wants the worker-backed language services
-*    (TypeScript IntelliSense, JSON schema validation) sets `MonacoEnvironment`
-*    itself before the first file is opened — Monaco is a singleton and nothing
-*    here fights that.
-*
-* One model per path, kept across tab switches, so undo history and view state
-* survive clicking away and back — which is most of what makes tabs feel like
-* tabs rather than like re-opening a file.
-*/
 function CodeEditor({ path, value, onChange, onSave, readOnly, className }) {
 	const host = useRef(null);
 	const editor = useRef(null);
@@ -417,12 +355,6 @@ function CodeEditor({ path, value, onChange, onSave, readOnly, className }) {
 		}) : null]
 	});
 }
-/**
-* Follow the `data-theme` the design tokens already swap on, so the editor is
-* never the one light rectangle in a dark app (or the reverse). An attribute
-* observer rather than a media query: the app has a manual toggle, and the
-* attribute is what that toggle writes.
-*/
 function useDocumentTheme() {
 	const [theme, setTheme] = useState(() => typeof document === "undefined" ? null : document.documentElement.getAttribute("data-theme"));
 	useEffect(() => {
@@ -438,17 +370,9 @@ function useDocumentTheme() {
 	}, []);
 	return theme;
 }
-/** An unset attribute means the host never opted into the token themes, in which
-* case dark matches this package's default surface. */
 function monacoTheme(theme) {
 	return theme === "light" ? "wd-light" : "wd-dark";
 }
-/**
-* Load Monaco once, register the themes, and hand back the API.
-*
-* Cached as a promise rather than a value so that several editors mounting in
-* the same frame share one load instead of racing three of them.
-*/
 let monacoPromise;
 function loadMonaco() {
 	monacoPromise ??= (async () => {
@@ -469,28 +393,18 @@ function loadMonaco() {
 	})();
 	return monacoPromise;
 }
-/**
-* Monaco's language id for a path.
-*
-* By extension, with a short table for the files that have none — Monaco's own
-* registry is keyed on extensions it knows, and an unmatched file falls through
-* to `plaintext`, which is the honest answer rather than a guess.
-*/
 function languageOf(path) {
 	const name = path.slice(path.lastIndexOf("/") + 1);
 	const byName = FILENAME_LANGUAGES[name.toLowerCase()];
 	if (byName) return byName;
 	return EXTENSION_LANGUAGES[name.slice(name.lastIndexOf(".") + 1).toLowerCase()] ?? "plaintext";
 }
-/** Files whose type is their whole name. */
 const FILENAME_LANGUAGES = {
 	dockerfile: "dockerfile",
 	makefile: "plaintext",
 	".gitignore": "plaintext",
 	".env": "shell"
 };
-/** Extension → Monaco language id. Only where the id differs from the extension
-* or the extension is ambiguous; everything else Monaco resolves itself. */
 const EXTENSION_LANGUAGES = {
 	ts: "typescript",
 	tsx: "typescript",
@@ -548,13 +462,6 @@ const EXTENSION_LANGUAGES = {
 };
 //#endregion
 //#region src/components/agent/FileViewer.tsx
-/**
-* The focused file: Monaco, plus the states a file can be in that are not
-* "here is some text".
-*
-* No path row — the tab's tooltip carries the path and the size, and a line of
-* monospace above every file is chrome that never earns its height.
-*/
 function FileViewer({ file, canWrite, onChange, onSave, onRevert, onReload, onOverwrite, onDismissConflict, className }) {
 	if (!file) return null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -666,32 +573,27 @@ function Centred({ children }) {
 }
 //#endregion
 //#region src/components/agent/use-path-links.ts
-/** Marks the element under the pointer while the modifier is held. */
 const LINKISH = "wd-path-link";
-/** Absolute, or relative with at least one separator. `:12` is a line number. */
 const PATH_RE = /^(\/[^\s:'"`()[\]{}]+|[\w.@~-]+(?:\/[\w.@~-]+)+)(?::(\d+))?$/;
-/** A bare filename — only trusted inside a code element. */
 const FILE_RE = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/;
-/** How much of an element's text the match must cover, outside code. */
 const COVERAGE = .6;
 function matchPath(text, inCode) {
 	const trimmed = text.trim();
-	if (!trimmed || trimmed.endsWith("/")) return void 0;
+	if (!trimmed || trimmed.endsWith("/")) return;
 	const hit = PATH_RE.exec(trimmed) ?? (inCode ? FILE_RE.exec(trimmed) : null);
-	if (!hit) return void 0;
+	if (!hit) return;
 	return {
 		path: hit[1],
 		line: hit[2] ? Number(hit[2]) : void 0
 	};
 }
-/** The path a click on this element means, if any. */
 function hitFor(element) {
-	if (!element) return void 0;
+	if (!element) return;
 	const inCode = element.closest("code") !== null;
 	const text = element.textContent ?? "";
 	const hit = matchPath(text, inCode);
-	if (!hit) return void 0;
-	if (!inCode && hit.path.length < text.trim().length * COVERAGE) return void 0;
+	if (!hit) return;
+	if (!inCode && hit.path.length < text.trim().length * COVERAGE) return;
 	return hit;
 }
 function usePathLinks({ container, onOpen, enabled = true, ignore }) {
@@ -747,12 +649,6 @@ function usePathLinks({ container, onOpen, enabled = true, ignore }) {
 		ignore
 	]);
 }
-/**
-* A transcript path against the session's cwd.
-*
-* Absolute wins outright. Everything else is relative to where the agent is
-* working, which is the only root that makes `worker.mjs` mean anything.
-*/
 function resolveAgainstCwd(path, cwd) {
 	if (path.startsWith("/")) return path;
 	if (!cwd) return path;
@@ -762,33 +658,9 @@ function resolveAgainstCwd(path, cwd) {
 //#region src/components/agent/SessionWorkspace.tsx
 const RAIL_MIN = 180;
 const RAIL_MAX = 520;
-/** How little of the agent column the editor may leave. Below this the composer
-* and a line of transcript stop fitting together, which is the point at which the
-* agent has stopped being usable rather than merely small. */
 const AGENT_MIN = 220;
 const EDITOR_MIN = 120;
-/**
-* A VS Code-shaped workspace around a live session: file tree on the left, open
-* files above, the agent below.
-*
-* **Strictly additive.** {@link SessionPanel} is untouched and still the whole
-* session surface on its own — an embedder picks one or the other, and one that
-* has its own file tree keeps using the panel.
-*
-* Two things here are load-bearing and easy to break:
-*
-* 1. **The editor region is absent from the layout when nothing is open**, not
-*    collapsed to zero height. A zero-height pane leaves a draggable splitter and
-*    parks the composer at an odd offset; absence is what makes the agent's
-*    "claims the full column" state actually look like the panel alone.
-* 2. **`SessionPanel` keeps its position in the tree across that transition.** It
-*    holds the WebSocket attach and the entire transcript, so moving it between
-*    parents — or wrapping it conditionally — would remount it and drop the
-*    session's rendered history on the floor the first time someone opens a file.
-*    The conditional children before it are `? :` expressions that leave a null in
-*    their slot, which is exactly what keeps its index stable.
-*/
-function SessionWorkspace({ client, sessionId, header, transcriptVariant, transcriptDensity, transcriptFont, scrubber, scrubberMarks, stickyPrompt, openSubagent, reveal, onSubagentChange, statusPlacement, controlsSurface, unseen, readOnly, onVitals, defaultRailWidth = 260, defaultRailCollapsed, onRailChange, className }) {
+function SessionWorkspace({ client, sessionId, header, transcriptVariant, transcriptDensity, transcriptFont, scrubber, bookmarks, onToggleBookmark, stickyPrompt, openSubagent, reveal, onSubagentChange, statusPlacement, controlsSurface, fontSize, onLinkClick, unseen, readOnly, onVitals, defaultRailWidth = 260, defaultRailCollapsed, onRailChange, className }) {
 	const { info } = useSessionInfo(client, sessionId);
 	const cwd = info?.cwd;
 	const tree = useHostFileTree(client, cwd);
@@ -913,12 +785,15 @@ function SessionWorkspace({ client, sessionId, header, transcriptVariant, transc
 							transcriptDensity,
 							transcriptFont,
 							scrubber,
-							scrubberMarks,
+							bookmarks,
+							onToggleBookmark,
 							stickyPrompt,
 							openSubagent,
 							reveal,
 							onSubagentChange,
 							controlsSurface,
+							fontSize,
+							onLinkClick,
 							statusPlacement,
 							unseen,
 							readOnly,
@@ -937,9 +812,6 @@ function SessionWorkspace({ client, sessionId, header, transcriptVariant, transc
 		})]
 	});
 }
-/** Live height of an element, for a splitter that needs to know how much room it
-* is dividing. Zero until the first observation, which callers treat as
-* "unmeasured" rather than as a real bound. */
 function useElementHeight(ref) {
 	const [height, setHeight] = useState(0);
 	useLayoutEffect(() => {
@@ -953,8 +825,6 @@ function useElementHeight(ref) {
 	}, [ref]);
 	return height;
 }
-/** Whether there is room for a rail beside the content. Presentation only — the
-* workspace's actual state lives in the hooks from `@workerdeck/react`. */
 function useIsWide() {
 	const [wide, setWide] = useState(true);
 	useEffect(() => {