@tinytars/frame 0.1.2 → 0.1.4
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.
- package/package.json +4 -3
- package/support-access.svelte.ts +4 -4
- package/theme.css +94 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tinytars/frame",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Domain-neutral Svelte app-shell: session/auth controllers, account chrome, and menu/card/modal primitives built on @tinytars/vault.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
},
|
|
24
24
|
"files": [
|
|
25
25
|
"*.ts",
|
|
26
|
-
"*.svelte"
|
|
26
|
+
"*.svelte",
|
|
27
|
+
"*.css"
|
|
27
28
|
],
|
|
28
29
|
"exports": {
|
|
29
30
|
"./account-methods.svelte": "./account-methods.svelte.ts",
|
|
@@ -75,7 +76,7 @@
|
|
|
75
76
|
"typecheck": "svelte-check --tsconfig ./tsconfig.json --threshold error"
|
|
76
77
|
},
|
|
77
78
|
"dependencies": {
|
|
78
|
-
"@tinytars/vault": "^0.1.
|
|
79
|
+
"@tinytars/vault": "^0.1.18",
|
|
79
80
|
"pdfjs-dist": "^6.2.108"
|
|
80
81
|
},
|
|
81
82
|
"peerDependencies": {
|
package/support-access.svelte.ts
CHANGED
|
@@ -14,16 +14,16 @@
|
|
|
14
14
|
|
|
15
15
|
import type { VaultSession, VaultEntry } from "./vault-session.svelte";
|
|
16
16
|
import {
|
|
17
|
-
listSupportPatients,
|
|
17
|
+
listSupportOwners as listSupportPatients,
|
|
18
18
|
listSupportProviders,
|
|
19
19
|
listSupportRequests,
|
|
20
20
|
requestSupportAccess,
|
|
21
21
|
cancelSupportRequest,
|
|
22
22
|
getProviderRoster,
|
|
23
|
-
enterSupportPatient,
|
|
24
|
-
type SupportPatient,
|
|
23
|
+
enterSupportOwner as enterSupportPatient,
|
|
24
|
+
type SupportOwner as SupportPatient,
|
|
25
25
|
type SupportProvider,
|
|
26
|
-
type SupportRosterPatient,
|
|
26
|
+
type SupportRosterOwner as SupportRosterPatient,
|
|
27
27
|
type SupportRequest,
|
|
28
28
|
} from "@tinytars/vault/auth-support";
|
|
29
29
|
|
package/theme.css
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/* Shell + persona theme: the design tokens and cross-cutting CSS every app built on frame needs,
|
|
2
|
+
not tied to any one component. Import once (e.g. from the host app's entry point) alongside the
|
|
3
|
+
app's own stylesheet. Persona tokens name provenance generically — assistant/owner/provider —
|
|
4
|
+
so a non-health app can reuse the same three-way attribution bubble without health vocabulary. */
|
|
5
|
+
:root {
|
|
6
|
+
--bg: #fafaf9;
|
|
7
|
+
--fg: #1a1a1a;
|
|
8
|
+
--muted: #6b7280;
|
|
9
|
+
--border: #e5e7eb;
|
|
10
|
+
--accent: #0b6bcb;
|
|
11
|
+
/* Neutral surfaces distinct from --bg, used for cards/panels raised above the page. */
|
|
12
|
+
--surface: #fff;
|
|
13
|
+
--surface-2: #f4f4f5;
|
|
14
|
+
--panel: #fbfcfd;
|
|
15
|
+
--code-bg: #f4f6f8;
|
|
16
|
+
--tt-footer-accent: var(--accent);
|
|
17
|
+
--band: rgba(11, 107, 203, 0.08);
|
|
18
|
+
--safe: #16a34a;
|
|
19
|
+
--safe-band: rgba(22, 163, 74, 0.10);
|
|
20
|
+
--warn: #d97706;
|
|
21
|
+
--warn-band: rgba(217, 119, 6, 0.10);
|
|
22
|
+
--alert: #dc2626;
|
|
23
|
+
--alert-band: rgba(220, 38, 38, 0.10);
|
|
24
|
+
/* "Generated" content — extracted from a source or produced by the AI. */
|
|
25
|
+
--gen: #7c5cbf;
|
|
26
|
+
--gen-band: rgba(124, 92, 191, 0.10);
|
|
27
|
+
--content-max: 76rem;
|
|
28
|
+
--leaf-max: 44rem;
|
|
29
|
+
/* Persona provenance: who produced a piece of content. */
|
|
30
|
+
--p-assistant: var(--gen);
|
|
31
|
+
--p-assistant-band: var(--gen-band);
|
|
32
|
+
--p-owner: #2f6f4f;
|
|
33
|
+
--p-owner-band: rgba(47, 111, 79, 0.10);
|
|
34
|
+
--p-provider: #64748b;
|
|
35
|
+
--p-provider-band: rgba(100, 116, 139, 0.12);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* The standard visually-hidden recipe: removed from view but kept in the accessibility tree.
|
|
39
|
+
display:none and visibility:hidden would remove it from BOTH, which defeats the purpose. */
|
|
40
|
+
.sr-only {
|
|
41
|
+
position: absolute;
|
|
42
|
+
width: 1px; height: 1px;
|
|
43
|
+
padding: 0; margin: -1px;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
clip-path: inset(50%);
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
border: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Shared shell so the footer/disclaimer render on every state (lock/roster/app); sticky footer. */
|
|
51
|
+
.app-shell { display: flex; flex-direction: column; min-height: 100dvh; }
|
|
52
|
+
.app-body { flex: 1 0 auto; }
|
|
53
|
+
|
|
54
|
+
/* Transient highlight applied when a permalink resolves, so the target is obvious after the
|
|
55
|
+
scroll. Plain (not scoped) CSS: it lands on arbitrary anchored elements anywhere. */
|
|
56
|
+
.permalink-flash {
|
|
57
|
+
animation: permalink-flash 1.2s ease-out;
|
|
58
|
+
border-radius: 6px;
|
|
59
|
+
}
|
|
60
|
+
@keyframes permalink-flash {
|
|
61
|
+
0% { box-shadow: 0 0 0 3px var(--accent); background: var(--band); }
|
|
62
|
+
100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 0%, transparent); background: transparent; }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Shared field+action row: every field's own label stays a column (label text above, control
|
|
66
|
+
below); this wraps just the control + a side action (e.g. a mic button) side by side. */
|
|
67
|
+
.field-row { display: flex; align-items: flex-start; gap: 0.35rem; }
|
|
68
|
+
.field-row input, .field-row textarea { flex: 1; min-width: 0; }
|
|
69
|
+
|
|
70
|
+
/* The section shell every top-level view repeats, several combined with a dynamic domain class.
|
|
71
|
+
Plain class, not a component: usage is too dynamic to earn a prop API and moving just the CSS
|
|
72
|
+
already gets the shared-source-of-truth goal. */
|
|
73
|
+
.leaf-section { max-width: var(--leaf-max); margin: 0 auto; }
|
|
74
|
+
|
|
75
|
+
/* Same class name, same body, wherever a leaf editor takes a single free-text topic line. */
|
|
76
|
+
.topic-input { font: inherit; font-size: 0.95rem; color: var(--fg); padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; background: white; width: 100%; box-sizing: border-box; }
|
|
77
|
+
|
|
78
|
+
/* Shared persona bubble: a tinted box with a head row (uppercase tag on the left, an optional
|
|
79
|
+
meta/date + action on the right). PersonaBubble.svelte is the sole production emitter. */
|
|
80
|
+
.persona-bubble { border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.7rem; background: var(--surface); }
|
|
81
|
+
.persona-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
|
|
82
|
+
.persona-head-left { display: inline-flex; align-items: center; gap: 0.35rem; }
|
|
83
|
+
.persona-head-right { display: inline-flex; align-items: center; gap: 0.4rem; }
|
|
84
|
+
.persona-tag {
|
|
85
|
+
display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
|
|
86
|
+
border: 1px solid; border-radius: 999px; padding: 0.05rem 0.45rem; background: var(--surface);
|
|
87
|
+
}
|
|
88
|
+
.persona-meta { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
89
|
+
.p-assistant { background: var(--p-assistant-band); border-color: var(--p-assistant); }
|
|
90
|
+
.p-assistant .persona-tag { color: var(--p-assistant); border-color: var(--p-assistant); }
|
|
91
|
+
.p-owner { background: var(--p-owner-band); border-color: var(--p-owner); }
|
|
92
|
+
.p-owner .persona-tag { color: var(--p-owner); border-color: var(--p-owner); }
|
|
93
|
+
.p-provider { background: var(--p-provider-band); border-color: var(--p-provider); }
|
|
94
|
+
.p-provider .persona-tag { color: var(--p-provider); border-color: var(--p-provider); }
|