@malette/agent-sdk 0.1.3-beta.11 → 0.1.3-beta.12

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.
Files changed (5) hide show
  1. package/dist/index.js +276 -78
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +277 -79
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { create } from 'zustand';
4
4
  import { devtools } from 'zustand/middleware';
5
5
  import * as React16 from 'react';
6
6
  import React16__default, { createContext, memo, useState, useEffect, useCallback, useMemo, useRef, useImperativeHandle, useContext } from 'react';
7
- import { Image, X, Check, Copy, FileText, Code2, FileJson, FileCode, CheckCheck, Eye, ExternalLink, Download, ChevronUp, ChevronDown, Maximize2, Loader2, Clock, Sparkles, Bot, AlertTriangle, Play, Pencil, AlertCircle, Square, RotateCcw, SkipForward, Zap, ChevronRight, CheckCircle2, XCircle, Ban, Users, Volume2, Pause, VolumeX, Lightbulb, RefreshCw, BookmarkPlus, Trash2, PenLine, ImageIcon, GripVertical, Minimize2, Smartphone, Tablet, Monitor, Globe, FileImage, Minus, Plus, Maximize, Video, ChevronLeft, LayoutGrid, Undo2, Redo2, Save, PanelLeft, ArrowLeft, Settings, UserCheck, ShieldCheck, Shield, User, Lock, Share2, PanelLeftClose, Search, MessageSquare, Unlink, ImagePlus, BookOpen, Send, HelpCircle, Calendar, Link, Tag, EyeOff, Folder, Wand2, Mic, CheckCircle, ListOrdered, FileEdit, Edit, ArrowRight } from 'lucide-react';
7
+ import { Image, X, Check, Copy, FileText, Code2, FileJson, FileCode, CheckCheck, Eye, ExternalLink, Download, ChevronUp, ChevronDown, Maximize2, Loader2, Clock, Sparkles, Bot, AlertTriangle, Play, Pencil, AlertCircle, Square, RotateCcw, SkipForward, Zap, ChevronRight, CheckCircle2, XCircle, Ban, Users, Volume2, Pause, VolumeX, Lightbulb, RefreshCw, BookmarkPlus, Trash2, PenLine, ImageIcon, GripVertical, Minimize2, Smartphone, Tablet, Monitor, Globe, FileImage, Minus, Plus, Maximize, Video, ChevronLeft, LayoutGrid, Undo2, Redo2, Save, PanelLeft, ArrowLeft, Settings, UserCheck, ShieldCheck, Shield, User, Lock, Share2, PanelLeftClose, Search, MessageSquare, Unlink, ImagePlus, BookOpen, Send, HelpCircle, Calendar, Link, Tag, EyeOff, Folder, Wand2, Mic, CheckCircle, ListOrdered, FileEdit, Edit, MonitorPlay, ArrowRight } from 'lucide-react';
8
8
  import ReactMarkdown from 'react-markdown';
9
9
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
10
10
  import ReactDOM, { createPortal } from 'react-dom';
@@ -26915,19 +26915,57 @@ function ShareReplayPage({ shareId, onNavigateBack }) {
26915
26915
  ] });
26916
26916
  }
26917
26917
  var typeConfig = {
26918
- html: { icon: Globe, label: "HTML", color: "text-orange-400", bgColor: "bg-orange-500/10" },
26919
- svg: { icon: Globe, label: "SVG", color: "text-orange-400", bgColor: "bg-orange-500/10" },
26920
- markdown: { icon: FileText, label: "Markdown", color: "text-blue-400", bgColor: "bg-blue-500/10" },
26921
- json: { icon: FileJson, label: "JSON", color: "text-yellow-400", bgColor: "bg-yellow-500/10" },
26922
- code: { icon: FileCode, label: "Code", color: "text-purple-400", bgColor: "bg-purple-500/10" },
26923
- text: { icon: FileText, label: "Text", color: "text-zinc-400", bgColor: "bg-zinc-500/10" },
26924
- image: { icon: FileImage, label: "Image", color: "text-green-400", bgColor: "bg-green-500/10" },
26925
- video: { icon: Video, label: "Video", color: "text-pink-400", bgColor: "bg-pink-500/10" }
26918
+ html: { icon: Globe, label: "HTML", color: "#fb923c" },
26919
+ svg: { icon: Globe, label: "SVG", color: "#fb923c" },
26920
+ markdown: { icon: FileText, label: "Markdown", color: "#60a5fa" },
26921
+ json: { icon: FileJson, label: "JSON", color: "#facc15" },
26922
+ code: { icon: FileCode, label: "Code", color: "#c084fc" },
26923
+ text: { icon: FileText, label: "Text", color: "#a1a1aa" },
26924
+ image: { icon: FileImage, label: "Image", color: "#4ade80" },
26925
+ video: { icon: Video, label: "Video", color: "#f472b6" }
26926
26926
  };
