@crewlethq/ui 0.12.0 → 0.14.0

package/dist/chunk-77IEHFY4.js

@@ -0,0 +1,299 @@
+import { Toolbar } from './chunk-PGRPNDWM.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
+import { tabId } from './chunk-4LDTQWS7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './MarkdownEditor-ZLSHTOIZ.css';
+import { useState, useId, useRef, useLayoutEffect, useImperativeHandle } from 'react';
+import { TableGlyph, ListChecksGlyph, ListOrderedGlyph, ListGlyph, CodeGlyph, ItalicGlyph, BoldGlyph, Heading3Glyph, Heading2Glyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/MarkdownEditor/format.ts
+var MARKDOWN_FORMATS = [
+  "heading2",
+  "heading3",
+  "bold",
+  "italic",
+  "code",
+  "bulletList",
+  "numberedList",
+  "checklist",
+  "table"
+];
+var WRAP = { bold: "**", italic: "_", code: "`" };
+var LINE_MARKER = /^(#{1,6} |- \[[ xX]\] |[-*+] |\d+[.)] )/;
+function insertMarkdown(value, { start, end }, text) {
+  const next = value.slice(0, start) + text + value.slice(end);
+  const caret = start + text.length;
+  return { value: next, selection: { start: caret, end: caret } };
+}
+function formatMarkdown(value, selection, format) {
+  switch (format) {
+    case "bold":
+    case "italic":
+    case "code":
+      return wrap(value, selection, WRAP[format]);
+    case "heading2":
+      return prefixLines(value, selection, () => "## ", (marker) => marker === "## ");
+    case "heading3":
+      return prefixLines(value, selection, () => "### ", (marker) => marker === "### ");
+    case "bulletList":
+      return prefixLines(value, selection, () => "- ", (marker) => /^[-*+] $/.test(marker));
+    case "numberedList":
+      return prefixLines(value, selection, (index) => `${index + 1}. `, (marker) => /^\d+[.)] $/.test(marker));
+    case "checklist":
+      return prefixLines(value, selection, () => "- [ ] ", (marker) => /^- \[[ xX]\] $/.test(marker));
+    case "table":
+      return table(value, selection);
+  }
+}
+function wrap(value, selection, marker) {
+  let { start, end } = selection;
+  while (start < end && /\s/.test(value[start] ?? "")) start += 1;
+  while (end > start && /\s/.test(value[end - 1] ?? "")) end -= 1;
+  const size = marker.length;
+  if (value.slice(start - size, start) === marker && value.slice(end, end + size) === marker) {
+    return {
+      value: value.slice(0, start - size) + value.slice(start, end) + value.slice(end + size),
+      selection: { start: start - size, end: end - size }
+    };
+  }
+  const selected = value.slice(start, end);
+  if (selected.length >= size * 2 && selected.startsWith(marker) && selected.endsWith(marker)) {
+    const inner = selected.slice(size, selected.length - size);
+    return { value: value.slice(0, start) + inner + value.slice(end), selection: { start, end: start + inner.length } };
+  }
+  return {
+    value: value.slice(0, start) + marker + selected + marker + value.slice(end),
+    selection: { start: start + size, end: end + size }
+  };
+}
+function lineSpan(value, { start, end }) {
+  const from = value.lastIndexOf("\n", start - 1) + 1;
+  const last = end > start && value[end - 1] === "\n" ? end - 1 : end;
+  const newline = value.indexOf("\n", last);
+  return [from, newline === -1 ? value.length : newline];
+}
+function prefixLines(value, selection, marker, has) {
+  const [from, to] = lineSpan(value, selection);
+  const lines = value.slice(from, to).split("\n");
+  const single = lines.length === 1;
+  const written = lines.filter((line) => single || line.trim() !== "");
+  const off = written.length > 0 && written.every((line) => has(LINE_MARKER.exec(line)?.[0] ?? ""));
+  let index = 0;
+  let caretShift = 0;
+  const caretLine = value.slice(from, selection.start).split("\n").length - 1;
+  const next = lines.map((line, at) => {
+    if (!single && line.trim() === "") return line;
+    const old = LINE_MARKER.exec(line)?.[0] ?? "";
+    const body = line.slice(old.length);
+    const added = off ? "" : marker(index);
+    index += 1;
+    if (at === caretLine) caretShift = added.length - old.length;
+    return added + body;
+  });
+  const block = next.join("\n");
+  const result = value.slice(0, from) + block + value.slice(to);
+  if (selection.start === selection.end) {
+    const caret = Math.max(from, selection.start + caretShift);
+    return { value: result, selection: { start: caret, end: caret } };
+  }
+  return { value: result, selection: { start: from, end: from + block.length } };
+}
+var TABLE = "| Column | Column |\n| --- | --- |\n|  |  |";
+function table(value, { start, end }) {
+  const before = value.slice(0, start);
+  const after = value.slice(end);
+  const lead = before === "" ? "" : before.endsWith("\n\n") ? "" : before.endsWith("\n") ? "\n" : "\n\n";
+  const trail = after === "" ? "" : after.startsWith("\n\n") ? "" : after.startsWith("\n") ? "\n" : "\n\n";
+  const at = before.length + lead.length + 2;
+  return {
+    value: before + lead + TABLE + trail + after,
+    selection: { start: at, end: at + "Column".length }
+  };
+}
+function markdownWords(value) {
+  return (value.match(/[\p{L}\p{N}][\p{L}\p{N}'’-]*/gu) ?? []).length;
+}
+var LABELS = {
+  toolbar: "Formatting",
+  view: "Editor view",
+  write: "Write",
+  preview: "Preview",
+  empty: "Nothing to preview yet.",
+  formats: {
+    heading2: "Heading",
+    heading3: "Subheading",
+    bold: "Bold",
+    italic: "Italic",
+    code: "Code",
+    bulletList: "Bulleted list",
+    numberedList: "Numbered list",
+    checklist: "Checklist",
+    table: "Table"
+  }
+};
+var GROUPS = [
+  ["heading2", "heading3"],
+  ["bold", "italic", "code"],
+  ["bulletList", "numberedList", "checklist", "table"]
+];
+var GLYPHS = {
+  heading2: /* @__PURE__ */ jsx(Heading2Glyph, {}),
+  heading3: /* @__PURE__ */ jsx(Heading3Glyph, {}),
+  bold: /* @__PURE__ */ jsx(BoldGlyph, {}),
+  italic: /* @__PURE__ */ jsx(ItalicGlyph, {}),
+  code: /* @__PURE__ */ jsx(CodeGlyph, {}),
+  bulletList: /* @__PURE__ */ jsx(ListGlyph, {}),
+  numberedList: /* @__PURE__ */ jsx(ListOrderedGlyph, {}),
+  checklist: /* @__PURE__ */ jsx(ListChecksGlyph, {}),
+  table: /* @__PURE__ */ jsx(TableGlyph, {})
+};
+function MarkdownEditor({
+  value,
+  onChange,
+  label,
+  renderPreview,
+  placeholder,
+  mode: controlled,
+  defaultMode = "write",
+  onModeChange,
+  actions,
+  footer,
+  onSubmit,
+  disabled = false,
+  invalid = false,
+  rows = 14,
+  id,
+  "aria-describedby": describedBy,
+  labels,
+  ref,
+  className
+}) {
+  const text = { ...LABELS, ...labels, formats: { ...LABELS.formats, ...labels?.formats } };
+  const [own, setOwn] = useState(defaultMode);
+  const mode = controlled ?? own;
+  const setMode = (next) => {
+    if (controlled === void 0) setOwn(next);
+    onModeChange?.(next);
+  };
+  const panelId = useId();
+  const field = useRef(null);
+  const pending = useRef(null);
+  useLayoutEffect(() => {
+    const el = field.current;
+    const selection2 = pending.current;
+    if (!el || !selection2) return;
+    pending.current = null;
+    el.focus();
+    el.setSelectionRange(selection2.start, selection2.end);
+  }, [value]);
+  const selection = () => {
+    const el = field.current;
+    return el ? { start: el.selectionStart, end: el.selectionEnd } : { start: value.length, end: value.length };
+  };
+  const apply = (edit) => {
+    if (edit.value === value) return;
+    pending.current = edit.selection;
+    onChange(edit.value);
+  };
+  const editor = {
+    mode,
+    insert: (inserted) => apply(insertMarkdown(value, selection(), inserted)),
+    format: (format) => apply(formatMarkdown(value, selection(), format)),
+    focus: () => field.current?.focus()
+  };
+  useImperativeHandle(ref, () => editor);
+  const onKeyDown = (event) => {
+    const command = event.metaKey || event.ctrlKey;
+    if (!command || event.altKey) return;
+    if (event.key === "Enter" && onSubmit) {
+      event.preventDefault();
+      onSubmit();
+      return;
+    }
+    if (event.shiftKey) return;
+    const key = event.key.toLowerCase();
+    if (key === "b" || key === "i") {
+      event.preventDefault();
+      editor.format(key === "b" ? "bold" : "italic");
+    }
+  };
+  const writing = mode === "write";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-markdown-editor",
+        invalid && "crewlet-markdown-editor--invalid",
+        disabled && "crewlet-markdown-editor--disabled",
+        className
+      ),
+      style: { "--crewlet-markdown-editor-rows": rows },
+      children: [
+        /* @__PURE__ */ jsxs(Toolbar, { label: text.toolbar, className: "crewlet-markdown-editor__bar", children: [
+          GROUPS.map((group, index) => /* @__PURE__ */ jsx("span", { className: "crewlet-markdown-editor__group", children: group.map((format) => /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "sm",
+              variant: "ghost",
+              label: text.formats[format],
+              icon: GLYPHS[format],
+              disabled: disabled || !writing,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => editor.format(format)
+            },
+            format
+          )) }, index)),
+          actions && /* @__PURE__ */ jsx("span", { className: "crewlet-markdown-editor__group", children: actions(editor) }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-markdown-editor__spacer" }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              semantics: "tabs",
+              panelId,
+              size: "sm",
+              label: text.view,
+              options: [
+                { value: "write", label: text.write },
+                { value: "preview", label: text.preview }
+              ],
+              value: mode,
+              onValueChange: setMode
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tabpanel",
+            id: panelId,
+            "aria-labelledby": tabId(panelId, mode),
+            className: "crewlet-markdown-editor__panel",
+            children: writing ? /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: field,
+                id,
+                className: "crewlet-markdown-editor__field",
+                value,
+                onChange: (event) => onChange(event.target.value),
+                onKeyDown,
+                "aria-label": label,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid || void 0,
+                placeholder,
+                disabled,
+                rows,
+                spellCheck: true
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "crewlet-markdown-editor__preview", children: value.trim() === "" ? /* @__PURE__ */ jsx("p", { className: "crewlet-markdown-editor__empty", children: text.empty }) : renderPreview(value) })
+          }
+        ),
+        footer !== void 0 && footer !== null && /* @__PURE__ */ jsx("div", { className: "crewlet-markdown-editor__footer", children: footer })
+      ]
+    }
+  );
+}
+
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords };

