@agent-native/toolkit 0.6.0 → 0.8.0

package/src/editor.css

@@ -0,0 +1,510 @@
+.an-rich-md-wrapper {
+  min-height: 100%;
+  position: relative;
+  cursor: text;
+}
+
+.an-rich-md-wrapper--readonly {
+  cursor: default;
+}
+
+.an-rich-md-loading {
+  min-height: 7rem;
+}
+
+.an-rich-md-prose {
+  outline: none;
+  color: hsl(var(--foreground));
+  line-height: 1.65;
+  font-size: 0.95rem;
+  min-height: 1.65em;
+  text-align: start;
+}
+
+.an-rich-md-prose > *:first-child {
+  margin-top: 0;
+}
+
+.an-rich-md-prose h1 {
+  font-size: 1.85em;
+  font-weight: 700;
+  margin: 1em 0 0.3em;
+  line-height: 1.18;
+}
+
+.an-rich-md-prose h2 {
+  font-size: 1.45em;
+  font-weight: 650;
+  margin: 0.9em 0 0.25em;
+  line-height: 1.25;
+}
+
+.an-rich-md-prose h3 {
+  font-size: 1.18em;
+  font-weight: 650;
+  margin: 0.75em 0 0.2em;
+  line-height: 1.32;
+}
+
+.an-rich-md-prose h4 {
+  font-size: 1em;
+  font-weight: 650;
+  margin: 0.65em 0 0.15em;
+  line-height: 1.35;
+}
+
+.an-rich-md-prose p {
+  margin: 0.45em 0;
+  min-height: 1.65em;
+}
+
+.an-rich-md-prose ul:not(.an-rich-md-task-list),
+.an-rich-md-prose ol {
+  padding-inline-start: 1.45em;
+  margin: 0.35em 0;
+}
+
+.an-rich-md-prose ul:not(.an-rich-md-task-list) {
+  list-style-type: disc;
+}
+
+.an-rich-md-prose ol {
+  list-style-type: decimal;
+}
+
+.an-rich-md-prose li {
+  margin: 0.12em 0;
+}
+
+.an-rich-md-prose li p {
+  margin: 0;
+}
+
+.an-rich-md-task-list {
+  list-style: none;
+  margin: 0.35em 0;
+  padding-inline-start: 0;
+}
+
+.an-rich-md-task-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45em;
+  margin: 0.18em 0;
+}
+
+.an-rich-md-task-list li label {
+  display: inline-flex;
+  align-items: center;
+  height: 1.65em;
+}
+
+.an-rich-md-task-list li input[type="checkbox"] {
+  width: 0.95em;
+  height: 0.95em;
+  accent-color: hsl(var(--primary));
+}
+
+.an-rich-md-task-list li > div {
+  flex: 1;
+}
+
+.an-rich-md-prose blockquote {
+  border-inline-start: 2px solid hsl(var(--border));
+  padding-inline-start: 0.9em;
+  margin: 0.45em 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-rich-md-prose code {
+  unicode-bidi: isolate;
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.88em;
+  background: hsl(var(--muted));
+  padding: 0.12em 0.32em;
+  border-radius: 4px;
+}
+
+.an-rich-md-prose :not(pre) > code {
+  direction: ltr;
+}
+
+.an-rich-md-prose pre {
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.86em;
+  /* Theme-aware code surface: follows the app's muted/foreground/border tokens
+     so block code respects light and dark mode (the token palette below is
+     tuned to read on a muted surface in both). */
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  padding: 0.8em 1em;
+  margin: 0.55em 0;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+.an-rich-md-prose pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* highlight.js (lowlight) token palette. Scoped to block code so inline `code`
+   keeps its own background. No highlight.js base theme is imported; these rules
+   are the entire theme, tuned (mid-lightness HSL) to read on the muted surface
+   above in both light and dark mode. */
+.an-rich-md-prose pre code .hljs-comment,
+.an-rich-md-prose pre code .hljs-quote {
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+.an-rich-md-prose pre code .hljs-keyword,
+.an-rich-md-prose pre code .hljs-selector-tag,
+.an-rich-md-prose pre code .hljs-literal,
+.an-rich-md-prose pre code .hljs-doctag {
+  color: hsl(280 60% 58%);
+}
+.an-rich-md-prose pre code .hljs-string,
+.an-rich-md-prose pre code .hljs-regexp,
+.an-rich-md-prose pre code .hljs-addition {
+  color: hsl(140 52% 40%);
+}
+.an-rich-md-prose pre code .hljs-number,
+.an-rich-md-prose pre code .hljs-symbol,
+.an-rich-md-prose pre code .hljs-literal {
+  color: hsl(28 78% 48%);
+}
+.an-rich-md-prose pre code .hljs-meta {
+  color: hsl(var(--muted-foreground));
+}
+.an-rich-md-prose pre code .hljs-title,
+.an-rich-md-prose pre code .hljs-title.function_,
+.an-rich-md-prose pre code .hljs-section {
+  color: hsl(210 72% 52%);
+}
+.an-rich-md-prose pre code .hljs-built_in,
+.an-rich-md-prose pre code .hljs-type,
+.an-rich-md-prose pre code .hljs-title.class_,
+.an-rich-md-prose pre code .hljs-variable.language_ {
+  color: hsl(190 64% 40%);
+}
+.an-rich-md-prose pre code .hljs-attr,
+.an-rich-md-prose pre code .hljs-attribute,
+.an-rich-md-prose pre code .hljs-property,
+.an-rich-md-prose pre code .hljs-params {
+  color: hsl(35 68% 46%);
+}
+.an-rich-md-prose pre code .hljs-name,
+.an-rich-md-prose pre code .hljs-tag,
+.an-rich-md-prose pre code .hljs-selector-id,
+.an-rich-md-prose pre code .hljs-selector-class {
+  color: hsl(350 62% 52%);
+}
+.an-rich-md-prose pre code .hljs-deletion {
+  color: hsl(0 62% 52%);
+}
+.an-rich-md-prose pre code .hljs-emphasis {
+  font-style: italic;
+}
+.an-rich-md-prose pre code .hljs-strong {
+  font-weight: 600;
+}
+
+/* In dark mode, lift the token lightness for contrast on the dark muted surface. */
+.dark .an-rich-md-prose pre code .hljs-keyword,
+.dark .an-rich-md-prose pre code .hljs-selector-tag,
+.dark .an-rich-md-prose pre code .hljs-literal,
+.dark .an-rich-md-prose pre code .hljs-doctag {
+  color: hsl(280 72% 72%);
+}
+.dark .an-rich-md-prose pre code .hljs-string,
+.dark .an-rich-md-prose pre code .hljs-regexp,
+.dark .an-rich-md-prose pre code .hljs-addition {
+  color: hsl(140 48% 62%);
+}
+.dark .an-rich-md-prose pre code .hljs-number,
+.dark .an-rich-md-prose pre code .hljs-symbol,
+.dark .an-rich-md-prose pre code .hljs-literal {
+  color: hsl(30 85% 65%);
+}
+.dark .an-rich-md-prose pre code .hljs-title,
+.dark .an-rich-md-prose pre code .hljs-title.function_,
+.dark .an-rich-md-prose pre code .hljs-section {
+  color: hsl(210 80% 70%);
+}
+.dark .an-rich-md-prose pre code .hljs-built_in,
+.dark .an-rich-md-prose pre code .hljs-type,
+.dark .an-rich-md-prose pre code .hljs-title.class_,
+.dark .an-rich-md-prose pre code .hljs-variable.language_ {
+  color: hsl(190 70% 62%);
+}
+.dark .an-rich-md-prose pre code .hljs-attr,
+.dark .an-rich-md-prose pre code .hljs-attribute,
+.dark .an-rich-md-prose pre code .hljs-property,
+.dark .an-rich-md-prose pre code .hljs-params {
+  color: hsl(40 78% 66%);
+}
+.dark .an-rich-md-prose pre code .hljs-name,
+.dark .an-rich-md-prose pre code .hljs-tag,
+.dark .an-rich-md-prose pre code .hljs-selector-id,
+.dark .an-rich-md-prose pre code .hljs-selector-class {
+  color: hsl(350 72% 68%);
+}
+
+.an-rich-md-prose hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.1em 0;
+}
+
+.an-rich-md-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.7em 0;
+  table-layout: fixed;
+}
+
+.an-rich-md-table td,
+.an-rich-md-table th {
+  border: 1px solid hsl(var(--border));
+  padding: 0.45em 0.55em;
+  vertical-align: top;
+}
+
+.an-rich-md-table th {
+  background: hsl(var(--muted) / 0.6);
+  font-weight: 650;
+}
+
+.an-rich-md-table p {
+  margin: 0;
+}
+
+.an-rich-md-prose strong {
+  font-weight: 650;
+}
+
+.an-rich-md-prose em {
+  font-style: italic;
+}
+
+.an-rich-md-prose s {
+  text-decoration: line-through;
+}
+
+.an-rich-md-link {
+  color: hsl(var(--foreground));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: hsl(var(--muted-foreground));
+  cursor: pointer;
+}
+
+.an-rich-md-link:hover {
+  text-decoration-color: hsl(var(--foreground));
+}
+
+.an-rich-md-prose p.is-editor-empty:first-child::before,
+.an-rich-md-prose p.is-empty::before,
+.an-rich-md-prose h1.is-empty::before,
+.an-rich-md-prose h2.is-empty::before,
+.an-rich-md-prose h3.is-empty::before,
+.an-rich-md-prose h4.is-empty::before {
+  content: attr(data-placeholder);
+  float: inline-start;
+  color: hsl(var(--muted-foreground));
+  opacity: 0.55;
+  pointer-events: none;
+  height: 0;
+}
+
+.an-rich-md-prose ::selection {
+  background: hsl(var(--ring) / 0.22);
+}
+
+.an-rich-md-bubble-toolbar {
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  padding: 3px;
+  box-shadow:
+    0 4px 16px rgb(0 0 0 / 0.25),
+    0 0 0 1px hsl(var(--border));
+}
+
+.an-rich-md-bubble-items,
+.an-rich-md-link-editor {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.an-rich-md-bubble-button {
+  padding: 3px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: hsl(var(--popover-foreground) / 0.76);
+  background: none;
+  border: none;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.an-rich-md-bubble-button:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-rich-md-bubble-button--active {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-rich-md-bubble-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: hsl(var(--border));
+}
+
+.an-rich-md-link-editor {
+  padding: 4px;
+}
+
+.an-rich-md-link-editor input {
+  width: 10rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: hsl(var(--popover-foreground));
+  font-size: 12px;
+  padding: 2px 4px;
+}
+
+.an-rich-md-link-editor button {
+  border: none;
+  background: none;
+  color: hsl(var(--primary));
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+}
+
+.an-rich-md-slash-menu {
+  z-index: 9999;
+  width: min(420px, calc(100vw - 24px));
+  min-width: 230px;
+  max-height: 320px;
+  overflow-y: auto;
+  color: hsl(var(--foreground));
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 7px;
+  box-shadow:
+    0 4px 20px rgb(0 0 0 / 0.12),
+    0 0 0 1px rgb(0 0 0 / 0.04);
+  padding: 4px 0;
+}
+
+.an-rich-md-slash-heading {
+  padding: 4px 10px;
+  font-size: 10px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-rich-md-slash-item {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  text-align: start;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--foreground));
+  font-size: 13px;
+}
+
+.an-rich-md-slash-item:hover,
+.an-rich-md-slash-item--active {
+  background: hsl(var(--accent));
+}
+
+.an-rich-md-slash-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  font-size: 11px;
+  font-weight: 650;
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.an-rich-md-slash-copy {
+  display: block;
+  min-width: 0;
+  flex: 1;
+}
+
+.an-rich-md-slash-title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.an-rich-md-slash-description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Shared block-level image node (the editor's `.an-rich-md-image` and the
+   read-only markdown renderer's <img>). Constrained to the prose width and
+   responsive; a still-uploading placeholder (empty src) shows a subtle frame. */
+.an-rich-md-prose img,
+.an-rich-md-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+  border-radius: 8px;
+}
+
+.an-rich-md-image[src=""],
+.an-rich-md-image:not([src]) {
+  min-height: 64px;
+  background: hsl(var(--muted));
+  border: 1px dashed hsl(var(--border));
+}
+
+.ProseMirror-selectednode.an-rich-md-image {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-mobile.js";
+export * from "./use-toast.js";

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "../ui/toast.js";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./app-shell/index.js";
+export * from "./collab-ui/index.js";
+export * from "./hooks/index.js";
+export * from "./onboarding/index.js";
+export * from "./provider.js";
+export * from "./sharing/index.js";
+export * from "./ui/index.js";
+export * from "./utils.js";