26927
+ function FullscreenHtmlPreview({ content }) {
26928
+ const blobUrl = useMemo(() => {
26929
+ const styleInjection = `
26930
+ <style>
26931
+ html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; box-sizing: border-box; }
26932
+ * { box-sizing: border-box; }
26933
+ </style>`;
26934
+ let modified = content;
26935
+ if (content.includes("<head>")) {
26936
+ modified = content.replace("<head>", "<head>" + styleInjection);
26937
+ } else if (content.includes("<html>")) {
26938
+ modified = content.replace("<html>", "<html><head>" + styleInjection + "</head>");
26939
+ } else if (/<!(DOCTYPE|doctype)/i.test(content)) {
26940
+ modified = content.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
26941
+ } else {
26942
+ modified = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${content}</body></html>`;
26943
+ }
26944
+ const blob = new Blob([modified], { type: "text/html" });
26945
+ return URL.createObjectURL(blob);
26946
+ }, [content]);
26947
+ useEffect(() => {
26948
+ return () => URL.revokeObjectURL(blobUrl);
26949
+ }, [blobUrl]);
26950
+ return /* @__PURE__ */ jsx(
26951
+ "iframe",
26952
+ {
26953
+ src: blobUrl,
26954
+ style: { display: "block", width: "100%", height: "100%", border: "none", background: "white" },
26955
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals",
26956
+ title: "HTML Preview"
26957
+ }
26958
+ );
26959
+ }
26927
26960
  function PublicArtifactPage({ shareToken, onNavigateBack }) {
26928
26961
  const [pageState, setPageState] = useState("loading");
26929
26962
  const [error, setError] = useState(null);
26930
26963
  const [artifact, setArtifact] = useState(null);
26964
+ const [isTheaterMode, setIsTheaterMode] = useState(false);
26965
+ const [isBrowserFullscreen, setIsBrowserFullscreen] = useState(false);
26966
+ const [showTheaterControls, setShowTheaterControls] = useState(true);
26967
+ const theaterTimerRef = useRef(null);
26968
+ const isFullscreenSupported = typeof document !== "undefined" && typeof document.documentElement?.requestFullscreen === "function";
26931
26969
  useEffect(() => {
26932
26970
  if (!shareToken) {
26933
26971
  setPageState("not-found");
@@ -26951,31 +26989,13 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
26951
26989
  }
26952
26990
  load();
26953
26991
  }, [shareToken]);
26954
- const handleShare = useCallback(() => {
26955
- const url = window.location.href;
26956
- navigator.clipboard.writeText(url);
26957
- toast.success("\u94FE\u63A5\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
26958
- }, []);
26959
26992
  const handleDownload = useCallback(() => {
26960
26993
  if (!artifact) return;
26961
- const extMap = {
26962
- html: "html",
26963
- svg: "svg",
26964
- markdown: "md",
26965
- json: "json",
26966
- code: artifact.language || "txt",
26967
- text: "txt"
26968
- };
26969
- const ext = extMap[artifact.type] || "txt";
26970
- const mimeMap = {
26971
- html: "text/html",
26972
- svg: "image/svg+xml",
26973
- markdown: "text/markdown",
26974
- json: "application/json",
26975
- code: "text/plain",
26976
- text: "text/plain"
26977
- };
26978
- const mime = mimeMap[artifact.type] || "text/plain";
26994
+ const type = artifact.type?.toLowerCase() ?? "text";
26995
+ const extMap = { html: "html", svg: "svg", markdown: "md", json: "json", code: artifact.language || "txt", text: "txt" };
26996
+ const ext = extMap[type] || "txt";
26997
+ const mimeMap = { html: "text/html", svg: "image/svg+xml", markdown: "text/markdown", json: "application/json", code: "text/plain", text: "text/plain" };
26998
+ const mime = mimeMap[type] || "text/plain";
26979
26999
  const blob = new Blob([artifact.content], { type: mime });
26980
27000
  const url = URL.createObjectURL(blob);
26981
27001
  const link2 = document.createElement("a");
@@ -26986,15 +27006,85 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
26986
27006
  document.body.removeChild(link2);
26987
27007
  URL.revokeObjectURL(url);
26988
27008
  }, [artifact]);
27009
+ const toggleTheaterMode = useCallback(() => {
27010
+ setIsTheaterMode((prev) => !prev);
27011
+ setShowTheaterControls(true);
27012
+ }, []);
27013
+ const exitTheaterMode = useCallback(() => {
27014
+ setIsTheaterMode(false);
27015
+ setShowTheaterControls(true);
27016
+ }, []);
27017
+ const toggleBrowserFullscreen = useCallback(() => {
27018
+ if (!document.fullscreenElement) {
27019
+ document.documentElement.requestFullscreen().catch(() => {
27020
+ });
27021
+ } else {
27022
+ document.exitFullscreen().catch(() => {
27023
+ });
27024
+ }
27025
+ }, []);
27026
+ useEffect(() => {
27027
+ const handleFullscreenChange = () => {
27028
+ const isFs = !!document.fullscreenElement;
27029
+ setIsBrowserFullscreen(isFs);
27030
+ if (isFs) {
27031
+ setIsTheaterMode(true);
27032
+ setShowTheaterControls(true);
27033
+ } else {
27034
+ setIsTheaterMode(false);
27035
+ }
27036
+ };
27037
+ document.addEventListener("fullscreenchange", handleFullscreenChange);
27038
+ return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
27039
+ }, []);
27040
+ useEffect(() => {
27041
+ if (!isTheaterMode) return;
27042
+ const handleInteraction = () => {
27043
+ setShowTheaterControls(true);
27044
+ if (theaterTimerRef.current) clearTimeout(theaterTimerRef.current);
27045
+ theaterTimerRef.current = setTimeout(() => setShowTheaterControls(false), 3e3);
27046
+ };
27047
+ theaterTimerRef.current = setTimeout(() => setShowTheaterControls(false), 3e3);
27048
+ window.addEventListener("mousemove", handleInteraction);
27049
+ window.addEventListener("touchstart", handleInteraction);
27050
+ return () => {
27051
+ window.removeEventListener("mousemove", handleInteraction);
27052
+ window.removeEventListener("touchstart", handleInteraction);
27053
+ if (theaterTimerRef.current) clearTimeout(theaterTimerRef.current);
27054
+ };
27055
+ }, [isTheaterMode]);
27056
+ useEffect(() => {
27057
+ const handleKeyDown = (e) => {
27058
+ const tag = e.target?.tagName;
27059
+ if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
27060
+ if (e.key === "Escape") {
27061
+ if (document.fullscreenElement) return;
27062
+ if (isTheaterMode) exitTheaterMode();
27063
+ return;
27064
+ }
27065
+ if ((e.key === "f" || e.key === "F") && !e.ctrlKey && !e.metaKey && !e.altKey) {
27066
+ e.preventDefault();
27067
+ if (isFullscreenSupported) toggleBrowserFullscreen();
27068
+ return;
27069
+ }
27070
+ if ((e.key === "t" || e.key === "T") && !e.ctrlKey && !e.metaKey && !e.altKey) {
27071
+ e.preventDefault();
27072
+ toggleTheaterMode();
27073
+ }
27074
+ };
27075
+ document.addEventListener("keydown", handleKeyDown);
27076
+ return () => document.removeEventListener("keydown", handleKeyDown);
27077
+ }, [isTheaterMode, isFullscreenSupported, exitTheaterMode, toggleBrowserFullscreen, toggleTheaterMode]);
26989
27078
  const renderContent = () => {
26990
27079
  if (!artifact) return null;
26991
27080
  const content = artifact.content;
26992
- switch (artifact.type) {
27081
+ const type = artifact.type?.toLowerCase() ?? "text";
27082
+ switch (type) {
26993
27083
  case "html":
26994
27084
  case "svg":
26995
- return /* @__PURE__ */ jsx(HtmlPreview3, { content });
27085
+ return /* @__PURE__ */ jsx(FullscreenHtmlPreview, { content });
26996
27086
  case "markdown":
26997
- return /* @__PURE__ */ jsx("div", { className: "p-6 max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(MarkdownPreview, { content }) });
27087
+ return /* @__PURE__ */ jsx("div", { className: "agent-sdk-theme", style: { background: "transparent", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx("div", { className: "p-6 max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(MarkdownPreview, { content }) }) });
26998
27088
  case "image":
26999
27089
  return /* @__PURE__ */ jsx(ImageArtifactPreview, { content });
27000
27090
  case "video":
@@ -27003,73 +27093,90 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
27003
27093
  case "code":
27004
27094
  case "text":
27005
27095
  default:
27006
- return /* @__PURE__ */ jsx(
27007
- CodeBlock3,
27008
- {
27009
- code: content,
27010
- language: artifact.language || artifact.type
27011
- }
27012
- );
27096
+ return /* @__PURE__ */ jsx("div", { className: "agent-sdk-theme", style: { background: "transparent", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx(CodeBlock3, { code: content, language: artifact.language || type }) });
27013
27097
  }
27014
27098
  };
27015
27099
  if (pageState === "loading") {
27016
- return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-screen bg-zinc-950", children: /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-[#d8ff00]" }) });
27100
+ return /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b" }, children: /* @__PURE__ */ jsx(Loader2, { size: 32, style: { color: "#d8ff00" }, className: "animate-spin" }) });
27017
27101
  }
27018
27102
  if (pageState === "not-found") {
27019
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-screen bg-zinc-950 gap-4", children: [
27020
- /* @__PURE__ */ jsx(AlertCircle, { size: 48, className: "text-zinc-600" }),
27021
- /* @__PURE__ */ jsx("p", { className: "text-zinc-400 text-lg", children: "\u4EA7\u7269\u4E0D\u5B58\u5728\u6216\u5DF2\u8BBE\u4E3A\u79C1\u6709" }),
27022
- /* @__PURE__ */ jsx("p", { className: "text-zinc-600 text-sm", children: "\u8BF7\u68C0\u67E5\u94FE\u63A5\u662F\u5426\u6B63\u786E\uFF0C\u6216\u8054\u7CFB\u4F5C\u8005\u91CD\u65B0\u5206\u4EAB" }),
27103
+ return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b", gap: 16 }, children: [
27104
+ /* @__PURE__ */ jsx(AlertCircle, { size: 48, style: { color: "#52525b" } }),
27105
+ /* @__PURE__ */ jsx("p", { style: { color: "#a1a1aa", fontSize: 18, margin: 0 }, children: "\u4EA7\u7269\u4E0D\u5B58\u5728\u6216\u5DF2\u8BBE\u4E3A\u79C1\u6709" }),
27106
+ /* @__PURE__ */ jsx("p", { style: { color: "#52525b", fontSize: 14, margin: 0 }, children: "\u8BF7\u68C0\u67E5\u94FE\u63A5\u662F\u5426\u6B63\u786E\uFF0C\u6216\u8054\u7CFB\u4F5C\u8005\u91CD\u65B0\u5206\u4EAB" }),
27023
27107
  onNavigateBack && /* @__PURE__ */ jsx(
27024
27108
  "button",
27025
27109
  {
27026
27110
  onClick: onNavigateBack,
27027
- className: "mt-4 px-4 py-2 text-sm bg-zinc-800 text-white rounded-lg hover:bg-zinc-700 transition-colors",
27111
+ style: { marginTop: 16, padding: "8px 16px", fontSize: 14, background: "#27272a", color: "white", border: "none", borderRadius: 8, cursor: "pointer" },
27028
27112
  children: "\u8FD4\u56DE"
27029
27113
  }
27030
27114
  )
27031
27115
  ] });
27032
27116
  }
27033
27117
  if (pageState === "error") {
27034
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-screen bg-zinc-950 gap-4", children: [
27035
- /* @__PURE__ */ jsx(AlertCircle, { size: 48, className: "text-red-400" }),
27036
- /* @__PURE__ */ jsx("p", { className: "text-red-400 text-lg", children: error || "\u52A0\u8F7D\u5931\u8D25" }),
27118
+ return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", background: "#09090b", gap: 16 }, children: [
27119
+ /* @__PURE__ */ jsx(AlertCircle, { size: 48, style: { color: "#f87171" } }),
27120
+ /* @__PURE__ */ jsx("p", { style: { color: "#f87171", fontSize: 18, margin: 0 }, children: error || "\u52A0\u8F7D\u5931\u8D25" }),
27037
27121
  onNavigateBack && /* @__PURE__ */ jsx(
27038
27122
  "button",
27039
27123
  {
27040
27124
  onClick: onNavigateBack,
27041
- className: "mt-4 px-4 py-2 text-sm bg-zinc-800 text-white rounded-lg hover:bg-zinc-700 transition-colors",
27125
+ style: { marginTop: 16, padding: "8px 16px", fontSize: 14, background: "#27272a", color: "white", border: "none", borderRadius: 8, cursor: "pointer" },
27042
27126
  children: "\u8FD4\u56DE"
27043
27127
  }
27044
27128
  )
27045
27129
  ] });
27046
27130
  }
27047
27131
  if (!artifact) return null;
27048
- const config = typeConfig[artifact.type] || typeConfig.text;
27132
+ const normalizedType = artifact.type?.toLowerCase() ?? "text";
27133
+ const config = typeConfig[normalizedType] || typeConfig.text;
27049
27134
  const TypeIcon = config.icon;
27050
- const canDownload = ["html", "svg", "markdown", "json", "code", "text"].includes(artifact.type);
27051
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen bg-zinc-950", children: [
27052
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-sm flex-shrink-0", children: [
27053
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
27135
+ const canDownload = ["html", "svg", "markdown", "json", "code", "text"].includes(normalizedType);
27136
+ return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100vh", background: "#09090b" }, children: [
27137
+ /* @__PURE__ */ jsxs("div", { style: {
27138
+ display: "flex",
27139
+ alignItems: "center",
27140
+ justifyContent: "space-between",
27141
+ padding: isTheaterMode ? "0 16px" : "10px 16px",
27142
+ maxHeight: isTheaterMode ? 0 : 200,
27143
+ overflow: "hidden",
27144
+ opacity: isTheaterMode ? 0 : 1,
27145
+ borderBottom: isTheaterMode ? "none" : "1px solid rgba(39, 39, 42, 0.5)",
27146
+ background: "rgba(9, 9, 11, 0.8)",
27147
+ backdropFilter: "blur(8px)",
27148
+ flexShrink: 0,
27149
+ transition: "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"
27150
+ }, children: [
27151
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
27054
27152
  onNavigateBack && /* @__PURE__ */ jsx(
27055
27153
  "button",
27056
27154
  {
27057
27155
  onClick: onNavigateBack,
27058
- className: "p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors flex-shrink-0",
27156
+ style: { padding: 6, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer", flexShrink: 0 },
27059
27157
  children: /* @__PURE__ */ jsx(ArrowLeft, { size: 18 })
27060
27158
  }
27061
27159
  ),
27062
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
27063
- /* @__PURE__ */ jsx("div", { className: `w-7 h-7 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsx(TypeIcon, { size: 14, className: config.color }) }),
27064
- /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
27065
- /* @__PURE__ */ jsx("h1", { className: "text-sm font-medium text-white truncate", children: artifact.title }),
27066
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-[11px] text-zinc-500 mt-0.5", children: [
27067
- /* @__PURE__ */ jsx("span", { className: config.color, children: config.label }),
27068
- artifact.sharedAt && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
27160
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
27161
+ /* @__PURE__ */ jsx("div", { style: {
27162
+ width: 28,
27163
+ height: 28,
27164
+ borderRadius: 8,
27165
+ display: "flex",
27166
+ alignItems: "center",
27167
+ justifyContent: "center",
27168
+ flexShrink: 0,
27169
+ background: `color-mix(in srgb, ${config.color} 15%, transparent)`
27170
+ }, children: /* @__PURE__ */ jsx(TypeIcon, { size: 14, style: { color: config.color } }) }),
27171
+ /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
27172
+ /* @__PURE__ */ jsx("h1", { style: { fontSize: 14, fontWeight: 500, color: "white", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: artifact.title }),
27173
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "#71717a", marginTop: 2 }, children: [
27174
+ /* @__PURE__ */ jsx("span", { style: { color: config.color }, children: config.label }),
27175
+ artifact.sharedAt && /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
27069
27176
  /* @__PURE__ */ jsx(Calendar, { size: 10 }),
27070
27177
  new Date(artifact.sharedAt).toLocaleDateString()
27071
27178
  ] }),