package/dist/chunk-A5YKNRG6.js

@@ -0,0 +1,94 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Outline-VCXKKU3E.css';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Outline({ label, items, activeId = null, onSelect, className, ...rest }) {
+  const shallowest = items.reduce((min, item) => Math.min(min, item.level), Number.POSITIVE_INFINITY);
+  const select = onSelect ?? ((id) => scrollToHeading(id));
+  return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": label, className: cx("crewlet-outline", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-outline__title", "aria-hidden": "true", children: label }),
+    /* @__PURE__ */ jsx("ol", { className: "crewlet-outline__list", children: items.map((item) => {
+      const current = item.id === activeId;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cx("crewlet-outline__item", current && "crewlet-outline__item--current"),
+          style: { "--crewlet-outline-depth": item.level - shallowest },
+          "aria-current": current ? "location" : void 0,
+          onClick: () => select(item.id),
+          children: item.label
+        }
+      ) }, item.id);
+    }) })
+  ] });
+}
+function scrollToHeading(id, ownerDocument = document) {
+  const heading = ownerDocument.getElementById(id);
+  if (!heading) return false;
+  if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+  const still = ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  heading.scrollIntoView?.({ behavior: still ? "auto" : "smooth", block: "start" });
+  heading.focus({ preventScroll: true });
+  return true;
+}
+function nextFrame(view, run) {
+  if (typeof view.requestAnimationFrame === "function") {
+    const frame = view.requestAnimationFrame(run);
+    return () => view.cancelAnimationFrame(frame);
+  }
+  const timer = view.setTimeout(run, 0);
+  return () => view.clearTimeout(timer);
+}
+function useActiveHeading(ids, { root = null, offset = 0 } = {}) {
+  const key = ids.join("\0");
+  const [active, setActive] = useState(ids[0] ?? null);
+  const latest = useRef(active);
+  latest.current = active;
+  useEffect(() => {
+    const list = key === "" ? [] : key.split("\0");
+    const owner = root?.ownerDocument ?? document;
+    const view = owner.defaultView;
+    if (!view) return void 0;
+    const measure = () => {
+      if (list.length === 0) {
+        if (latest.current !== null) setActive(null);
+        return;
+      }
+      const top = root ? root.getBoundingClientRect().top : 0;
+      let current = list[0] ?? null;
+      for (const id of list) {
+        const heading = owner.getElementById(id);
+        if (!heading) continue;
+        if (heading.getBoundingClientRect().top - top <= offset + 1) current = id;
+        else break;
+      }
+      const scrolled = root ? root.scrollTop : view.scrollY;
+      const height = root ? root.clientHeight : view.innerHeight;
+      const extent = root ? root.scrollHeight : owner.documentElement.scrollHeight;
+      if (scrolled > 0 && scrolled + height >= extent - 1) current = list[list.length - 1] ?? current;
+      if (current !== latest.current) setActive(current);
+    };
+    let cancel = null;
+    const schedule = () => {
+      if (cancel) return;
+      cancel = nextFrame(view, () => {
+        cancel = null;
+        measure();
+      });
+    };
+    schedule();
+    const target = root ?? view;
+    target.addEventListener("scroll", schedule, { passive: true });
+    view.addEventListener("resize", schedule);
+    return () => {
+      target.removeEventListener("scroll", schedule);
+      view.removeEventListener("resize", schedule);
+      cancel?.();
+    };
+  }, [key, root, offset]);
+  return active;
+}
+
+export { Outline, scrollToHeading, useActiveHeading };

