@derive-to/artifacts 0.0.0-stage → 0.6.0

package/dist/react/styles.css

@@ -0,0 +1,374 @@
+@import "./tokens.css";
+@import "./stage.css";
+@import "./slide-navigator.css";
+@import "./history.css";
+@import "./overlays.css";
+@import "./panel.css";
+
+.oa-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.oa-rail {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font: 14px / 1.5 var(--oa-font);
+  color: var(--oa-text);
+}
+.oa-rail-anchored {
+  min-height: var(--oa-rail-height, 0);
+  position: relative;
+}
+.oa-rail-loose {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.oa-thread {
+  padding: 10px 12px;
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  background: var(--oa-bg);
+  box-shadow: none;
+}
+.oa-rail-anchored > .oa-thread {
+  position: absolute;
+  inset-inline: 0;
+  transition: top 160ms ease;
+}
+.oa-thread[data-active] {
+  border-color: var(--oa-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oa-accent) 18%, transparent);
+}
+.oa-thread[data-resolved] {
+  background: var(--oa-bg-subtle);
+}
+
+.oa-thread-head {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: 0 0 8px;
+}
+.oa-quote {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0 0 0 8px;
+  border: 0;
+  border-left: 3px solid var(--oa-mark);
+  background: none;
+  color: var(--oa-text-muted);
+  font: 12px / 1.4 var(--oa-font);
+  text-align: start;
+  cursor: pointer;
+}
+.oa-thread-new > .oa-quote {
+  margin-bottom: 8px;
+}
+.oa-quote-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.oa-badge {
+  margin-inline-end: 6px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--oa-bg-subtle);
+  font-weight: 600;
+}
+
+.oa-thread > .oa-quote {
+  margin-bottom: 12px;
+}
+.oa-comment {
+  display: flex;
+  gap: 8px;
+}
+.oa-comment-content {
+  min-width: 0;
+  flex: 1;
+}
+.oa-comment-avatar {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--oa-bg-subtle);
+  color: var(--oa-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+.oa-comment-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.oa-comments {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.oa-comment-meta {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  flex-wrap: wrap;
+  color: var(--oa-text-muted);
+  font-size: 12px;
+}
+.oa-author {
+  color: var(--oa-text);
+  font-weight: 600;
+}
+.oa-comment-body {
+  margin: 2px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.oa-thread-actions,
+.oa-composer-actions {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+.oa-thread-actions {
+  justify-content: flex-start;
+  padding-inline-start: 36px;
+}
+.oa-button {
+  min-height: 32px;
+  padding: 4px 10px;
+  border: 1px solid var(--oa-border);
+  border-radius: 6px;
+  background: var(--oa-bg);
+  color: var(--oa-text);
+  font: 500 12px / 1.5 var(--oa-font);
+  cursor: pointer;
+}
+.oa-button-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--oa-text-muted);
+}
+.oa-button-quiet:hover {
+  color: var(--oa-text);
+}
+.oa-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.oa-button-primary {
+  border-color: var(--oa-accent);
+  background: var(--oa-accent);
+  color: var(--oa-accent-text);
+}
+.oa-button:focus-visible,
+.oa-quote:focus-visible,
+.oa-selection-button:focus-visible,
+.oa-composer-input:focus-visible {
+  outline: 2px solid var(--oa-accent);
+  outline-offset: 2px;
+}
+
+.oa-composer {
+  margin-top: 8px;
+}
+.oa-composer-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--oa-border);
+  border-radius: 6px;
+  background: var(--oa-bg);
+  color: var(--oa-text);
+  font: inherit;
+  resize: vertical;
+}
+.oa-composer-error {
+  margin: 4px 0 0;
+  color: var(--oa-danger);
+  font-size: 12px;
+}
+.oa-comment-meta > .oa-button {
+  margin-inline-start: auto;
+}
+.oa-comment-meta > .oa-composer-error {
+  flex-basis: 100%;
+}
+.oa-thread-actions > .oa-composer-error {
+  flex-basis: 100%;
+}
+.oa-empty {
+  margin: 0;
+  color: var(--oa-text-muted);
+}
+.oa-rail-add {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  align-self: stretch;
+  text-align: start;
+}
+
+.oa-presence {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.oa-avatar {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  margin-inline-start: -6px;
+  overflow: hidden;
+  border: 2px solid var(--oa-bg);
+  border-radius: 50%;
+  background: var(--oa-accent);
+  color: var(--oa-accent-text);
+  font: 700 10px / 1 var(--oa-font);
+}
+.oa-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oa-cursor,
+  .oa-rail-anchored > .oa-thread {
+    transition: none;
+  }
+}
+
+.oa-mention {
+  padding: 0 3px;
+  border-radius: 4px;
+  background: var(--oa-bg-subtle);
+  color: var(--oa-accent);
+  font-weight: 600;
+}
+.oa-composer {
+  position: relative;
+}
+.oa-mentions {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  margin: 4px 0 0;
+  padding: 4px;
+  border: 1px solid var(--oa-border);
+  border-radius: 6px;
+  background: var(--oa-bg);
+  list-style: none;
+  box-shadow: var(--oa-shadow);
+}
+.oa-mention-option {
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.oa-mention-option[aria-selected="true"] {
+  background: var(--oa-bg-subtle);
+  color: var(--oa-text);
+}
+
+.oa-composer-field {
+  position: relative;
+  border-radius: 6px;
+  background: var(--oa-bg);
+}
+.oa-composer-field .oa-composer-input {
+  position: relative;
+  background: transparent;
+}
+.oa-composer-mirror {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  overflow: hidden;
+  color: transparent;
+  font: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+}
+.oa-composer-mirror mark {
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--oa-accent) 22%, transparent);
+  color: transparent;
+}
+
+/* Discussion empty states keep a clear next action without a blank panel. */
+.oa-rail-empty {
+  display: grid;
+  justify-items: start;
+  gap: 12px;
+  padding: 12px 4px;
+}
+.oa-rail-empty > svg {
+  color: var(--oa-text-muted);
+}
+.oa-rail-empty .oa-comment-meta > .oa-button {
+  margin-inline-start: auto;
+}
+.oa-comment-meta > .oa-composer-error {
+  flex-basis: 100%;
+}
+.oa-thread-actions > .oa-composer-error {
+  flex-basis: 100%;
+}
+.oa-empty {
+  max-width: 30ch;
+  line-height: 1.6;
+}
+.oa-thread-new {
+  background: var(--oa-bg-subtle);
+}
+.oa-thread-new .oa-composer {
+  margin-top: 0;
+}
+.oa-composer-field .oa-composer-input {
+  min-height: 96px;
+  line-height: 1.6;
+}
+.oa-composer-actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--oa-border);
+}
+.oa-button:hover:not(:disabled) {
+  background: var(--oa-bg-subtle);
+}
+.oa-button-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--oa-accent) 90%, var(--oa-text));
+}
+@media (max-width: 639px) {
+  .oa-button {
+    min-height: 44px;
+  }
+}