27072
- artifact.viewCount !== void 0 && artifact.viewCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
27179
+ artifact.viewCount !== void 0 && artifact.viewCount > 0 && /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
27073
27180
  /* @__PURE__ */ jsx(Eye, { size: 10 }),
27074
27181
  artifact.viewCount
27075
27182
  ] })
@@ -27077,29 +27184,120 @@ function PublicArtifactPage({ shareToken, onNavigateBack }) {
27077
27184
  ] })
27078
27185
  ] })
27079
27186
  ] }),
27080
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
27081
- canDownload && /* @__PURE__ */ jsx(
27187
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
27188
+ /* @__PURE__ */ jsx(
27082
27189
  "button",
27083
27190
  {
27084
- onClick: handleDownload,
27085
- className: "p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors",
27086
- title: "\u4E0B\u8F7D",
27087
- children: /* @__PURE__ */ jsx(Download, { size: 16 })
27191
+ onClick: toggleTheaterMode,
27192
+ style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
27193
+ title: "\u6C89\u6D78\u6A21\u5F0F (T)",
27194
+ children: /* @__PURE__ */ jsx(MonitorPlay, { size: 16 })
27088
27195
  }
27089
27196
  ),
27090
- /* @__PURE__ */ jsx(
27197
+ isFullscreenSupported && /* @__PURE__ */ jsx(
27091
27198
  "button",
27092
27199
  {
27093
- onClick: handleShare,
27094
- className: "p-2 text-zinc-400 hover:text-[#d8ff00] hover:bg-zinc-800 rounded-lg transition-colors",
27095
- title: "\u590D\u5236\u5206\u4EAB\u94FE\u63A5",
27096
- children: /* @__PURE__ */ jsx(Share2, { size: 16 })
27200
+ onClick: toggleBrowserFullscreen,
27201
+ style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
27202
+ title: isBrowserFullscreen ? "\u9000\u51FA\u5168\u5C4F (F)" : "\u5168\u5C4F (F)",
27203
+ children: isBrowserFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 16 }) : /* @__PURE__ */ jsx(Maximize2, { size: 16 })
27204
+ }
27205
+ ),
27206
+ canDownload && /* @__PURE__ */ jsx(
27207
+ "button",
27208
+ {
27209
+ onClick: handleDownload,
27210
+ style: { padding: 8, color: "#a1a1aa", background: "none", border: "none", borderRadius: 8, cursor: "pointer" },
27211
+ title: "\u4E0B\u8F7D",
27212
+ children: /* @__PURE__ */ jsx(Download, { size: 16 })
27097
27213
  }
27098
27214
  )