package/dist/{chunk-JCNUQ3US.js → chunk-AXNQCAFC.js}

@@ -1,9 +1,9 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DateTimePicker-4AZBTODT.css';
+import './DateTimePicker-NJ6XH2TE.css';
 import { useMemo, useState, useEffect } from 'react';
 import { CalendarGlyph, ChevronDownGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-UG5ZMAXW.js → chunk-CBZSSKH3.js}

@@ -1,17 +1,17 @@
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toaster-NVDCEIP5.css';
+import './Toaster-VZKISP2S.css';
 import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph, CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var ICONS = {
-  info: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
-  success: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "md" }),
-  warning: /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "md" }),
-  danger: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "md" })
+  info: /* @__PURE__ */ jsx(InfoGlyph, { size: "lg" }),
+  success: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "lg" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "lg" }),
+  danger: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "lg" })
 };
 var TITLES = {
   info: null,

package/dist/{chunk-LAQK4V3Z.js → chunk-DJMLHCLD.js}

@@ -1,5 +1,5 @@
 import { avatarCorner, Avatar } from './chunk-HI6Q2UXQ.js';
-import './ImageUpload-L2GE4JUM.css';
+import './ImageUpload-NVGMN7DP.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-6MU7HNB4.js → chunk-F73MC7EZ.js}

@@ -1,6 +1,6 @@
 import { usePopupLayer, isComposing } from './chunk-R25RGPUB.js';
 import './Listbox-6WJNJQVQ.css';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 
 function useListbox({
   id,
@@ -146,5 +146,50 @@ function useOptionKeys({ listbox, count, disabled, textOf, ends = true }) {
   );
   return { onKeyDown, step, opening };
 }
+var HIGHLIGHT_REST_MS = 120;
+function useHighlightRest(onRest) {
+  const told = useRef(null);
+  const timer = useRef(null);
+  const callback = useRef(onRest);
+  callback.current = onRest;
+  const cancel = useCallback(() => {
+    if (timer.current === null) return;
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  const tell = useCallback((key) => {
+    if (told.current === key) return;
+    told.current = key;
+    callback.current?.(key);
+  }, []);
+  const now = useCallback(
+    (key) => {
+      cancel();
+      tell(key);
+    },
+    [cancel, tell]
+  );
+  const rest = useCallback(
+    (key) => {
+      cancel();
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        tell(key);
+      }, HIGHLIGHT_REST_MS);
+    },
+    [cancel, tell]
+  );
+  useEffect(
+    () => () => {
+      cancel();
+      if (told.current !== null) {
+        told.current = null;
+        callback.current?.(null);
+      }
+    },
+    [cancel]
+  );
+  return useMemo(() => ({ now, rest }), [now, rest]);
+}
 
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys };
+export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, useOptionKeys };

