🚀. Socket Launch Week Day 3:Socket Firewall Now Blocks Malicious VS Code and Open VSX Extensions.Learn more →
Sign In

@agent-format/renderer

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@agent-format/renderer - npm Package Compare versions

Comparing version
0.1.2
 to
0.1.3
+153
-14
dist/index.cjs

@@ -23,5 +23,8 @@ "use strict";

__export(index_exports, {
AgentRenderer: () => AgentRenderer
AgentRenderer: () => AgentRenderer,
openInViewer: () => openInViewer,
printSvgAsPdf: () => printSvgAsPdf
});
module.exports = __toCommonJS(index_exports);
var import_react2 = require("react");

@@ -417,2 +420,66 @@ // src/sections/KanbanSection.tsx

// src/sections/InheritanceDiagramSection.tsx
var import_react = require("react");
// src/actions.ts
var VIEWER_URL = "https://knorq-ai.github.io/agent-format/";
function openInViewer(data) {
const json = JSON.stringify(data);
const url = `${VIEWER_URL}#${encodeURIComponent(json)}`;
window.open(url, "_blank", "noopener,noreferrer");
}
function printSvgAsPdf({
svgMarkup,
titleLabel,
documentTitle,
pageSize = "A3 landscape",
margin = "15mm",
fontFamily = "'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif"
}) {
const w = window.open("", "_blank");
if (!w) {
alert(
"\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u304C\u30D6\u30ED\u30C3\u30AF\u3055\u308C\u305F\u53EF\u80FD\u6027\u304C\u3042\u308B\u3002\u30D6\u30E9\u30A6\u30B6\u306E\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u8A31\u53EF\u3092\u78BA\u8A8D\u3057\u3066\u307B\u3057\u3044\u3002"
);
return;
}
const safeTitle = documentTitle.replace(
/[&<>"']/g,
(c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
);
const safeLabel = titleLabel.replace(
/[&<>"']/g,
(c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
);
w.document.open();
w.document.write(
`<!doctype html><html lang="ja"><head>
<meta charset="utf-8">
<title>${safeTitle}</title>
<style>
@page { size: ${pageSize}; margin: ${margin}; }
* { box-sizing: border-box; }
body { font-family: ${fontFamily}; margin: 0; padding: 24px 40px; background: #fff; color: #000; }
.doc-title {
text-align: center;
font-size: 16pt;
font-weight: bold;
letter-spacing: 0.5em;
margin: 0 0 36px;
}
svg { display: block; width: 100%; max-width: 1400px; margin: 0 auto; overflow: visible; }
svg text { font-family: ${fontFamily}; }
@media print { .toolbar { display: none !important; } }
.toolbar { position: fixed; top: 8px; right: 12px; font-family: sans-serif; font-size: 12px; color: #666; }
</style>
</head><body>
<div class="toolbar">\u2318P \u3067\u5370\u5237 / PDF \u4FDD\u5B58</div>
<h1 class="doc-title">${safeLabel}</h1>
${svgMarkup}
<script>window.addEventListener('load', () => setTimeout(() => window.print(), 250));</script>
</body></html>`
);
w.document.close();
}
// src/sections/InheritanceDiagramSection.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");

@@ -433,3 +500,3 @@ var MAX_GENERATIONS = 6;

var DEC_TOP_Y = 20;
function InheritanceDiagramSectionView({ section }) {
function InheritanceDiagramSectionView({ section, setHeaderActions }) {
const data = section.data;

@@ -439,2 +506,40 @@ const persons = data?.persons ?? [];

const variant = data?.variant ?? "jp-court";
const svgRef = (0, import_react.useRef)(null);
(0, import_react.useEffect)(() => {
if (!setHeaderActions) return;
if (!svgRef.current) return;
if (persons.length === 0 || variant !== "jp-court") {
setHeaderActions(null);
return;
}
const sectionLabel = section.label || "\u76F8\u7D9A\u95A2\u4FC2\u8AAC\u660E\u56F3";
const documentTitle = sectionLabel;
const headerTitle = "\u76F8 \u7D9A \u95A2 \u4FC2 \u8AAC \u660E \u56F3";
const onClick = () => {
const svgEl = svgRef.current;
if (!svgEl) return;
const serialized = new XMLSerializer().serializeToString(svgEl);
printSvgAsPdf({
svgMarkup: serialized,
titleLabel: headerTitle,
documentTitle
});
};
setHeaderActions(
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
"button",
{
type: "button",
className: "af-action-btn",
onClick,
title: "\u5370\u5237\u30FBPDF \u4FDD\u5B58\u7528\u306E\u65B0\u3057\u3044\u30BF\u30D6\u3092\u958B\u304F\uFF08\u88C1\u5224\u6240\u63D0\u51FA\u7528 A3 \u6A2A\u66F8\u5F0F\uFF09",
children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, children: "\u2B07" }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "PDF" })
]
}
)
);
return () => setHeaderActions(null);
}, [setHeaderActions, section.id, section.label, persons.length, variant]);
if (persons.length === 0) {

@@ -806,2 +911,3 @@ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "af-empty", children: "No persons in diagram." });