package/dist/react/thread-card.d.ts

@@ -0,0 +1,8 @@
+import type { Thread } from "../protocol/index.js";
+export interface ThreadCardProps {
+    thread: Thread;
+    top?: number | undefined;
+}
+/** One conversation: its quote, its comments, a reply box, and resolve. */
+export declare const ThreadCard: import("react").ForwardRefExoticComponent<ThreadCardProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=thread-card.d.ts.map

package/dist/react/thread-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread-card.d.ts","sourceRoot":"","sources":["../../src/react/thread-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAkJlD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACzB;AAED,2EAA2E;AAC3E,eAAO,MAAM,UAAU,yGAqBrB,CAAA"}

package/dist/react/thread-card.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { CommentBody } from "./comment-body.js";
+import { Composer } from "./composer.js";
+import { useArtifact } from "./context.js";
+import { useLabels } from "./labels.js";
+import { relativeTime } from "./time.js";
+const ThreadState = ({ thread }) => {
+    const { setThreadState } = useArtifact();
+    const { labels } = useLabels();
+    const resolved = thread.state === "resolved";
+    const busy = useRef(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const changeState = async () => {
+        if (busy.current)
+            return;
+        busy.current = true;
+        setPending(true);
+        setError(null);
+        try {
+            await setThreadState(thread.id, resolved ? "open" : "resolved");
+        }
+        catch {
+            setError(labels.sendFailed);
+        }
+        finally {
+            busy.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "oa-button oa-button-quiet", disabled: pending, onClick: () => void changeState(), children: resolved ? labels.reopen : labels.resolve }), error ? (_jsx("p", { className: "oa-composer-error", role: "alert", children: error })) : null] }));
+};
+const defaultSlideNumber = (n) => `Slide ${n}`;
+const ThreadQuote = ({ thread }) => {
+    const { missing, anchorSlides, activate } = useArtifact();
+    const { labels } = useLabels();
+    const quote = thread.comments[0]?.quote;
+    if (!quote)
+        return null;
+    const slide = anchorSlides.get(thread.id);
+    return (_jsxs("button", { type: "button", className: "oa-quote", onClick: () => activate(thread.id), children: [thread.state === "resolved" ? (_jsx("span", { className: "oa-badge", children: labels.resolved ?? "Resolved" })) : null, thread.state === "outdated" || missing.has(thread.id) ? (_jsx("span", { className: "oa-badge", children: labels.outdated })) : null, slide === undefined ? null : (_jsx("span", { className: "oa-badge", children: (labels.slideNumber ?? defaultSlideNumber)(slide + 1) })), _jsx("span", { className: "oa-quote-text", children: quote.exact })] }));
+};
+const Comments = ({ thread, canComment }) => {
+    const { labels, locale } = useLabels();
+    return (_jsx("ol", { className: "oa-comments", children: thread.comments.map((comment, index) => (_jsxs("li", { className: "oa-comment", children: [_jsx("span", { className: "oa-comment-avatar", "aria-hidden": "true", children: comment.author.avatarUrl ? (_jsx("img", { src: comment.author.avatarUrl, alt: "" })) : (comment.author.name.slice(0, 1).toUpperCase()) }), _jsxs("div", { className: "oa-comment-content", children: [_jsxs("div", { className: "oa-comment-meta", children: [_jsx("span", { className: "oa-author", children: comment.author.name }), _jsx("time", { dateTime: comment.createdAt, children: relativeTime(comment.createdAt, { locale, justNow: labels.justNow }) }), canComment && index === 0 ? _jsx(ThreadState, { thread: thread }) : null] }), _jsx(CommentBody, { body: comment.body })] })] }, comment.id))) }));
+};
+const ThreadReply = ({ thread, canComment }) => {
+    const { activate, reply } = useArtifact();
+    const { labels } = useLabels();
+    const [replying, setReplying] = useState(false);
+    const box = useRef(null);
+    const resolved = thread.state === "resolved";
+    return (_jsxs(_Fragment, { children: [canComment && ((!resolved && !replying) || thread.comments.length === 0) ? (_jsxs("div", { className: "oa-thread-actions", children: [!resolved && !replying ? (_jsx("button", { type: "button", className: "oa-button oa-button-quiet", onClick: () => {
+                            activate(thread.id);
+                            setReplying(true);
+                            // Typing goes where the reply box opened, not to the page behind it.
+                            requestAnimationFrame(() => box.current?.querySelector("textarea")?.focus());
+                        }, children: labels.reply })) : null, thread.comments.length === 0 ? _jsx(ThreadState, { thread: thread }) : null] })) : null, canComment ? (_jsx("div", { ref: box, hidden: !replying || resolved, children: _jsx(Composer, { label: labels.reply, placeholder: labels.replyPlaceholder, submitLabel: labels.reply, onSubmit: async (body) => {
+                        await reply(thread.id, body);
+                        setReplying(false);
+                    }, onCancel: () => setReplying(false) }) })) : null] }));
+};
+/** One conversation: its quote, its comments, a reply box, and resolve. */
+export const ThreadCard = forwardRef(({ thread, top }, ref) => {
+    const { artifact, activeThreadId } = useArtifact();
+    const { labels } = useLabels();
+    const canComment = artifact?.can.includes("comment") ?? false;
+    const active = activeThreadId === thread.id;
+    const resolved = thread.state === "resolved";
+    const author = thread.comments[0]?.author.name ?? "";
+    return (_jsxs("article", { ref: ref, className: "oa-thread", "data-active": active || undefined, "data-resolved": resolved || undefined, style: top === undefined ? undefined : { top }, "aria-label": labels.commentBy(author), children: [_jsx(ThreadQuote, { thread: thread }), _jsx(Comments, { thread: thread, canComment: canComment }), _jsx(ThreadReply, { thread: thread, canComment: canComment })] }));
+});
+ThreadCard.displayName = "ThreadCard";
+//# sourceMappingURL=thread-card.js.map