package/dist/{chunk-ZPSOF6VL.js → chunk-FBSEJO2C.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Link-6BEFNMN2.css';
+import './Link-WPMVLKLY.css';
 import { forwardRef, Children, isValidElement, cloneElement } from 'react';
 import { ExternalLinkGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/dist/chunk-FYTIJM2T.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './KeyChip-4XJU4BBE.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var WORD_BREAK = /[\s\-_/·]/;
+function findMatch(text, query, prefer) {
+  const wanted = query.trim().toLowerCase();
+  if (wanted === "") return null;
+  const low = text.toLowerCase();
+  if (low.length !== text.length) return null;
+  let at = -1;
+  if (prefer === "start") {
+    at = low.startsWith(wanted) ? 0 : -1;
+  } else {
+    for (let i = 0; i < low.length; i += 1) {
+      const atWord = i === 0 || WORD_BREAK.test(low.charAt(i - 1));
+      if (atWord && low.startsWith(wanted, i)) {
+        at = i;
+        break;
+      }
+    }
+  }
+  if (at < 0) at = low.indexOf(wanted);
+  return at < 0 ? null : [at, at + wanted.length];
+}
+function highlightMatch(text, query, prefer, className) {
+  const range = query ? findMatch(text, query, prefer) : null;
+  if (!range) return text;
+  const [from, to] = range;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, from),
+    /* @__PURE__ */ jsx("b", { className, children: text.slice(from, to) }),
+    text.slice(to)
+  ] });
+}
+function KeyChip({ children, highlight, className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cx("crewlet-key-chip", className), children: highlightMatch(children, highlight, "start", "crewlet-key-chip__match") });
+}
+
+export { KeyChip, highlightMatch };