{
ref: svgRef,
xmlns: "http://www.w3.org/2000/svg",

@@ -831,22 +937,47 @@ width: "100%",

var import_jsx_runtime15 = require("react/jsx-runtime");
function AgentRenderer({ data, className }) {
function AgentRenderer({ data, className, showOpenInViewer = true }) {
const sections = [...data.sections].sort((a, b) => a.order - b.order);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `af-root ${className ?? ""}`, children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "af-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h1", { className: "af-title", children: [
data.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: data.icon }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: data.name })
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "af-header-main", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h1", { className: "af-title", children: [
data.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: data.icon }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: data.name })
] }),
data.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "af-description", children: data.description })
] }),
data.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "af-description", children: data.description })
showOpenInViewer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"button",
{
type: "button",
className: "af-action-btn",
onClick: () => openInViewer(data),
title: "Open this file in the public agent-format viewer (new tab)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": true, children: "\u2197" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Open in browser" })
]
}
) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-sections", children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "af-section", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "af-section-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-sections", children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionFrame, { section }, section.id)) })
] });
}
function SectionFrame({ section }) {
const [actions, setActions] = (0, import_react2.useState)(null);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "af-section", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "af-section-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "af-section-header-main", children: [
section.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: section.icon }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: section.label })
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-section-body", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionRenderer, { section }) })
] }, section.id)) })
actions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-section-header-actions", children: actions })
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "af-section-body", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionRenderer, { section, setHeaderActions: setActions }) })
] });
}
function SectionRenderer({ section }) {
function SectionRenderer({
section,
setHeaderActions
}) {
switch (section.type) {

@@ -878,3 +1009,9 @@ case "kanban":

case "inheritance-diagram":
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InheritanceDiagramSectionView, { section });
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
InheritanceDiagramSectionView,
{
section,
setHeaderActions
}
);
default:

@@ -886,4 +1023,6 @@ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FallbackSectionView, { section });

0 && (module.exports = {
AgentRenderer
AgentRenderer,
openInViewer,
printSvgAsPdf
});
//# sourceMappingURL=index.cjs.map
+27
-2
dist/index.d.cts
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactElement } from 'react';

@@ -290,8 +291,32 @@ type SectionType = 'kanban' | 'checklist' | 'notes' | 'timeline' | 'table' | 'log' | 'metrics' | 'diagram' | 'report' | 'form' | 'links' | 'references' | 'inheritance-diagram';

