@hyvnt/hyvui 0.3.0 → 0.4.0

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.
Files changed (170) hide show
  1. package/README.md +37 -7
  2. package/dist/components/ambient/ArcaneVein.svelte +151 -0
  3. package/dist/components/ambient/ArcaneVein.svelte.d.ts +31 -0
  4. package/dist/components/ambient/BrassFiligree.svelte +109 -0
  5. package/dist/components/ambient/BrassFiligree.svelte.d.ts +20 -0
  6. package/dist/components/ambient/CornerBrackets.svelte +8 -0
  7. package/dist/components/ambient/CornerBrackets.svelte.d.ts +8 -0
  8. package/dist/components/ambient/CrystalShard.svelte +151 -0
  9. package/dist/components/ambient/CrystalShard.svelte.d.ts +19 -0
  10. package/dist/components/ambient/DataStream.svelte +7 -1
  11. package/dist/components/ambient/DataStream.svelte.d.ts +6 -0
  12. package/dist/components/ambient/EnergyArc.svelte +189 -0
  13. package/dist/components/ambient/EnergyArc.svelte.d.ts +32 -0
  14. package/dist/components/ambient/GlyphMark.svelte +6 -0
  15. package/dist/components/ambient/GlyphMark.svelte.d.ts +6 -0
  16. package/dist/components/ambient/GridOverlay.svelte +8 -0
  17. package/dist/components/ambient/GridOverlay.svelte.d.ts +8 -0
  18. package/dist/components/ambient/HexGrid.svelte +119 -0
  19. package/dist/components/ambient/HexGrid.svelte.d.ts +21 -0
  20. package/dist/components/ambient/ParallaxLayer.svelte +9 -1
  21. package/dist/components/ambient/ParallaxLayer.svelte.d.ts +7 -0
  22. package/dist/components/ambient/ScanBand.svelte +8 -0
  23. package/dist/components/ambient/ScanBand.svelte.d.ts +8 -0
  24. package/dist/components/ambient/ShimmerCloud.svelte +180 -0
  25. package/dist/components/ambient/ShimmerCloud.svelte.d.ts +21 -0
  26. package/dist/components/ambient/SignalRing.svelte +7 -1
  27. package/dist/components/ambient/SignalRing.svelte.d.ts +6 -0
  28. package/dist/components/ambient/ThreadLine.svelte +7 -0
  29. package/dist/components/ambient/ThreadLine.svelte.d.ts +7 -0
  30. package/dist/components/ambient/Vignette.svelte +6 -0
  31. package/dist/components/ambient/Vignette.svelte.d.ts +6 -0
  32. package/dist/components/depth/DepthLayer.svelte +8 -0
  33. package/dist/components/depth/DepthLayer.svelte.d.ts +8 -0
  34. package/dist/components/depth/DepthStage.svelte +8 -4
  35. package/dist/components/depth/DepthStage.svelte.d.ts +8 -0
  36. package/dist/components/depth/FloatCard.svelte +17 -1
  37. package/dist/components/depth/FloatCard.svelte.d.ts +8 -0
  38. package/dist/components/depth/HorizonGrid.svelte +25 -0
  39. package/dist/components/depth/HorizonGrid.svelte.d.ts +9 -0
  40. package/dist/components/depth/Plinth.svelte +10 -0
  41. package/dist/components/depth/Plinth.svelte.d.ts +10 -0
  42. package/dist/components/display/Avatar.svelte +5 -0
  43. package/dist/components/display/Avatar.svelte.d.ts +5 -0
  44. package/dist/components/display/Badge.svelte +16 -0
  45. package/dist/components/display/Badge.svelte.d.ts +6 -0
  46. package/dist/components/display/Blockquote.svelte +4 -0
  47. package/dist/components/display/Blockquote.svelte.d.ts +4 -0
  48. package/dist/components/display/CodeBlock.svelte +5 -0
  49. package/dist/components/display/CodeBlock.svelte.d.ts +5 -0
  50. package/dist/components/display/MetricCard.svelte +23 -0
  51. package/dist/components/display/MetricCard.svelte.d.ts +6 -0
  52. package/dist/components/display/Table.svelte +7 -0
  53. package/dist/components/display/Table.svelte.d.ts +7 -0
  54. package/dist/components/feedback/Alert.svelte +24 -0
  55. package/dist/components/feedback/Alert.svelte.d.ts +6 -0
  56. package/dist/components/feedback/EmptyState.svelte +7 -0
  57. package/dist/components/feedback/EmptyState.svelte.d.ts +7 -0
  58. package/dist/components/feedback/ErrorState.svelte +5 -0
  59. package/dist/components/feedback/ErrorState.svelte.d.ts +5 -0
  60. package/dist/components/feedback/Skeleton.svelte +6 -0
  61. package/dist/components/feedback/Skeleton.svelte.d.ts +6 -0
  62. package/dist/components/feedback/StatusDot.svelte +36 -1
  63. package/dist/components/feedback/StatusDot.svelte.d.ts +6 -0
  64. package/dist/components/feedback/StatusLine.svelte +8 -2
  65. package/dist/components/feedback/StatusLine.svelte.d.ts +6 -0
  66. package/dist/components/feedback/Toast.svelte +16 -2
  67. package/dist/components/feedback/Toast.svelte.d.ts +10 -0
  68. package/dist/components/inputs/Button.svelte +74 -4
  69. package/dist/components/inputs/Button.svelte.d.ts +8 -0
  70. package/dist/components/inputs/Checkbox.svelte +5 -0
  71. package/dist/components/inputs/Checkbox.svelte.d.ts +5 -0
  72. package/dist/components/inputs/FileUpload.svelte +5 -0
  73. package/dist/components/inputs/FileUpload.svelte.d.ts +5 -0
  74. package/dist/components/inputs/Input.svelte +10 -2
  75. package/dist/components/inputs/Input.svelte.d.ts +7 -0
  76. package/dist/components/inputs/Select.svelte +8 -0
  77. package/dist/components/inputs/Select.svelte.d.ts +8 -0
  78. package/dist/components/inputs/Textarea.svelte +9 -2
  79. package/dist/components/inputs/Textarea.svelte.d.ts +6 -0
  80. package/dist/components/inputs/Toggle.svelte +6 -1
  81. package/dist/components/inputs/Toggle.svelte.d.ts +5 -0
  82. package/dist/components/layout/Card.svelte +11 -0
  83. package/dist/components/layout/Card.svelte.d.ts +11 -0
  84. package/dist/components/layout/Drawer.svelte +7 -0
  85. package/dist/components/layout/Drawer.svelte.d.ts +6 -0
  86. package/dist/components/layout/Grid.svelte +10 -0
  87. package/dist/components/layout/Grid.svelte.d.ts +10 -0
  88. package/dist/components/layout/Modal.svelte +15 -0
  89. package/dist/components/layout/Modal.svelte.d.ts +10 -0
  90. package/dist/components/layout/Panel.svelte +9 -0
  91. package/dist/components/layout/Panel.svelte.d.ts +9 -0
  92. package/dist/components/layout/Popover.svelte +10 -0
  93. package/dist/components/layout/Popover.svelte.d.ts +9 -0
  94. package/dist/components/layout/Stack.svelte +12 -0
  95. package/dist/components/layout/Stack.svelte.d.ts +12 -0
  96. package/dist/components/navigation/Breadcrumb.svelte +8 -0
  97. package/dist/components/navigation/Breadcrumb.svelte.d.ts +8 -0
  98. package/dist/components/navigation/DropdownMenu.svelte +12 -0
  99. package/dist/components/navigation/DropdownMenu.svelte.d.ts +12 -0
  100. package/dist/components/navigation/SidebarNav.svelte +10 -0
  101. package/dist/components/navigation/SidebarNav.svelte.d.ts +9 -0
  102. package/dist/components/navigation/Tabs.svelte +26 -1
  103. package/dist/components/navigation/Tabs.svelte.d.ts +8 -0
  104. package/dist/components/navigation/Topbar.svelte +9 -0
  105. package/dist/components/navigation/Topbar.svelte.d.ts +9 -0
  106. package/dist/components/patterns/ActionBar.svelte +11 -0
  107. package/dist/components/patterns/ActionBar.svelte.d.ts +10 -0
  108. package/dist/components/patterns/ChapterMark.svelte +152 -0
  109. package/dist/components/patterns/ChapterMark.svelte.d.ts +19 -0
  110. package/dist/components/patterns/ConfirmDialog.svelte +12 -0
  111. package/dist/components/patterns/ConfirmDialog.svelte.d.ts +12 -0
  112. package/dist/components/patterns/DepthPortal.svelte +123 -0
  113. package/dist/components/patterns/DepthPortal.svelte.d.ts +24 -0
  114. package/dist/components/patterns/Manifesto.svelte +171 -0
  115. package/dist/components/patterns/Manifesto.svelte.d.ts +25 -0
  116. package/dist/components/patterns/PageHeader.svelte +8 -0
  117. package/dist/components/patterns/PageHeader.svelte.d.ts +8 -0
  118. package/dist/components/patterns/PullQuote.svelte +145 -0
  119. package/dist/components/patterns/PullQuote.svelte.d.ts +23 -0
  120. package/dist/components/patterns/RegisterSwitcher.svelte +132 -0
  121. package/dist/components/patterns/RegisterSwitcher.svelte.d.ts +21 -0
  122. package/dist/components/patterns/SearchBar.svelte +5 -0
  123. package/dist/components/patterns/SearchBar.svelte.d.ts +5 -0
  124. package/dist/components/patterns/ShowcaseFrame.svelte +117 -0
  125. package/dist/components/patterns/ShowcaseFrame.svelte.d.ts +28 -0
  126. package/dist/components/patterns/TerminalBoot.svelte +15 -1
  127. package/dist/components/patterns/TerminalBoot.svelte.d.ts +12 -0
  128. package/dist/components/primitives/Divider.svelte +30 -0
  129. package/dist/components/primitives/Divider.svelte.d.ts +5 -0
  130. package/dist/components/primitives/Icon.svelte +9 -0
  131. package/dist/components/primitives/Icon.svelte.d.ts +9 -0
  132. package/dist/components/primitives/Label.svelte +6 -0
  133. package/dist/components/primitives/Label.svelte.d.ts +6 -0
  134. package/dist/components/primitives/Surface.svelte +67 -2
  135. package/dist/components/primitives/Surface.svelte.d.ts +7 -0
  136. package/dist/components/primitives/Text.svelte +32 -0
  137. package/dist/components/primitives/Text.svelte.d.ts +7 -0
  138. package/dist/components/scenes/ArchiveScene.svelte +10 -0
  139. package/dist/components/scenes/ArchiveScene.svelte.d.ts +10 -0
  140. package/dist/components/scenes/DepthScene.svelte +128 -0
  141. package/dist/components/scenes/DepthScene.svelte.d.ts +36 -0
  142. package/dist/components/scenes/LogScene.svelte +14 -0
  143. package/dist/components/scenes/LogScene.svelte.d.ts +14 -0
  144. package/dist/components/scenes/NarrativeScene.svelte +9 -0
  145. package/dist/components/scenes/NarrativeScene.svelte.d.ts +9 -0
  146. package/dist/components/scenes/ReadoutScene.svelte +11 -0
  147. package/dist/components/scenes/ReadoutScene.svelte.d.ts +11 -0
  148. package/dist/components/scenes/StageScene.svelte +14 -0
  149. package/dist/components/scenes/StageScene.svelte.d.ts +14 -0
  150. package/dist/components/system/AppShell.svelte +62 -0
  151. package/dist/components/system/AppShell.svelte.d.ts +32 -0
  152. package/dist/examples/ArcaneShard.svelte +364 -0
  153. package/dist/examples/ArcaneShard.svelte.d.ts +3 -0
  154. package/dist/examples/HextechForge.svelte +324 -0
  155. package/dist/examples/HextechForge.svelte.d.ts +3 -0
  156. package/dist/index.d.ts +15 -1
  157. package/dist/index.js +16 -1
  158. package/dist/styles.css +2 -0
  159. package/dist/system/actions/echo.js +13 -4
  160. package/dist/system/actions/resolve.js +20 -6
  161. package/dist/system/actions/reveal.js +1 -1
  162. package/dist/system/actions/surface.js +1 -3
  163. package/dist/system/register.d.ts +1 -1
  164. package/dist/system/register.js +5 -1
  165. package/dist/tokens/arcane.css +96 -0
  166. package/dist/tokens/hextech.css +96 -0
  167. package/dist/tokens/tokens.css +6 -4
  168. package/dist/tokens/tokens.d.ts +41 -0
  169. package/dist/tokens/tokens.js +41 -0
  170. package/package.json +6 -2