27099
27215
  ] })
27100
27216
  ] }),
27101
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: renderContent() }),
27102
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2 border-t border-zinc-800/30 bg-zinc-950/50", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-600", children: "Powered by BISHAN Agent" }) })
27217
+ /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: renderContent() }),
27218
+ /* @__PURE__ */ jsx("div", { style: {
27219
+ display: "flex",
27220
+ alignItems: "center",
27221
+ justifyContent: "center",
27222
+ padding: isTheaterMode ? "0" : "8px 0",
27223
+ maxHeight: isTheaterMode ? 0 : 50,
27224
+ overflow: "hidden",
27225
+ opacity: isTheaterMode ? 0 : 1,
27226
+ borderTop: isTheaterMode ? "none" : "1px solid rgba(39, 39, 42, 0.3)",
27227
+ background: "rgba(9, 9, 11, 0.5)",
27228
+ flexShrink: 0,
27229
+ transition: "max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"
27230
+ }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "#52525b" }, children: "Powered by BISHAN Agent" }) }),
27231
+ isTheaterMode && /* @__PURE__ */ jsx(
27232
+ "div",
27233
+ {
27234
+ onMouseEnter: () => setShowTheaterControls(true),
27235
+ style: {
27236
+ position: "fixed",
27237
+ top: 0,
27238
+ left: 0,
27239
+ right: 0,
27240
+ height: 40,
27241
+ zIndex: 99
27242
+ }
27243
+ }
27244
+ ),
27245
+ isTheaterMode && /* @__PURE__ */ jsxs("div", { style: {
27246
+ position: "fixed",
27247
+ top: 16,
27248
+ right: 16,
27249
+ zIndex: 100,
27250
+ display: "flex",
27251
+ alignItems: "center",
27252
+ gap: 8,
27253
+ opacity: showTheaterControls ? 1 : 0,
27254
+ transform: showTheaterControls ? "translateY(0)" : "translateY(-8px)",
27255
+ transition: "opacity 0.3s ease, transform 0.3s ease",
27256
+ pointerEvents: showTheaterControls ? "auto" : "none"
27257
+ }, children: [
27258
+ /* @__PURE__ */ jsxs(
27259
+ "button",
27260
+ {
27261
+ onClick: exitTheaterMode,
27262
+ style: {
27263
+ display: "flex",
27264
+ alignItems: "center",
27265
+ gap: 6,
27266
+ padding: "8px 12px",
27267
+ background: "rgba(39, 39, 42, 0.9)",
27268
+ backdropFilter: "blur(8px)",
27269
+ border: "1px solid rgba(63, 63, 70, 0.5)",
27270
+ borderRadius: 8,
27271
+ color: "#a1a1aa",
27272
+ fontSize: 12,
27273
+ cursor: "pointer",
27274
+ whiteSpace: "nowrap"
27275
+ },
27276
+ title: "\u9000\u51FA\u6C89\u6D78\u6A21\u5F0F (ESC)",
27277
+ children: [
27278
+ /* @__PURE__ */ jsx(X, { size: 14 }),
27279
+ "\u9000\u51FA\u6C89\u6D78"
27280
+ ]
27281
+ }
27282
+ ),
27283
+ isFullscreenSupported && /* @__PURE__ */ jsx(
27284
+ "button",
27285
+ {
27286
+ onClick: toggleBrowserFullscreen,
27287
+ style: {
27288
+ padding: 8,
27289
+ background: "rgba(39, 39, 42, 0.9)",
27290
+ backdropFilter: "blur(8px)",
27291
+ border: "1px solid rgba(63, 63, 70, 0.5)",
27292
+ borderRadius: 8,
27293
+ color: "#a1a1aa",
27294
+ cursor: "pointer"
27295
+ },
27296
+ title: isBrowserFullscreen ? "\u9000\u51FA\u5168\u5C4F (F)" : "\u5168\u5C4F (F)",
27297
+ children: isBrowserFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 14 }) : /* @__PURE__ */ jsx(Maximize2, { size: 14 })
27298
+ }
27299
+ )
27300
+ ] })
27103
27301
  ] });
27104
27302
  }
27105
27303
  var AgentSDKProvider = ({