declare function openInViewer(data: AgentFile): void;
declare function printSvgAsPdf({ svgMarkup, titleLabel, documentTitle, pageSize, margin, fontFamily, }: {
svgMarkup: string;
titleLabel: string;
documentTitle: string;
pageSize?: string;
margin?: string;
fontFamily?: string;
}): void;
interface AgentRendererProps {
data: AgentFile;
className?: string;
/**
* Controls visibility of the header "Open in viewer" action.
* Default: true. Set to false when the renderer is already used inside
* the public viewer itself (avoids a self-referential button).
*/
showOpenInViewer?: boolean;
}
declare function AgentRenderer({ data, className }: AgentRendererProps): react_jsx_runtime.JSX.Element;
declare function AgentRenderer({ data, className, showOpenInViewer }: AgentRendererProps): react_jsx_runtime.JSX.Element;
interface SectionViewExtras {
/**
* Optional: a section can mount header-right action buttons (e.g. PDF
* download) by calling this during render. Pass `null` to remove.
* Safe to omit — most sections don't use it.
*/
setHeaderActions?: (node: ReactElement | null) => void;
}
export { type AgentConfig, type AgentFile, type AgentMemory, AgentRenderer, type AgentTask, type AgentTaskTrigger, type ChecklistGroup, type ChecklistItem, type ChecklistSection, type DiagramNode, type DiagramSection, type FormField, type FormSection, type FormSubmission, type InheritanceDiagramData, type InheritanceDiagramPerson, type InheritanceDiagramRelationship, type InheritanceDiagramSection, type KanbanColumn, type KanbanData, type KanbanItem, type KanbanItemComment, type KanbanLabel, type KanbanSection, type KanbanTeamMember, type LinkItem, type LinksSection, type LogEntry, type LogSection, type MetricCard, type MetricsSection, type NoteBlock, type NotesSection, type ReferenceFileItem, type ReferencesSection, type ReportEntry, type ReportSection, type Section, type SectionBase, type SectionType, type TableColumn, type TableColumnType, type TableSection, type TimelineItem, type TimelineMilestone, type TimelineSection };
export { type AgentConfig, type AgentFile, type AgentMemory, AgentRenderer, type AgentTask, type AgentTaskTrigger, type ChecklistGroup, type ChecklistItem, type ChecklistSection, type DiagramNode, type DiagramSection, type FormField, type FormSection, type FormSubmission, type InheritanceDiagramData, type InheritanceDiagramPerson, type InheritanceDiagramRelationship, type InheritanceDiagramSection, type KanbanColumn, type KanbanData, type KanbanItem, type KanbanItemComment, type KanbanLabel, type KanbanSection, type KanbanTeamMember, type LinkItem, type LinksSection, type LogEntry, type LogSection, type MetricCard, type MetricsSection, type NoteBlock, type NotesSection, type ReferenceFileItem, type ReferencesSection, type ReportEntry, type ReportSection, type Section, type SectionBase, type SectionType, type SectionViewExtras, type TableColumn, type TableColumnType, type TableSection, type TimelineItem, type TimelineMilestone, type TimelineSection, openInViewer, printSvgAsPdf };
+27
-2
dist/index.d.ts
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactElement } from 'react';

@@ -290,8 +291,32 @@ type SectionType = 'kanban' | 'checklist' | 'notes' | 'timeline' | 'table' | 'log' | 'metrics' | 'diagram' | 'report' | 'form' | 'links' | 'references' | 'inheritance-diagram';

