@artkit-ai/react 0.1.0 → 0.2.0

package/src/components/panel.tsx

@@ -1,5 +1,5 @@
-import type { Actor, Artifact, ArtifactStatus, VersionEntry } from '@artkit-ai/core';
-import { Archive, Check, ChevronDown, Copy, Download, Eye, History, Rocket, Send, X } from 'lucide-react';
+import type { Artifact } from '@artkit-ai/core';
+import { ChevronDown, Copy, Download, X } from 'lucide-react';
 import {
   type KeyboardEvent,
   type ReactNode,
@@ -10,29 +10,25 @@ import {
   useRef,
   useState,
 } from 'react';
-import type { StatusAction } from '../client.js';
 import { useArtkit } from '../context.js';
-import { useArtifact, useArtifactExport, useArtifactHistory } from '../hooks.js';
+import type { DraftSnapshot } from '../editor-session.js';
+import { useArtifact, useArtifactExport } from '../hooks.js';
 import type { UiMessageKey } from '../i18n.js';
-import { RejectForm } from './approval.js';
-import { ArtifactEditor, type EditorPermission } from './editor.js';
+import { ArtifactEditor, type ArtifactEditorProps } from './editor.js';
 import {
-  ChangeList,
   cx,
   ErrorMessage,
-  formatDate,
-  kindLabel,
+  formatLabel,
   Loading,
   rootAttributes,
   type Slots,
-  StatusBadge,
   slot,
   useAnnouncer,
 } from './shared.js';
 import { ArtifactView } from './view.js';
 
-export type PanelTab = 'view' | 'code' | 'history';
-export type ArtifactPanelPart = 'header' | 'title' | 'toolbar' | 'tabs' | 'body' | 'code' | 'history';
+export type PanelTab = 'view' | 'edit' | 'code';
+export type ArtifactPanelPart = 'header' | 'title' | 'toolbar' | 'tabs' | 'body' | 'code';
 
 export interface ArtifactPanelProps {
   id?: string;
@@ -40,16 +36,10 @@ export interface ArtifactPanelProps {
   tab?: PanelTab;
   defaultTab?: PanelTab;
   onTabChange?(tab: PanelTab): void;
-  /** Selected version (undefined = latest). Controlled when `onVersionChange` is given with it. */
-  version?: number;
-  onVersionChange?(version: number | undefined): void;
-  /** `edit` shows the kind editor in the View tab for the latest version (default `read`). */
-  permission?: EditorPermission;
-  /** Streaming preview and lock state, forwarded to the view/editor. */
-  partial?: unknown;
-  lockedBy?: Actor | null;
-  /** Lifecycle actions offered; defaults depend on the status. `false` hides them. */
-  actions?: StatusAction[] | false;
+  /** Save action of the editor tab: the application decides what saving means. */
+  onSave?: ArtifactEditorProps['onSave'];
+  /** Draft changes, forwarded from the editor tab. */
+  onChange?(snapshot: DraftSnapshot): void;
   /** Export formats; defaults to the provider's server formats plus browser exporters. */
   exportFormats?: string[];
   onClose?(): void;
@@ -59,28 +49,16 @@ export interface ArtifactPanelProps {
   slots?: Slots<ArtifactPanelPart>;
 }
 
-const DEFAULT_ACTIONS: Record<ArtifactStatus, StatusAction[]> = {
-  draft: ['submit', 'archive'],
-  pending_approval: ['approve', 'reject', 'archive'],
-  published: ['archive'],
-  archived: [],
-};
+const TABS: PanelTab[] = ['view', 'edit', 'code'];
+const TAB_LABEL: Record<PanelTab, UiMessageKey> = { view: 'tabView', edit: 'tabEdit', code: 'tabCode' };
 
-const ACTION_FROM: Record<StatusAction, ArtifactStatus[]> = {
-  submit: ['draft'],
-  approve: ['pending_approval'],
-  reject: ['pending_approval'],
-  publish: ['draft', 'pending_approval'],
-  archive: ['draft', 'pending_approval', 'published'],
-};
-
-const TABS: PanelTab[] = ['view', 'code', 'history'];
-const TAB_LABEL: Record<PanelTab, UiMessageKey> = { view: 'tabView', code: 'tabCode', history: 'tabHistory' };
-
-/** Assistant-style side panel: View, Code and History tabs, version selector, export and lifecycle (spec §13.1). */
+/**
+ * Side panel of one artifact: View, Edit and Code tabs and the export menu (spec §13.1). There is no history, approval
+ * or archive here: the application owns versions and publication.
+ */
 export function ArtifactPanel(props: ArtifactPanelProps) {
   const ctx = useArtkit();
-  const { t, client, cache } = ctx;
+  const { t } = ctx;
   const id = props.id ?? props.artifact?.id;
   const latestQuery = useArtifact(id, props.artifact ? { initial: props.artifact } : {});
   const latest = latestQuery.artifact;
@@ -91,26 +69,8 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
     setOwnTab(next);
     props.onTabChange?.(next);
   };
-  const [ownVersion, setOwnVersion] = useState<number | undefined>(undefined);
-  const selectedVersion = props.onVersionChange ? props.version : (props.version ?? ownVersion);
-  const selectVersion = (next: number | undefined) => {
-    setOwnVersion(next);
-    props.onVersionChange?.(next);
-  };
-  const viewingLatest = selectedVersion === undefined || selectedVersion === latest?.version;
-  const selectedQuery = useArtifact(
-    viewingLatest ? undefined : id,
-    selectedVersion === undefined ? {} : { version: selectedVersion },
-  );
-  const shown = viewingLatest ? latest : selectedQuery.artifact;
-
-  const history = useArtifactHistory(id);
-  const exporter = useArtifactExport(id ?? '', latest?.kind);
+  const exporter = useArtifactExport(id ?? '', latest?.format);
   const [live, announce] = useAnnouncer();
-  const [statusBusy, setStatusBusy] = useState<StatusAction | undefined>(undefined);
-  const [actionError, setActionError] = useState<unknown>(undefined);
-  const [rejecting, setRejecting] = useState(false);
-  const [reason, setReason] = useState('');
   const baseId = useId();
 
   if (!latest || !id) {
@@ -128,43 +88,9 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
     );
   }
 
-  const actions = (props.actions === false ? [] : (props.actions ?? DEFAULT_ACTIONS[latest.status])).filter(
-    (action) => ACTION_FROM[action].includes(latest.status),
-  );
-
-  async function runAction(action: StatusAction, message?: string) {
-    if (!latest) return;
-    setStatusBusy(action);
-    setActionError(undefined);
-    try {
-      const updated = await client.setStatus(latest.id, action, message);
-      cache.put(updated);
-      announce(t('statusChanged', { status: t(`status_${updated.status}` as UiMessageKey) }));
-      setRejecting(false);
-      setReason('');
-    } catch (error) {
-      setActionError(error);
-    } finally {
-      setStatusBusy(undefined);
-    }
-  }
-
-  async function restore(version: number) {
-    try {
-      const result = await history.restore(version);
-      announce(t('restored', { version, newVersion: result.version }));
-      selectVersion(undefined);
-    } catch (error) {
-      setActionError(error);
-    }
-  }
-
   async function exportAs(format: string) {
     try {
-      const result = await exporter.exportArtifact(
-        format,
-        viewingLatest ? {} : { version: selectedVersion! },
-      );
+      const result = await exporter.exportArtifact(format, {});
       announce(t('exported', { filename: result.filename }));
     } catch {
       // The hook keeps the error; it is rendered below.
@@ -186,7 +112,6 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
     document.getElementById(tabId(next))?.focus();
   };
 
-  const versionOptions = mergeVersions(history.entries, latest.version);
   const exportFormats = props.exportFormats ?? exporter.formats;
 
   return (
@@ -194,16 +119,22 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
       className={cx('ak-root ak-panel', props.className)}
       {...rootAttributes(ctx, latest.themeId)}
       aria-labelledby={`${baseId}-title`}
-      data-kind={latest.kind}
+      data-format={latest.format}
     >
       {live}
       <header {...slot(props.slots, 'header', 'ak-panel-header')}>
         <h2 id={`${baseId}-title`} {...slot(props.slots, 'title', 'ak-panel-title')}>
           {latest.title}
         </h2>
-        <span className="ak-history-meta">{kindLabel(ctx, latest.kind)}</span>
-        <StatusBadge status={latest.status} />
+        <span className="ak-history-meta">{formatLabel(ctx, latest.format)}</span>
+        <span className="ak-badge">{t('versionShort', { version: latest.version })}</span>
         {props.headerActions}
+        <ExportMenu
+          formats={exportFormats}
+          pending={exporter.pending}
+          onOpen={() => void exporter.loadFormats()}
+          onSelect={(format) => void exportAs(format)}
+        />
         {props.onClose ? (
           <button
             type="button"
@@ -216,86 +147,9 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
           </button>
         ) : null}
       </header>
-      <div {...slot(props.slots, 'toolbar', 'ak-panel-toolbar')}>
-        <label htmlFor={`${baseId}-version`}>{t('version')}</label>
-        <select
-          id={`${baseId}-version`}
-          className="ak-select"
-          value={viewingLatest ? '' : String(selectedVersion)}
-          onChange={(event) =>
-            selectVersion(event.target.value === '' ? undefined : Number(event.target.value))
-          }
-        >
-          <option value="">{`${t('versionShort', { version: latest.version })} (${t('latest')})`}</option>
-          {versionOptions
-            .filter((version) => version !== latest.version)
-            .map((version) => (
-              <option key={version} value={String(version)}>
-                {t('versionShort', { version })}
-              </option>
-            ))}
-        </select>
-        <ExportMenu
-          formats={exportFormats}
-          pending={exporter.pending}
-          onOpen={() => void exporter.loadFormats()}
-          onSelect={(format) => void exportAs(format)}
-        />
-        {actions.map((action) =>
-          action === 'reject' ? (
-            <button
-              key={action}
-              type="button"
-              className="ak-button"
-              data-variant="danger"
-              disabled={statusBusy !== undefined}
-              onClick={() => setRejecting(true)}
-            >
-              <X aria-hidden="true" />
-              {t('action_reject')}
-            </button>
-          ) : (
-            <button
-              key={action}
-              type="button"
-              className="ak-button"
-              data-variant={
-                action === 'approve' || action === 'submit' || action === 'publish' ? 'primary' : undefined
-              }
-              disabled={statusBusy !== undefined}
-              onClick={() => void runAction(action)}
-            >
-              <ActionIcon action={action} />
-              {t(`action_${action}` as UiMessageKey)}
-            </button>
-          ),
-        )}
-      </div>
-      {rejecting ? (
-        <div className="ak-panel-toolbar">
-          <RejectForm
-            busy={statusBusy !== undefined}
-            requireReason
-            reason={reason}
-            onReasonChange={setReason}
-            onSubmit={() => void runAction('reject', reason.trim())}
-            onCancel={() => setRejecting(false)}
-          />
-        </div>
-      ) : null}
-      {actionError ? <ErrorMessage error={actionError} onDismiss={() => setActionError(undefined)} /> : null}
-      {exporter.error ? <ErrorMessage error={exporter.error} /> : null}
-      {exporter.warnings.length > 0 ? (
-        <div className="ak-notice" role="status">
-          {t('exportWarnings')}
-          <ul>
-            {exporter.warnings.map((warning) => (
-              <li key={warning}>{warning}</li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-      <div {...slot(props.slots, 'tabs', 'ak-tabs')} role="tablist" aria-label={t('tabsLabel')}>
+      {exporter.error ? <ErrorMessage error={exporter.error} className="ak-panel-notice" /> : null}
+
+      <div role="tablist" aria-label={latest.title} {...slot(props.slots, 'tabs', 'ak-tabs')}>
         {TABS.map((name) => (
           <button
             key={name}
@@ -313,55 +167,27 @@ export function ArtifactPanel(props: ArtifactPanelProps) {
           </button>
         ))}
       </div>
+
       <div
-        {...slot(props.slots, 'body', 'ak-panel-body')}
-        role="tabpanel"
         id={panelId(tab)}
+        role="tabpanel"
         aria-labelledby={tabId(tab)}
+        {...slot(props.slots, 'body', 'ak-panel-body')}
       >
-        {tab === 'view' ? (
-          viewingLatest && (props.permission === 'edit' || props.lockedBy) ? (
-            <ArtifactEditor
-              artifact={latest}
-              permission={props.permission ?? 'read'}
-              {...(props.lockedBy ? { lockedBy: props.lockedBy } : {})}
-              {...(props.partial === undefined ? {} : { partial: props.partial })}
-            />
-          ) : shown ? (
-            <ArtifactView
-              artifact={shown}
-              {...(viewingLatest && props.partial !== undefined ? { partial: props.partial } : {})}
-            />
-          ) : selectedQuery.error ? (
-            <ErrorMessage error={selectedQuery.error} />
-          ) : (
-            <Loading />
-          )
-        ) : null}
-        {tab === 'code' ? <CodeTab artifact={shown} slots={props.slots} /> : null}
-        {tab === 'history' ? (
-          <HistoryTab
-            history={history}
-            latestVersion={latest.version}
-            selectedVersion={viewingLatest ? latest.version : selectedVersion}
-            slots={props.slots}
-            onView={(version) => {
-              selectVersion(version === latest.version ? undefined : version);
-              selectTab('view');
-            }}
-            onRestore={(version) => void restore(version)}
+        {tab === 'view' ? <ArtifactView artifact={latest} /> : null}
+        {tab === 'edit' ? (
+          <ArtifactEditor
+            artifact={latest}
+            {...(props.onSave ? { onSave: props.onSave } : {})}
+            {...(props.onChange ? { onChange: props.onChange } : {})}
           />
         ) : null}
+        {tab === 'code' ? <CodeTab artifact={latest} slots={props.slots} /> : null}
       </div>
     </aside>
   );
 }
 
-function mergeVersions(entries: VersionEntry[], latest: number): number[] {
-  const versions = new Set<number>([latest, ...entries.map((entry) => entry.version)]);
-  return [...versions].sort((a, b) => b - a);
-}
-
 function CodeTab({
   artifact,
   slots,
@@ -398,82 +224,6 @@ function CodeTab({
   );
 }
 
-function HistoryTab(props: {
-  history: ReturnType<typeof useArtifactHistory>;
-  latestVersion: number;
-  selectedVersion: number | undefined;
-  onView(version: number): void;
-  onRestore(version: number): void;
-  slots?: Slots<ArtifactPanelPart> | undefined;
-}) {
-  const ctx = useArtkit();
-  const { t } = ctx;
-  const { history } = props;
-  if (history.error && history.entries.length === 0)
-    return <ErrorMessage error={history.error} onRetry={() => void history.refresh()} />;
-  if (history.loading && history.entries.length === 0) return <Loading />;
-  if (history.entries.length === 0) return <p className="ak-notice">{t('historyEmpty')}</p>;
-  return (
-    <div>
-      <ol {...slot(props.slots, 'history', 'ak-history')} reversed>
-        {history.entries.map((entry) => (
-          <li
-            key={entry.version}
-            className="ak-history-entry"
-            aria-current={entry.version === props.selectedVersion ? 'true' : undefined}
-          >
-            <div className="ak-history-head">
-              <strong>{t('versionShort', { version: entry.version })}</strong>
-              <span className="ak-history-meta">
-                {formatDate(entry.createdAt, ctx.locale)} ·{' '}
-                {t('by', { actor: t(`actor_${entry.actor.type}` as UiMessageKey) })}
-                {entry.restoredFrom !== undefined
-                  ? ` · ${t('restoredFrom', { version: entry.restoredFrom })}`
-                  : ''}
-              </span>
-              <span className="ak-history-actions">
-                <button
-                  type="button"
-                  className="ak-button"
-                  aria-label={t('viewVersion', { version: entry.version })}
-                  onClick={() => props.onView(entry.version)}
-                >
-                  <Eye aria-hidden="true" />
-                  {t('tabView')}
-                </button>
-                {entry.version !== props.latestVersion ? (
-                  <button
-                    type="button"
-                    className="ak-button"
-                    aria-label={t('restoreVersion', { version: entry.version })}
-                    disabled={history.restoring !== undefined}
-                    onClick={() => props.onRestore(entry.version)}
-                  >
-                    <History aria-hidden="true" />
-                    {t('restore')}
-                  </button>
-                ) : null}
-              </span>
-            </div>
-            {entry.message ? <p className="ak-history-meta">{entry.message}</p> : null}
-            {entry.diff.length > 0 ? <ChangeList changes={entry.diff} /> : null}
-          </li>
-        ))}
-      </ol>
-      {history.hasMore ? (
-        <button
-          type="button"
-          className="ak-button"
-          disabled={history.loading}
-          onClick={() => void history.loadMore()}
-        >
-          {t('loadMore')}
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
 function ExportMenu(props: {
   formats: string[];
   pending: string | undefined;
@@ -582,10 +332,3 @@ function ExportMenu(props: {
     </div>
   );
 }
-
-const ACTION_ICONS = { submit: Send, approve: Check, publish: Rocket, archive: Archive } as const;
-
-function ActionIcon({ action }: { action: string }) {
-  const Icon = ACTION_ICONS[action as keyof typeof ACTION_ICONS];
-  return Icon ? <Icon aria-hidden="true" /> : null;
-}

package/src/components/shared.tsx

@@ -1,4 +1,4 @@
-import type { ArtifactStatus, ChangeSummary } from '@artkit-ai/core';
+import type { ChangeSummary } from '@artkit-ai/core';
 import { isArtifactError } from '@artkit-ai/core';
 import { RotateCw } from 'lucide-react';
 import {
@@ -41,15 +41,6 @@ export function rootAttributes(ctx: ArtkitContextValue, themeId?: string): Recor
   };
 }
 
-export function StatusBadge({ status, className }: { status: ArtifactStatus; className?: string }) {
-  const { t } = useArtkit();
-  return (
-    <span className={cx('ak-badge', className)} data-status={status}>
-      {t(`status_${status}` as UiMessageKey)}
-    </span>
-  );
-}
-
 export function errorMessage(error: unknown, fallback: string): string {
   if (isArtifactError(error)) {
     const hint = error.issues.find((issue) => issue.hint)?.hint;
@@ -202,6 +193,6 @@ export function formatDate(value: string, locale: string): string {
   }
 }
 
-export function kindLabel(ctx: ArtkitContextValue, kind: string): string {
-  return ctx.registry.has(kind) ? ctx.registry.get(kind).label : kind;
+export function formatLabel(ctx: ArtkitContextValue, format: string): string {
+  return ctx.registry.has(format) ? ctx.registry.get(format).label : format;
 }

package/src/components/view.tsx

@@ -11,17 +11,16 @@ export type ArtifactViewPart = 'body' | 'badge' | 'loading' | 'error';
 export interface ArtifactViewProps {
   /** Committed artifact to show. */
   artifact?: Artifact;
-  /** Alternatively, load by id (latest or `version`). */
+  /** Alternatively, load the artifact by id. */
   id?: string;
-  version?: number;
   /**
    * Content still being streamed by the model: a partial object or the raw JSON text so far. It goes
-   * through `kind.parsePartial` and shows as a provisional preview until a newer committed version
+   * through `format.parsePartial` and shows as a provisional preview until a newer committed version
    * arrives (spec §13.4).
    */
   partial?: unknown;
   /** Kind of the partial content when no artifact exists yet. */
-  kind?: string;
+  format?: string;
   /** Theme and locale of the partial content when no artifact exists yet. */
   themeId?: string;
   locale?: string;
@@ -31,12 +30,13 @@ export interface ArtifactViewProps {
 }
 
 /** Turns streamed content into renderable content, or undefined while nothing complete arrived yet. */
-export function previewContent(ctx: ArtkitContextValue, kind: string, partial: unknown): unknown {
-  if (!ctx.registry.has(kind)) return undefined;
+export function previewContent(ctx: ArtkitContextValue, format: string, partial: unknown): unknown {
+  if (!ctx.registry.has(format)) return undefined;
   const raw = typeof partial === 'string' && /^\s*[[{]/.test(partial) ? parsePartialJson(partial) : partial;
   if (raw === undefined) return undefined;
   try {
-    return ctx.registry.get(kind).parsePartial(raw);
+    // Adapters take the streamed text; structured partials (e.g. a workbook JSON) are serialized first.
+    return ctx.registry.get(format).parsePartial(typeof raw === 'string' ? raw : JSON.stringify(raw));
   } catch {
     return undefined;
   }
@@ -62,10 +62,7 @@ export function renderContext(
 export function ArtifactView(props: ArtifactViewProps) {
   const ctx = useArtkit();
   const { t } = ctx;
-  const loaded = useArtifact(
-    props.artifact ? undefined : props.id,
-    props.version === undefined ? {} : { version: props.version },
-  );
+  const loaded = useArtifact(props.artifact ? undefined : props.id);
   const committed = props.artifact ?? loaded.artifact;
 
   // Remember which committed version was on screen when streaming started: any other version arriving
@@ -79,10 +76,10 @@ export function ArtifactView(props: ArtifactViewProps) {
     props.partial !== undefined &&
     (streamStart.current === null || committed?.version === streamStart.current.version);
 
-  const kind = props.kind ?? committed?.kind;
+  const format = props.format ?? committed?.format;
   const partialContent = useMemo(
-    () => (showPartial && kind ? previewContent(ctx, kind, props.partial) : undefined),
-    [ctx, kind, props.partial, showPartial],
+    () => (showPartial && format ? previewContent(ctx, format, props.partial) : undefined),
+    [ctx, format, props.partial, showPartial],
   );
 
   const themeId = committed?.themeId ?? props.themeId;
@@ -101,12 +98,12 @@ export function ArtifactView(props: ArtifactViewProps) {
         >
           {t('provisional')}
         </span>
-        {partialContent === undefined || !kind ? (
+        {partialContent === undefined || !format ? (
           <Loading label={t('generating')} {...slot(props.slots, 'loading', '')} />
         ) : (
           <div {...slot(props.slots, 'body', 'ak-view-body')}>
-            <KindRenderer
-              kind={kind}
+            <FormatRenderer
+              format={format!}
               content={partialContent}
               ctx={renderContext(ctx, themeId, locale, mode, true)}
             />
@@ -137,12 +134,12 @@ export function ArtifactView(props: ArtifactViewProps) {
       className={rootClass}
       {...attrs}
       lang={committed.locale}
-      data-kind={committed.kind}
+      data-format={committed.format}
       data-version={committed.version}
     >
       <div {...slot(props.slots, 'body', 'ak-view-body')}>
-        <KindRenderer
-          kind={committed.kind}
+        <FormatRenderer
+          format={committed.format}
           content={committed.content}
           ctx={renderContext(ctx, themeId, locale, mode, false)}
         />
@@ -151,20 +148,20 @@ export function ArtifactView(props: ArtifactViewProps) {
   );
 }
 
-interface KindRendererProps {
-  kind: string;
+interface FormatRendererProps {
+  format: string;
   content: unknown;
   ctx: RenderContext;
   className?: string;
 }
 
 /** Lazy kind renderer with a JSON fallback when the kind has no renderer loader. */
-export function KindRenderer(props: KindRendererProps) {
+export function FormatRenderer(props: FormatRendererProps) {
   const ctx = useArtkit();
-  if (!ctx.hasRenderer(props.kind)) {
+  if (!ctx.hasRenderer(props.format)) {
     return (
       <div className={props.className}>
-        <p className="ak-notice">{ctx.t('noRenderer', { kind: props.kind })}</p>
+        <p className="ak-notice">{ctx.t('noRenderer', { format: props.format })}</p>
         <pre className="ak-code">
           <code>{JSON.stringify(props.content, null, 2)}</code>
         </pre>
@@ -173,7 +170,7 @@ export function KindRenderer(props: KindRendererProps) {
   }
   return (
     <ErrorBoundary
-      onReset={() => ctx.resetLoad('renderer', props.kind)}
+      onReset={() => ctx.resetLoad('renderer', props.format)}
       fallback={(error, reset) => <ErrorMessage error={error} onRetry={reset} />}
     >
       <Suspense fallback={<Loading />}>
@@ -183,13 +180,13 @@ export function KindRenderer(props: KindRendererProps) {
   );
 }
 
-function LoadedRenderer({ kind, content, ctx: renderCtx, className }: KindRendererProps) {
+function LoadedRenderer({ format, content, ctx: renderCtx, className }: FormatRendererProps) {
   const ctx = useArtkit();
-  const { Renderer, css } = use(ctx.loadRenderer(kind));
+  const { Renderer, css } = use(ctx.loadRenderer(format));
   return (
     <>
       {css ? (
-        <style href={`artkit-kind-${kind}-${hashString(css)}`} precedence="artkit" nonce={ctx.nonce}>
+        <style href={`artkit-kind-${format}-${hashString(css)}`} precedence="artkit" nonce={ctx.nonce}>
           {css}
         </style>
       ) : null}