package/dist/react/thread-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread-card.js","sourceRoot":"","sources":["../../src/react/thread-card.tsx"],"names":[],"mappings":"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"}

package/dist/react/time.d.ts

@@ -0,0 +1,7 @@
+/** "3 min. ago", "yesterday", "just now", in the viewer's locale. */
+export declare const relativeTime: (iso: string, { locale, justNow, now, }?: {
+    locale?: string | undefined;
+    justNow?: string;
+    now?: number;
+}) => string;
+//# sourceMappingURL=time.d.ts.map

package/dist/react/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/react/time.ts"],"names":[],"mappings":"AASA,qEAAqE;AACrE,eAAO,MAAM,YAAY,QAClB,MAAM,8BAKR;IACD,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,WAQF,CAAA"}

package/dist/react/time.js

@@ -0,0 +1,19 @@
+const UNITS = [
+    ["year", 31_536_000],
+    ["month", 2_592_000],
+    ["week", 604_800],
+    ["day", 86_400],
+    ["hour", 3_600],
+    ["minute", 60],
+];
+/** "3 min. ago", "yesterday", "just now", in the viewer's locale. */
+export const relativeTime = (iso, { locale, justNow = "just now", now = Date.now(), } = {}) => {
+    const seconds = Math.round((new Date(iso).getTime() - now) / 1000);
+    const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
+    for (const [unit, size] of UNITS) {
+        if (Math.abs(seconds) >= size)
+            return format.format(Math.round(seconds / size), unit);
+    }
+    return justNow;
+};
+//# sourceMappingURL=time.js.map

