Files
fusion/packages/dashboard/app/components/NativeStructurePreview.css
gsxdsm e2b5532290 FN-8288: add native structure preview foundation
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>
2026-07-18 18:11:02 -07:00

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;
}
}