package/dist/components/scenes/StageScene.svelte CHANGED
@@ -3,6 +3,20 @@
3
3
  import CornerBrackets from '../ambient/CornerBrackets.svelte';
4
4
  import type { Snippet } from 'svelte';
5
5
 
6
+ /**
7
+ * @remarks Use for hero, landing, or feature reveal pages. Centered, theatrical, full-viewport.
8
+ * @example
9
+ * <StageScene>
10
+ * {#snippet label()}<Label color="signal">v2.0 released</Label>{/snippet}
11
+ * {#snippet heading()}<Text expression="title-card" as="h1">deep signal</Text>{/snippet}
12
+ * {#snippet subheading()}<Text expression="manifesto">a quiet tool for deliberate work.</Text>{/snippet}
13
+ * {#snippet actions()}
14
+ * <Button variant="primary">get started</Button>
15
+ * <Button variant="ghost">learn more</Button>
16
+ * {/snippet}
17
+ * {#snippet ambient()}<GridOverlay />{/snippet}
18
+ * </StageScene>
19
+ */
6
20
  interface Props {
7
21
  /** Additional CSS classes. */
8
22
  class?: string;
package/dist/components/scenes/StageScene.svelte.d.ts CHANGED
@@ -1,4 +1,18 @@
1
1
  import type { Snippet } from 'svelte';
2
+ /**
3
+ * @remarks Use for hero, landing, or feature reveal pages. Centered, theatrical, full-viewport.
4
+ * @example
5
+ * <StageScene>
6
+ * {#snippet label()}<Label color="signal">v2.0 released</Label>{/snippet}
7
+ * {#snippet heading()}<Text expression="title-card" as="h1">deep signal</Text>{/snippet}
8
+ * {#snippet subheading()}<Text expression="manifesto">a quiet tool for deliberate work.</Text>{/snippet}
9
+ * {#snippet actions()}
10
+ * <Button variant="primary">get started</Button>
11
+ * <Button variant="ghost">learn more</Button>
12
+ * {/snippet}
13
+ * {#snippet ambient()}<GridOverlay />{/snippet}
14
+ * </StageScene>
15
+ */
2
16
  interface Props {
3
17
  /** Additional CSS classes. */
4
18
  class?: string;
package/dist/components/system/AppShell.svelte ADDED
@@ -0,0 +1,62 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+ import { applyRegister, clearRegister } from '../../system/register.js';
4
+ import type { Register } from '../../system/register.js';
5
+ import Vignette from '../ambient/Vignette.svelte';
6
+
7
+ /**
8
+ * Zero-config app wrapper. Handles IBM Plex Mono font injection, register application
9
+ * to `<body>`, and the global Vignette overlay.
10
+ *
11
+ * Import `@hyvnt/hyvui/styles.css` separately in your app entry point.
12
+ *
13
+ * @example
14
+ * <AppShell register="mission-control">
15
+ * <Topbar />
16
+ * <StageScene>...</StageScene>
17
+ * </AppShell>
18
+ *
19
+ * @example
20
+ * <!-- opt out of automatic font + vignette -->
21
+ * <AppShell loadFonts={false} vignette={false}>
22
+ * <slot />
23
+ * </AppShell>
24
+ */
25
+ interface Props {
26
+ /** Design register applied to `<body>`. Controls font weighting and surface density. Omit for base styles. */
27
+ register?: Register | null;
28
+ /** Inject IBM Plex Mono (400) from Google Fonts via `<head>`. Default: true. */
29
+ loadFonts?: boolean;
30
+ /** Render the global Vignette overlay. Default: true. */
31
+ vignette?: boolean;
32
+ children?: Snippet;
33
+ }
34
+
35
+ let { register = null, loadFonts = true, vignette = true, children }: Props = $props();
36
+
37
+ $effect(() => {
38
+ if (register) {
39
+ applyRegister(register);
40
+ } else {
41
+ clearRegister();
42
+ }
43
+ return () => clearRegister();
44
+ });
45
+ </script>
46
+
47
+ <svelte:head>
48
+ {#if loadFonts}
49
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
50
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
51
+ <link
52
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap"
53
+ rel="stylesheet"
54
+ />
55
+ {/if}
56
+ </svelte:head>
57
+
58
+ {#if vignette}
59
+ <Vignette />
60
+ {/if}
61
+
62
+ {@render children?.()}
package/dist/components/system/AppShell.svelte.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { Register } from '../../system/register.js';
3
+ /**
4
+ * Zero-config app wrapper. Handles IBM Plex Mono font injection, register application
5
+ * to `<body>`, and the global Vignette overlay.
6
+ *
7
+ * Import `@hyvnt/hyvui/styles.css` separately in your app entry point.
8
+ *
9
+ * @example
10
+ * <AppShell register="mission-control">
11
+ * <Topbar />
12
+ * <StageScene>...</StageScene>
13
+ * </AppShell>
14
+ *
15
+ * @example
16
+ * <!-- opt out of automatic font + vignette -->
17
+ * <AppShell loadFonts={false} vignette={false}>
18
+ * <slot />
19
+ * </AppShell>
20
+ */
21
+ interface Props {
22
+ /** Design register applied to `<body>`. Controls font weighting and surface density. Omit for base styles. */
23
+ register?: Register | null;
24
+ /** Inject IBM Plex Mono (400) from Google Fonts via `<head>`. Default: true. */
25
+ loadFonts?: boolean;
26
+ /** Render the global Vignette overlay. Default: true. */
27
+ vignette?: boolean;
28
+ children?: Snippet;
29
+ }
30
+ declare const AppShell: import("svelte").Component<Props, {}, "">;
31
+ type AppShell = ReturnType<typeof AppShell>;
32
+ export default AppShell;
package/dist/examples/ArcaneShard.svelte ADDED
@@ -0,0 +1,364 @@
1
+ <!--
2
+ EXAMPLE: Arcane Shard
3
+ REGISTER: arcane
4
+ CONCEPT: a zaun research log — unstable readings, shimmer contamination, barely contained data
5
+ DEMONSTRATES: CrystalShard, ArcaneVein, ShimmerCloud, SignalRing, NarrativeScene, Panel, Text expressions, applyRegister
6
+ INSPIRED BY: a contaminated field report from beneath the undercity
7
+ -->
8
+ <script lang="ts">
9
+ import {
10
+ Text,
11
+ Label,
12
+ Badge,
13
+ Divider,
14
+ Stack,
15
+ Panel,
16
+ Card,
17
+ StatusDot,
18
+ StatusLine,
19
+ SignalRing,
20
+ NarrativeScene,
21
+ CrystalShard,
22
+ ArcaneVein,
23
+ ShimmerCloud,
24
+ surface,
25
+ applyRegister
26
+ } from '../index.js';
27
+ import { onMount } from 'svelte';
28
+
29
+ const readings = [
30
+ { ts: '04:12:08', signal: '0.003', status: 'baseline' },
31
+ { ts: '04:14:33', signal: '0.047', status: 'elevated' },
32
+ { ts: '04:18:51', signal: '0.214', status: 'elevated' },
33
+ { ts: '04:22:19', signal: '1.880', status: 'breach' },
34
+ { ts: '04:23:44', signal: '—', status: 'sensor lost' },
35
+ { ts: '04:31:02', signal: '0.009', status: 'resuming' }
36
+ ];
37
+
38
+ let glitchPhase = $state(false);
39
+ let intervalId: ReturnType<typeof setInterval> | undefined;
40
+
41
+ onMount(() => {
42
+ applyRegister('arcane');
43
+
44
+ intervalId = setInterval(() => {
45
+ glitchPhase = !glitchPhase;
46
+ }, 3800);
47
+
48
+ return () => {
49
+ clearInterval(intervalId);
50
+ applyRegister('field-notebook');
51
+ };
52
+ });
53
+ </script>
54
+
55
+ <svelte:head>
56
+ <title>arcane shard // hyvui</title>
57
+ </svelte:head>
58
+
59
+ <div class="shard-wrap">
60
+ <div class="shard-shimmer-host" aria-hidden="true">
61
+ <ShimmerCloud count={40} />
62
+ </div>
63
+
64
+ <div class="shard-shell">
65
+ <!-- Masthead -->
66
+ <header class="shard-header" use:surface>
67
+ <div class="shard-header-top">
68
+ <Text expression="readout">RESEARCH LOG // UNDERCITY SECTOR 7 // CLASSIFIED</Text>
69
+ <a href="/" class="shard-back">← library</a>
70
+ </div>
71
+ <div class="shard-header-status">
72
+ <StatusDot status="warn" size={7} />
73
+ <Label color="muted">shimmer contamination detected</Label>
74
+ <span class="shard-sep" aria-hidden="true">//</span>
75
+ <Label color="muted">data integrity uncertain</Label>
76
+ </div>
77
+ </header>
78
+
79
+ <ArcaneVein x1="0%" y1="0%" x2="100%" y2="0%" class="shard-divider-vein" />
80
+
81
+ <!-- Main body -->
82
+ <div class="shard-body">
83
+ <!-- Left: narrative -->
84
+ <div class="shard-narrative" use:surface={{ delay: 0 }}>
85
+ <div class="shard-lede">
86
+ <Text expression="title-card" class={glitchPhase ? 'shard-glitch' : ''}>
87
+ something leaked through
88
+ </Text>
89
+ </div>
90
+ <Text expression="manifesto">
91
+ the shimmer doesn't ask. it rewrites what it touches. six instruments failed before
92
+ we understood what we were measuring. the seventh survived — barely.
93
+ </Text>
94
+
95
+ <Divider />
96
+
97
+ <Stack gap="var(--space-md)">
98
+ <div use:surface={{ delay: 80 }}>
99
+ <Label color="accent">anomaly log / 2025.11.22 / 04:12–04:31</Label>
100
+ <div class="shard-log">
101
+ {#each readings as r}
102
+ <div class="shard-log-row" class:shard-log-row--breach={r.status === 'breach'} class:shard-log-row--lost={r.status === 'sensor lost'}>
103
+ <span class="shard-log-ts">{r.ts}</span>
104
+ <span class="shard-log-signal">{r.signal}</span>
105
+ <span class="shard-log-status">{r.status}</span>
106
+ </div>
107
+ {/each}
108
+ </div>
109
+ </div>
110
+
111
+ <div use:surface={{ delay: 160 }}>
112
+ <Text expression="whisper">
113
+ instruments 1 through 5 showed the same thing. instrument 6 showed nothing.
114
+ instrument 7 showed too much.
115
+ </Text>
116
+ </div>
117
+ </Stack>
118
+ </div>
119
+
120
+ <!-- Right: visual artifacts -->
121
+ <div class="shard-artifacts">
122
+ <div class="shard-shard-cluster" use:surface={{ delay: 40 }}>
123
+ <div class="shard-cluster-inner">
124
+ <SignalRing size={160} color="var(--arc-magenta, #b845c9)" class="shard-ring" />
125
+ <div class="shard-shards">
126
+ <CrystalShard size={90} class="shard-crystal shard-crystal--main" />
127
+ <CrystalShard size={42} class="shard-crystal shard-crystal--sm1" />
128
+ <CrystalShard size={28} class="shard-crystal shard-crystal--sm2" />
129
+ </div>
130
+ </div>
131
+ <Label color="muted">shimmer crystal fragment // specimen 7-C</Label>
132
+ </div>
133
+
134
+ <div class="shard-conduit" use:surface={{ delay: 120 }}>
135
+ <Label color="muted">vein trace // wall segment B</Label>
136
+ <div class="shard-conduit-canvas">
137
+ <ArcaneVein x1="10%" y1="90%" x2="90%" y2="10%" />
138
+ <ArcaneVein x1="5%" y1="60%" x2="65%" y2="20%" />
139
+ </div>
140
+ </div>
141
+
142
+ <div class="shard-status-panel" use:surface={{ delay: 200 }}>
143
+ <StatusLine status="warn" message="contamination level / elevated" visible={true} />
144
+ <StatusLine status="ok" message="instrument 7 / operational" visible={true} />
145
+ <StatusLine status="fail" message="containment / breached" visible={true} />
146
+ <StatusLine status="pend" message="recovery status / in progress" visible={true} />
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <ArcaneVein x1="0%" y1="100%" x2="100%" y2="100%" class="shard-divider-vein" />
152
+
153
+ <footer class="shard-footer">
154
+ <Text expression="readout">END OF LOG // further entries pending instrument recovery</Text>
155
+ </footer>
156
+ </div>
157
+ </div>
158
+
159
+ <style>
160
+ .shard-wrap {
161
+ position: relative;
162
+ min-height: 100dvh;
163
+ background: var(--bg);
164
+ overflow: hidden;
165
+ }
166
+
167
+ .shard-shimmer-host {
168
+ position: fixed;
169
+ inset: 0;
170
+ z-index: 0;
171
+ pointer-events: none;
172
+ }
173
+
174
+ .shard-shell {
175
+ position: relative;
176
+ z-index: 1;
177
+ max-width: 72rem;
178
+ margin: 0 auto;
179
+ padding: var(--space-xl) var(--space-lg);
180
+ display: flex;
181
+ flex-direction: column;
182
+ gap: var(--space-lg);
183
+ }
184
+
185
+ .shard-header {
186
+ padding: var(--space-md) var(--space-lg);
187
+ border: 1px solid var(--line);
188
+ background: var(--surface-panel);
189
+ display: flex;
190
+ flex-direction: column;
191
+ gap: var(--space-xs);
192
+ }
193
+
194
+ .shard-header-top {
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: space-between;
198
+ }
199
+
200
+ .shard-header-status {
201
+ display: flex;
202
+ align-items: center;
203
+ gap: var(--space-sm);
204
+ }
205
+
206
+ .shard-sep {
207
+ font-family: var(--font-mono);
208
+ color: var(--muted);
209
+ font-size: 0.72rem;
210
+ }
211
+
212
+ .shard-back {
213
+ font-family: var(--font-mono);
214
+ font-size: 0.72rem;
215
+ letter-spacing: 0.1em;
216
+ color: var(--muted);
217
+ text-decoration: none;
218
+ transition: color var(--transition-fast);
219
+ }
220
+
221
+ .shard-back:hover {
222
+ color: var(--text);
223
+ }
224
+
225
+ :global(.shard-divider-vein) {
226
+ height: 2px;
227
+ position: relative;
228
+ }
229
+
230
+ .shard-body {
231
+ display: grid;
232
+ grid-template-columns: 1.2fr 1fr;
233
+ gap: var(--space-xl);
234
+ align-items: start;
235
+ }
236
+
237
+ .shard-narrative {
238
+ display: flex;
239
+ flex-direction: column;
240
+ gap: var(--space-lg);
241
+ }
242
+
243
+ .shard-lede {
244
+ position: relative;
245
+ }
246
+
247
+ :global(.shard-glitch) {
248
+ animation: shard-glitch 0.18s steps(2) both;
249
+ }
250
+
251
+ @keyframes shard-glitch {
252
+ 0% { transform: translate(0); filter: none; }
253
+ 25% { transform: translate(-2px, 1px); filter: hue-rotate(40deg); }
254
+ 50% { transform: translate(2px, -1px); filter: hue-rotate(-40deg); }
255
+ 75% { transform: translate(-1px, 0); filter: none; }
256
+ 100% { transform: translate(0); }
257
+ }
258
+
259
+ .shard-log {
260
+ display: flex;
261
+ flex-direction: column;
262
+ margin-top: var(--space-sm);
263
+ font-family: var(--font-mono);
264
+ font-size: 0.78rem;
265
+ }
266
+
267
+ .shard-log-row {
268
+ display: grid;
269
+ grid-template-columns: 6ch 6ch 1fr;
270
+ gap: var(--space-sm);
271
+ padding: 0.35em 0;
272
+ border-bottom: 1px solid var(--line);
273
+ color: var(--muted);
274
+ }
275
+
276
+ .shard-log-row--breach {
277
+ color: var(--arc-shimmer, #e94cbc);
278
+ }
279
+
280
+ .shard-log-row--lost {
281
+ opacity: 0.45;
282
+ font-style: italic;
283
+ }
284
+
285
+ .shard-log-ts { color: var(--muted-strong); }
286
+ .shard-log-signal { color: var(--text); }
287
+
288
+ .shard-artifacts {
289
+ display: flex;
290
+ flex-direction: column;
291
+ gap: var(--space-lg);
292
+ }
293
+
294
+ .shard-shard-cluster {
295
+ display: flex;
296
+ flex-direction: column;
297
+ gap: var(--space-sm);
298
+ padding: var(--space-lg);
299
+ border: 1px solid var(--line);
300
+ background: var(--surface-panel);
301
+ }
302
+
303
+ .shard-cluster-inner {
304
+ position: relative;
305
+ height: 200px;
306
+ display: flex;
307
+ align-items: center;
308
+ justify-content: center;
309
+ }
310
+
311
+ :global(.shard-ring) {
312
+ position: absolute;
313
+ top: 50%;
314
+ left: 50%;
315
+ transform: translate(-50%, -50%);
316
+ opacity: 0.4;
317
+ }
318
+
319
+ .shard-shards {
320
+ position: relative;
321
+ display: flex;
322
+ align-items: flex-end;
323
+ gap: var(--space-xs);
324
+ }
325
+
326
+ .shard-conduit {
327
+ display: flex;
328
+ flex-direction: column;
329
+ gap: var(--space-sm);
330
+ padding: var(--space-md);
331
+ border: 1px solid var(--line);
332
+ background: var(--surface-panel);
333
+ }
334
+
335
+ .shard-conduit-canvas {
336
+ position: relative;
337
+ height: 100px;
338
+ }
339
+
340
+ .shard-status-panel {
341
+ display: flex;
342
+ flex-direction: column;
343
+ gap: var(--space-xs);
344
+ padding: var(--space-md);
345
+ border: 1px solid var(--line);
346
+ background: var(--surface-panel);
347
+ }
348
+
349
+ .shard-footer {
350
+ text-align: center;
351
+ padding: var(--space-md) 0;
352
+ opacity: 0.55;
353
+ }
354
+
355
+ @media (max-width: 768px) {
356
+ .shard-body {
357
+ grid-template-columns: 1fr;
358
+ }
359
+
360
+ .shard-shell {
361
+ padding: var(--space-lg) var(--space-md);
362
+ }
363
+ }
364
+ </style>
package/dist/examples/ArcaneShard.svelte.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const ArcaneShard: import("svelte").Component<Record<string, never>, {}, "">;
2
+ type ArcaneShard = ReturnType<typeof ArcaneShard>;
3
+ export default ArcaneShard;