package/dist/react/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/react/time.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAA4C;IACrD,CAAC,MAAM,EAAE,UAAU,CAAC;IACpB,CAAC,OAAO,EAAE,SAAS,CAAC;IACpB,CAAC,MAAM,EAAE,OAAO,CAAC;IACjB,CAAC,KAAK,EAAE,MAAM,CAAC;IACf,CAAC,MAAM,EAAE,KAAK,CAAC;IACf,CAAC,QAAQ,EAAE,EAAE,CAAC;CACf,CAAA;AAED,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,GAAW,EACX,EACE,MAAM,EACN,OAAO,GAAG,UAAU,EACpB,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GACjB,GAIG,EAAE,EACN,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAA;IAClE,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;IACvF,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QACjC,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IACvF,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/react/tokens.css

@@ -0,0 +1,58 @@
+/* Kit defaults. Every token reads the MCP Apps host style variable first, so a host's theme
+   flows into the components; the second value is the kit's fallback. */
+.oa-root,
+.oa-stage,
+.oa-rail,
+.oa-versions,
+.oa-edit-controls,
+.oa-presence,
+.oa-slide-nav,
+.oa-panel,
+.oa-list,
+.oa-sharing,
+.oa-role {
+  --oa-bg: var(--color-background-primary, #ffffff);
+  --oa-bg-subtle: var(--color-background-secondary, #f6f6f4);
+  --oa-present-bg: #000;
+  --oa-text: var(--color-text-primary, #1b1b18);
+  --oa-text-muted: var(--color-text-secondary, #6b6a64);
+  --oa-border: var(--color-border-primary, #e6e4de);
+  --oa-accent: var(--color-ring-primary, #3355d1);
+  --oa-accent-text: var(--color-text-inverse, #ffffff);
+  --oa-danger: var(--color-text-danger, #b42318);
+  --oa-mark: rgb(255 213 79 / 0.45);
+  --oa-cursor: #d14d72;
+  --oa-font: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+  --oa-radius: var(--border-radius-md, 8px);
+  --oa-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.06));
+  /* Behind the page: the page's own background, so a short page has no band under it. */
+  --oa-canvas: var(--oa-bg);
+  --oa-link-bg: #fff4e5;
+  --oa-link-text: #8a4b08;
+  --oa-owner-bg: color-mix(in srgb, var(--oa-accent) 12%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  .oa-root,
+  .oa-stage,
+  .oa-rail,
+  .oa-versions,
+  .oa-edit-controls,
+  .oa-presence,
+  .oa-slide-nav,
+  .oa-panel,
+  .oa-list,
+  .oa-sharing,
+  .oa-role {
+    --oa-bg: var(--color-background-primary, #1c1c1a);
+    --oa-bg-subtle: var(--color-background-secondary, #232320);
+    --oa-text: var(--color-text-primary, #ecebe6);
+    --oa-text-muted: var(--color-text-secondary, #a3a29a);
+    --oa-border: var(--color-border-primary, #33322e);
+    --oa-accent: var(--color-ring-primary, #8fa6ff);
+    --oa-accent-text: var(--color-text-inverse, #141413);
+    --oa-mark: rgb(255 213 79 / 0.3);
+    --oa-link-bg: #2e2208;
+    --oa-link-text: #f5c26b;
+  }
+}

package/dist/react/use-actions.d.ts

@@ -0,0 +1,27 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { ArtifactClient, ArtifactView } from "../host/index.js";
+import { type Artifact, type Rect, type Thread } from "../protocol/index.js";
+import type { ArtifactActions, Selection } from "./context.js";
+import type { EditingActions } from "./use-editing.js";
+type AnchorGeometry = {
+    positions: Map<string, Rect>;
+    missing: Set<string>;
+    slides: Map<string, number>;
+};
+export interface ActionInputs {
+    client: ArtifactClient;
+    artifactId: string;
+    artifact: Artifact | null;
+    selection: Selection | null;
+    setThreads: Dispatch<SetStateAction<Thread[]>>;
+    setSelection: Dispatch<SetStateAction<Selection | null>>;
+    setActive: Dispatch<SetStateAction<string | null>>;
+    setComposing: Dispatch<SetStateAction<boolean>>;
+    setGeometry: Dispatch<SetStateAction<AnchorGeometry>>;
+    setViewState: Dispatch<SetStateAction<ArtifactView | null>>;
+}
+/** Stable actions over the provider's state. Fresh values are read through refs, so the
+ *  identities never change and the stage never remounts because of them. */
+export declare const useActions: (inputs: ActionInputs) => Omit<ArtifactActions, keyof EditingActions | "refresh">;
+export {};
+//# sourceMappingURL=use-actions.d.ts.map

package/dist/react/use-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-actions.d.ts","sourceRoot":"","sources":["../../src/react/use-actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAc,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,sBAAsB,CAAA;AACxF,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGtD,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC5B,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACpB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC5B,CAAA;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,cAAc,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAA;IACzB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAC9C,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAA;IACxD,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;IAClD,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IAC/C,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAA;IACrD,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAA;CAC5D;AAyBD;4EAC4E;AAC5E,eAAO,MAAM,UAAU,WACb,YAAY,KACnB,IAAI,CAAC,eAAe,EAAE,MAAM,cAAc,GAAG,SAAS,CAmExD,CAAA"}