package/dist/chunk-H6VKCIWV.js

@@ -0,0 +1,41 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Highlight-DXLV2R6L.css';
+import { Fragment } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function highlightTerms(query) {
+  const words = query.toLowerCase().split(/[^\p{L}\p{N}]+/u).filter((word) => [...word].length >= 2);
+  return [...new Set(words)].sort((a, b) => b.length - a.length || a.localeCompare(b));
+}
+var escape = (term) => term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function highlightRanges(text, terms) {
+  const wanted = terms.map((term) => term.trim()).filter((term) => term !== "");
+  if (text === "" || wanted.length === 0) return [];
+  const ordered = [...new Set(wanted)].sort((a, b) => b.length - a.length);
+  const pattern = new RegExp(`(?<![\\p{L}\\p{N}])(?:${ordered.map(escape).join("|")})`, "giu");
+  const ranges = [];
+  for (const match of text.matchAll(pattern)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    const last = ranges[ranges.length - 1];
+    if (last && start <= last[1]) ranges[ranges.length - 1] = [last[0], Math.max(last[1], end)];
+    else ranges.push([start, end]);
+  }
+  return ranges;
+}
+function Highlight({ text, terms, className, ...rest }) {
+  const ranges = highlightRanges(text, terms);
+  const parts = [];
+  let at = 0;
+  ranges.forEach(([start, end], index) => {
+    if (start > at) parts.push(/* @__PURE__ */ jsx(Fragment, { children: text.slice(at, start) }, `t${index}`));
+    parts.push(
+      /* @__PURE__ */ jsx("mark", { className: "crewlet-highlight__match", children: text.slice(start, end) }, `m${index}`)
+    );
+    at = end;
+  });
+  if (at < text.length) parts.push(/* @__PURE__ */ jsx(Fragment, { children: text.slice(at) }, "tail"));
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cx("crewlet-highlight", className), children: parts });
+}
+
+export { Highlight, highlightRanges, highlightTerms };

package/dist/{chunk-HLBRPES3.js → chunk-IFM63LAG.js}

@@ -1,12 +1,12 @@
-import { Select } from './chunk-SEFMO2EV.js';
+import { Select } from './chunk-IXUU5DLZ.js';
 import { Input } from './chunk-FTEJPHBI.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TimeWindowPicker-GBF4JDFI.css';
+import './TimeWindowPicker-BZ5HHATU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
 import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/chunk-IG75YMUN.js

@@ -0,0 +1,22 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+// src/utils/useMediaMatch.ts
+function useMediaMatch(query) {
+  const subscribe = useCallback(
+    (notify) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+      };
+      const list = window.matchMedia(query);
+      list.addEventListener("change", notify);
+      return () => list.removeEventListener("change", notify);
+    },
+    [query]
+  );
+  const read = useCallback(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
+    [query]
+  );
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+
+export { useMediaMatch };