Provide reusable, typed previews for native dashboard structures. - Define five-kind native structure references and preview payloads. - Add project-scoped preview resolution API with unavailable states and capped excerpts. - Add a callback-driven inline preview card, tests, documentation, and release note. Files changed: .changeset/fn-8288-native-structure-preview.md | 7 ++ docs/dashboard-guide.md | 4 + packages/core/src/index.gate.ts | 2 +- packages/core/src/index.ts | 1 + packages/core/src/types.ts | 54 ++++++++++ packages/dashboard/app/api/legacy.ts | 1 + packages/dashboard/app/api/task-content.ts | 13 ++- .../app/components/NativeStructurePreview.css | 61 +++++++++++ .../app/components/NativeStructurePreview.tsx | 115 +++++++++++++++++++++ .../__tests__/NativeStructurePreview.test.tsx | 102 ++++++++++++++++++ packages/dashboard/src/native-structure-preview.ts | 88 ++++++++++++++++ .../native-structure-preview-routes.test.ts | 102 ++++++++++++++++++ .../src/routes/register-task-workflow-routes.ts | 23 +++++ 13 files changed, 571 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-8288 Fusion-Task-Lineage: 1a4ce369-9f9e-4a45-b533-2d53b5f1020c Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
/* FNXC:NativeStructureEmbed 2026-07-16-12:00: Keep the shared chat/mail card compact and token-driven while preserving a reachable consumer-owned open control on narrow screens. */
|
|
.native-structure-preview {
|
|
align-items: start;
|
|
background: var(--bg-secondary);
|
|
border: solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
display: grid;
|
|
gap: var(--space-sm);
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.native-structure-preview > svg {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.native-structure-preview__content {
|
|
min-width: 0;
|
|
}
|
|
|
|
.native-structure-preview__label {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.native-structure-preview__title,
|
|
.native-structure-preview__excerpt {
|
|
display: block;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.native-structure-preview__excerpt {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
margin: var(--space-xs) 0 0;
|
|
}
|
|
|
|
.native-structure-preview__open {
|
|
align-self: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.native-structure-preview--unavailable {
|
|
background: color-mix(in srgb, var(--color-error) 10%, var(--bg-secondary));
|
|
}
|
|
|
|
.native-structure-preview--unavailable > svg {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.native-structure-preview {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.native-structure-preview__open {
|
|
grid-column: 2;
|
|
justify-self: start;
|
|
}
|
|
}
|