declare function openInViewer(data: AgentFile): void;
declare function printSvgAsPdf({ svgMarkup, titleLabel, documentTitle, pageSize, margin, fontFamily, }: {
svgMarkup: string;
titleLabel: string;
documentTitle: string;
pageSize?: string;
margin?: string;
fontFamily?: string;
}): void;
interface AgentRendererProps {
data: AgentFile;
className?: string;
/**
* Controls visibility of the header "Open in viewer" action.
* Default: true. Set to false when the renderer is already used inside
* the public viewer itself (avoids a self-referential button).
*/
showOpenInViewer?: boolean;
}
declare function AgentRenderer({ data, className }: AgentRendererProps): react_jsx_runtime.JSX.Element;
declare function AgentRenderer({ data, className, showOpenInViewer }: AgentRendererProps): react_jsx_runtime.JSX.Element;
interface SectionViewExtras {
/**
* Optional: a section can mount header-right action buttons (e.g. PDF
* download) by calling this during render. Pass `null` to remove.
* Safe to omit — most sections don't use it.
*/
setHeaderActions?: (node: ReactElement | null) => void;
}
export { type AgentConfig, type AgentFile, type AgentMemory, AgentRenderer, type AgentTask, type AgentTaskTrigger, type ChecklistGroup, type ChecklistItem, type ChecklistSection, type DiagramNode, type DiagramSection, type FormField, type FormSection, type FormSubmission, type InheritanceDiagramData, type InheritanceDiagramPerson, type InheritanceDiagramRelationship, type InheritanceDiagramSection, type KanbanColumn, type KanbanData, type KanbanItem, type KanbanItemComment, type KanbanLabel, type KanbanSection, type KanbanTeamMember, type LinkItem, type LinksSection, type LogEntry, type LogSection, type MetricCard, type MetricsSection, type NoteBlock, type NotesSection, type ReferenceFileItem, type ReferencesSection, type ReportEntry, type ReportSection, type Section, type SectionBase, type SectionType, type TableColumn, type TableColumnType, type TableSection, type TimelineItem, type TimelineMilestone, type TimelineSection };
export { type AgentConfig, type AgentFile, type AgentMemory, AgentRenderer, type AgentTask, type AgentTaskTrigger, type ChecklistGroup, type ChecklistItem, type ChecklistSection, type DiagramNode, type DiagramSection, type FormField, type FormSection, type FormSubmission, type InheritanceDiagramData, type InheritanceDiagramPerson, type InheritanceDiagramRelationship, type InheritanceDiagramSection, type KanbanColumn, type KanbanData, type KanbanItem, type KanbanItemComment, type KanbanLabel, type KanbanSection, type KanbanTeamMember, type LinkItem, type LinksSection, type LogEntry, type LogSection, type MetricCard, type MetricsSection, type NoteBlock, type NotesSection, type ReferenceFileItem, type ReferencesSection, type ReportEntry, type ReportSection, type Section, type SectionBase, type SectionType, type SectionViewExtras, type TableColumn, type TableColumnType, type TableSection, type TimelineItem, type TimelineMilestone, type TimelineSection, openInViewer, printSvgAsPdf };
+152
-13
dist/index.js

@@ -0,1 +1,4 @@

// src/index.tsx
import { useState } from "react";
// src/sections/KanbanSection.tsx

@@ -390,2 +393,66 @@ import { jsx, jsxs } from "react/jsx-runtime";

// src/sections/InheritanceDiagramSection.tsx
import { useEffect, useRef } from "react";
// src/actions.ts
var VIEWER_URL = "https://knorq-ai.github.io/agent-format/";
function openInViewer(data) {
const json = JSON.stringify(data);
const url = `${VIEWER_URL}#${encodeURIComponent(json)}`;
window.open(url, "_blank", "noopener,noreferrer");
}
function printSvgAsPdf({
svgMarkup,
titleLabel,
documentTitle,
pageSize = "A3 landscape",
margin = "15mm",
fontFamily = "'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif"
}) {
const w = window.open("", "_blank");
if (!w) {
alert(
"\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u304C\u30D6\u30ED\u30C3\u30AF\u3055\u308C\u305F\u53EF\u80FD\u6027\u304C\u3042\u308B\u3002\u30D6\u30E9\u30A6\u30B6\u306E\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7\u8A31\u53EF\u3092\u78BA\u8A8D\u3057\u3066\u307B\u3057\u3044\u3002"
);
return;
}
const safeTitle = documentTitle.replace(
/[&<>"']/g,
(c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
);
const safeLabel = titleLabel.replace(
/[&<>"']/g,
(c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
);
w.document.open();
w.document.write(
`<!doctype html><html lang="ja"><head>
<meta charset="utf-8">
<title>${safeTitle}</title>
<style>
@page { size: ${pageSize}; margin: ${margin}; }
* { box-sizing: border-box; }
body { font-family: ${fontFamily}; margin: 0; padding: 24px 40px; background: #fff; color: #000; }
.doc-title {
text-align: center;
font-size: 16pt;
font-weight: bold;
letter-spacing: 0.5em;
margin: 0 0 36px;
}
svg { display: block; width: 100%; max-width: 1400px; margin: 0 auto; overflow: visible; }
svg text { font-family: ${fontFamily}; }
@media print { .toolbar { display: none !important; } }
.toolbar { position: fixed; top: 8px; right: 12px; font-family: sans-serif; font-size: 12px; color: #666; }
</style>
</head><body>
<div class="toolbar">\u2318P \u3067\u5370\u5237 / PDF \u4FDD\u5B58</div>
<h1 class="doc-title">${safeLabel}</h1>
${svgMarkup}
<script>window.addEventListener('load', () => setTimeout(() => window.print(), 250));</script>
</body></html>`
);
w.document.close();
}
// src/sections/InheritanceDiagramSection.tsx
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";

@@ -406,3 +473,3 @@ var MAX_GENERATIONS = 6;

var DEC_TOP_Y = 20;
function InheritanceDiagramSectionView({ section }) {
function InheritanceDiagramSectionView({ section, setHeaderActions }) {
const data = section.data;

@@ -412,2 +479,40 @@ const persons = data?.persons ?? [];

const variant = data?.variant ?? "jp-court";
const svgRef = useRef(null);
useEffect(() => {
if (!setHeaderActions) return;
if (!svgRef.current) return;
if (persons.length === 0 || variant !== "jp-court") {
setHeaderActions(null);
return;
}
const sectionLabel = section.label || "\u76F8\u7D9A\u95A2\u4FC2\u8AAC\u660E\u56F3";
const documentTitle = sectionLabel;
const headerTitle = "\u76F8 \u7D9A \u95A2 \u4FC2 \u8AAC \u660E \u56F3";
const onClick = () => {
const svgEl = svgRef.current;
if (!svgEl) return;
const serialized = new XMLSerializer().serializeToString(svgEl);
printSvgAsPdf({
svgMarkup: serialized,
titleLabel: headerTitle,
documentTitle
});
};
setHeaderActions(
/* @__PURE__ */ jsxs12(
"button",
{
type: "button",
className: "af-action-btn",
onClick,
title: "\u5370\u5237\u30FBPDF \u4FDD\u5B58\u7528\u306E\u65B0\u3057\u3044\u30BF\u30D6\u3092\u958B\u304F\uFF08\u88C1\u5224\u6240\u63D0\u51FA\u7528 A3 \u6A2A\u66F8\u5F0F\uFF09",
children: [
/* @__PURE__ */ jsx13("span", { "aria-hidden": true, children: "\u2B07" }),
/* @__PURE__ */ jsx13("span", { children: "PDF" })
]
}
)
);
return () => setHeaderActions(null);
}, [setHeaderActions, section.id, section.label, persons.length, variant]);
if (persons.length === 0) {

@@ -779,2 +884,3 @@ return /* @__PURE__ */ jsx13("p", { className: "af-empty", children: "No persons in diagram." });

{
ref: svgRef,
xmlns: "http://www.w3.org/2000/svg",

@@ -804,22 +910,47 @@ width: "100%",

import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
function AgentRenderer({ data, className }) {
function AgentRenderer({ data, className, showOpenInViewer = true }) {
const sections = [...data.sections].sort((a, b) => a.order - b.order);
return /* @__PURE__ */ jsxs14("div", { className: `af-root ${className ?? ""}`, children: [
/* @__PURE__ */ jsxs14("header", { className: "af-header", children: [
/* @__PURE__ */ jsxs14("h1", { className: "af-title", children: [
data.icon && /* @__PURE__ */ jsx15("span", { children: data.icon }),
/* @__PURE__ */ jsx15("span", { children: data.name })
/* @__PURE__ */ jsxs14("div", { className: "af-header-main", children: [
/* @__PURE__ */ jsxs14("h1", { className: "af-title", children: [
data.icon && /* @__PURE__ */ jsx15("span", { children: data.icon }),
/* @__PURE__ */ jsx15("span", { children: data.name })
] }),
data.description && /* @__PURE__ */ jsx15("p", { className: "af-description", children: data.description })
] }),
data.description && /* @__PURE__ */ jsx15("p", { className: "af-description", children: data.description })
showOpenInViewer && /* @__PURE__ */ jsx15("div", { className: "af-header-actions", children: /* @__PURE__ */ jsxs14(
"button",
{
type: "button",
className: "af-action-btn",
onClick: () => openInViewer(data),
title: "Open this file in the public agent-format viewer (new tab)",
children: [
/* @__PURE__ */ jsx15("span", { "aria-hidden": true, children: "\u2197" }),
/* @__PURE__ */ jsx15("span", { children: "Open in browser" })
]
}
) })
] }),
/* @__PURE__ */ jsx15("div", { className: "af-sections", children: sections.map((section) => /* @__PURE__ */ jsxs14("section", { className: "af-section", children: [
/* @__PURE__ */ jsxs14("header", { className: "af-section-header", children: [
/* @__PURE__ */ jsx15("div", { className: "af-sections", children: sections.map((section) => /* @__PURE__ */ jsx15(SectionFrame, { section }, section.id)) })
] });
}
function SectionFrame({ section }) {
const [actions, setActions] = useState(null);
return /* @__PURE__ */ jsxs14("section", { className: "af-section", children: [
/* @__PURE__ */ jsxs14("header", { className: "af-section-header", children: [
/* @__PURE__ */ jsxs14("div", { className: "af-section-header-main", children: [
section.icon && /* @__PURE__ */ jsx15("span", { children: section.icon }),
/* @__PURE__ */ jsx15("span", { children: section.label })
] }),
/* @__PURE__ */ jsx15("div", { className: "af-section-body", children: /* @__PURE__ */ jsx15(SectionRenderer, { section }) })
] }, section.id)) })
actions && /* @__PURE__ */ jsx15("div", { className: "af-section-header-actions", children: actions })
] }),
/* @__PURE__ */ jsx15("div", { className: "af-section-body", children: /* @__PURE__ */ jsx15(SectionRenderer, { section, setHeaderActions: setActions }) })
] });
}
function SectionRenderer({ section }) {
function SectionRenderer({
section,
setHeaderActions
}) {
switch (section.type) {

@@ -851,3 +982,9 @@ case "kanban":

case "inheritance-diagram":
return /* @__PURE__ */ jsx15(InheritanceDiagramSectionView, { section });
return /* @__PURE__ */ jsx15(
InheritanceDiagramSectionView,
{
section,
setHeaderActions
}
);
default:

@@ -858,4 +995,6 @@ return /* @__PURE__ */ jsx15(FallbackSectionView, { section });

export {
AgentRenderer
AgentRenderer,
openInViewer,
printSvgAsPdf
};
//# sourceMappingURL=index.js.map
+64
-1
dist/styles.css

@@ -38,2 +38,5 @@ :root {

.af-header {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 24px 24px 16px;

@@ -43,2 +46,14 @@ border-bottom: 1px solid var(--af-border);

.af-header-main {
flex: 1 1 auto;
min-width: 0;
}
.af-header-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
.af-title {

@@ -58,2 +73,35 @@ display: flex;

/* Header / section-level action buttons (Open in browser, PDF, etc.) */
.af-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--af-bg);
color: var(--af-fg);
border: 1px solid var(--af-border);
border-radius: var(--af-radius);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
line-height: 1;
white-space: nowrap;
transition: background 120ms ease, border-color 120ms ease;
}
.af-action-btn:hover {
background: var(--af-bg-alt);
border-color: var(--af-fg-muted);
}
.af-action-btn:focus-visible {
outline: 2px solid var(--af-accent, #2251ff);
outline-offset: 2px;
}
.af-action-btn:active {
transform: translateY(0.5px);
}
.af-sections {

@@ -76,3 +124,3 @@ display: flex;

align-items: center;
gap: 8px;
gap: 12px;
padding: 12px 16px;

@@ -84,2 +132,17 @@ background: var(--af-bg-alt);

.af-section-header-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.af-section-header-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.af-section-body {

@@ -86,0 +149,0 @@ padding: 16px;

+1
-1
package.json
{
"name": "@agent-format/renderer",
"version": "0.1.2",
"version": "0.1.3",
"description": "React renderer for the agent file format (.agent).",

@@ -5,0 +5,0 @@ "license": "MIT",

dist/index.cjs.map

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is too big to display