pict-section-form 1.1.0 → 1.1.2

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 (45) hide show
  1. package/docs/_cover.md +3 -0
  2. package/docs/_sidebar.md +5 -0
  3. package/docs/_version.json +3 -3
  4. package/docs/examples/README.md +3 -0
  5. package/docs/examples/change_tracking/change_tracking.js +9437 -9427
  6. package/docs/examples/diagram_form/README.md +116 -0
  7. package/docs/examples/diagram_form/diagram_form_example.min.js +42 -0
  8. package/docs/examples/diagram_form/excalidraw-iframe-host.html +25 -0
  9. package/docs/examples/diagram_form/excalidraw-wrapper.css +1 -0
  10. package/docs/examples/diagram_form/excalidraw-wrapper.min.js +3327 -0
  11. package/docs/examples/diagram_form/index.html +116 -0
  12. package/docs/examples/diagram_form/manifest.json +13 -0
  13. package/docs/examples/diagram_form/react-vendor.min.js +9 -0
  14. package/docs/examples/dynamic_analysis/dynamic_analysis_application.js +6549 -6550
  15. package/docs/examples/gradebook/gradebook_application.min.js +2 -2
  16. package/docs/examples/ndt_field_test/ndt_field_test.js +9437 -9427
  17. package/docs/examples/richtext_form/README.md +132 -0
  18. package/docs/examples/richtext_form/index.html +82 -0
  19. package/docs/examples/richtext_form/richtext_form_example.min.js +42 -0
  20. package/docs/examples/scope_mathematics/scope_mathematics.js +9437 -9427
  21. package/docs/examples/simple_table/simple_tabular_application.min.js +2 -2
  22. package/docs/examples/superhero_studio/README.md +199 -0
  23. package/docs/examples/superhero_studio/excalidraw-iframe-host.html +25 -0
  24. package/docs/examples/superhero_studio/excalidraw-wrapper.css +1 -0
  25. package/docs/examples/superhero_studio/excalidraw-wrapper.min.js +3327 -0
  26. package/docs/examples/superhero_studio/index.html +166 -0
  27. package/docs/examples/superhero_studio/manifest.json +13 -0
  28. package/docs/examples/superhero_studio/react-vendor.min.js +9 -0
  29. package/docs/examples/superhero_studio/superhero_studio_example.min.js +42 -0
  30. package/docs/index.html +2 -2
  31. package/docs/retold-catalog.json +45 -1
  32. package/docs/retold-keyword-index.json +11843 -7677
  33. package/example_applications/diagram_form/DiagramForm-Example-Application.js +145 -0
  34. package/example_applications/diagram_form/html/index.html +116 -0
  35. package/example_applications/diagram_form/package.json +29 -0
  36. package/example_applications/richtext_form/RichTextForm-Example-Application.js +176 -0
  37. package/example_applications/richtext_form/html/index.html +82 -0
  38. package/example_applications/richtext_form/package.json +28 -0
  39. package/example_applications/superhero_studio/SuperheroStudio-Example-Application.js +313 -0
  40. package/example_applications/superhero_studio/html/index.html +166 -0
  41. package/example_applications/superhero_studio/package.json +29 -0
  42. package/example_applications/superhero_studio/superheroes/Superheroes.js +386 -0
  43. package/package.json +3 -9
  44. package/source/providers/inputs/Pict-Provider-Input-Diagram.js +1 -31
  45. package/source/providers/inputs/Pict-Provider-Input-RichText.js +1 -32
package/docs/examples/superhero_studio/index.html ADDED
@@ -0,0 +1,166 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Superhero Studio — Pict Example</title>
7
+
8
+ <style id="PICT-CSS"></style>
9
+ <style id="diagram-theme">
10
+ :root
11
+ {
12
+ --diagram-ink: #1B1F23;
13
+ --diagram-paper: #FDFCF7;
14
+ --diagram-accent: #E66C2C;
15
+ --diagram-highlight: #FFD966;
16
+ --diagram-deemphasis: #A0A0A0;
17
+ --diagram-link: #2E7D74;
18
+ }
19
+ </style>
20
+ <style>
21
+ *, *::before, *::after { box-sizing: border-box; }
22
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #F4F1ED; color: #2A2520; }
23
+
24
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
25
+ .pict-example-badge { background: #E76F51; color: #FAEDCD; padding: 0.6rem 1rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
26
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; }
27
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; letter-spacing: 0.03em; align-self: center; }
28
+
29
+ .page-content { padding: 1.6rem 2rem 4rem; max-width: 1080px; margin: 0 auto; }
30
+
31
+ .hero-bar
32
+ {
33
+ background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 8px;
34
+ padding: 16px 20px; margin-bottom: 22px;
35
+ display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
36
+ box-shadow: 0 1px 3px rgba(0,0,0,0.04);
37
+ }
38
+ .hero-bar label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5A4A3C; font-weight: 600; }
39
+ .hero-bar select
40
+ {
41
+ padding: 6px 12px; border: 1px solid #D4C4A8; border-radius: 4px;
42
+ background: #FBF7EE; font-size: 0.95rem; min-width: 220px;
43
+ }
44
+ .hero-bar .theme-group { margin-left: auto; display: flex; gap: 8px; align-items: center; }
45
+ .hero-bar .swatch
46
+ {
47
+ width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
48
+ border: 2px solid rgba(0,0,0,0.1); transition: transform 0.08s ease;
49
+ }
50
+ .hero-bar .swatch:hover { transform: scale(1.1); border-color: #2E7D74; }
51
+
52
+ .field-action-bar
53
+ {
54
+ display: flex; align-items: center; gap: 10px;
55
+ margin-top: -8px; margin-bottom: 12px; padding: 0 4px;
56
+ }
57
+ .field-action-bar button
58
+ {
59
+ padding: 4px 12px; font-size: 0.78rem; font-weight: 600;
60
+ color: #FAEDCD; background: #264653; border: none; border-radius: 4px;
61
+ cursor: pointer;
62
+ }
63
+ .field-action-bar button:hover { background: #E76F51; }
64
+ .field-action-bar .hint { font-size: 0.72rem; color: #8A7F72; }
65
+
66
+ #Pict-Form-Container
67
+ {
68
+ background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 8px;
69
+ padding: 24px 26px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
70
+ }
71
+
72
+ .notes
73
+ {
74
+ margin-top: 24px; padding: 14px 18px;
75
+ background: #FFF8E7; border-left: 3px solid #E9C46A; border-radius: 4px;
76
+ font-size: 0.85rem; color: #5A4A3C;
77
+ }
78
+ .notes strong { color: #2A2520; }
79
+ .notes code { font-family: 'SFMono-Regular', Menlo, monospace; background: #F0E8DA; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
80
+ </style>
81
+ </head>
82
+ <body>
83
+ <header class="pict-example-header">
84
+ <span class="pict-example-badge">Pict Example</span>
85
+ <span class="pict-example-app-name">Superhero Studio</span>
86
+ <span class="pict-example-module">pict-section-excalidraw &times; pict-section-markdowneditor</span>
87
+ </header>
88
+
89
+ <main class="page-content">
90
+ <div class="hero-bar">
91
+ <label for="hero-select">Load Superhero</label>
92
+ <select id="hero-select" onchange="_Pict.PictApplication.demo_loadHero(this.value)">
93
+ <option value="captain-verbose">Captain Verbose</option>
94
+ <option value="the-notebook">The Notebook</option>
95
+ <option value="markdown-marauder">Markdown Marauder</option>
96
+ <option value="the-modal-avenger">The Modal Avenger</option>
97
+ <option value="vector-vince">Vector Vince</option>
98
+ </select>
99
+
100
+ <div class="theme-group">
101
+ <span style="font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#5A4A3C; font-weight:600;">Portrait theme</span>
102
+ <span class="swatch" title="Notebook" style="background:#FDFCF7; border-color:#1B1F23;" onclick="window.applyTheme('notebook')"></span>
103
+ <span class="swatch" title="Dark" style="background:#1B1F23;" onclick="window.applyTheme('dark')"></span>
104
+ <span class="swatch" title="Blueprint" style="background:#5DA9E9;" onclick="window.applyTheme('blueprint')"></span>
105
+ <span class="swatch" title="Sepia" style="background:#B08968;" onclick="window.applyTheme('sepia')"></span>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="field-action-bar">
110
+ <button id="toggle-Portrait" onclick="_Pict.PictApplication.demo_toggleMode('Portrait')">Edit</button>
111
+ <span class="hint">Toggle the Portrait field into Excalidraw — first click lazy-loads the editor bundle.</span>
112
+
113
+ <button id="toggle-OriginStory" onclick="_Pict.PictApplication.demo_toggleMode('OriginStory')" style="margin-left:18px;">Edit</button>
114
+ <span class="hint">Toggle the Origin Story field into the markdown editor.</span>
115
+ </div>
116
+
117
+ <div id="Pict-Form-Container"></div>
118
+
119
+ <div class="notes">
120
+ <strong>What's happening:</strong>
121
+ Stock inputs (<code>Text</code>, <code>Number</code>, <code>Option</code>, <code>TextArea</code>) sit next to two complex InputTypes —
122
+ <code>Diagram</code> (Portrait) and <code>RichText</code> (Origin Story) — in the same form, all driven by the same
123
+ <code>marshalDataFromAppDataToView</code> pipeline. The portrait SVGs use <code>var(--diagram-ink, …)</code> with hex fallbacks,
124
+ so swapping the theme swatches recolors them live without re-rendering. Loading a new hero from the dropdown folds any open editors back
125
+ into view mode first, so the swap doesn't strand CodeMirror or Excalidraw on yesterday's character.
126
+ </div>
127
+ </main>
128
+
129
+ <link rel="stylesheet" href="./excalidraw-wrapper.css">
130
+ <script src="https://cdn.jsdelivr.net/npm/pict@1/dist/pict.min.js"></script>
131
+ <!-- Excalidraw vendor bundle (React + Excalidraw). The Diagram InputType
132
+ looks for window.PictSectionExcalidrawVendor when the Portrait field
133
+ flips to edit; without these tags Excalidraw won't mount. -->
134
+ <script src="./react-vendor.min.js"></script>
135
+ <script src="./excalidraw-wrapper.min.js"></script>
136
+ <script src="./superhero_studio_example.min.js"></script>
137
+ <script>
138
+ const _Themes =
139
+ {
140
+ notebook: { ink:'#1B1F23', paper:'#FDFCF7', accent:'#E66C2C', highlight:'#FFD966', deemphasis:'#A0A0A0', link:'#2E7D74' },
141
+ dark: { ink:'#EAEAEA', paper:'#1B1F23', accent:'#FFB570', highlight:'#FFD966', deemphasis:'#666666', link:'#7FC4BD' },
142
+ blueprint: { ink:'#08296B', paper:'#E5F0FB', accent:'#5DA9E9', highlight:'#F4D35E', deemphasis:'#8AA3B6', link:'#1F77B4' },
143
+ sepia: { ink:'#3D2B1F', paper:'#F1E3C9', accent:'#B07043', highlight:'#E2C58B', deemphasis:'#A48A6E', link:'#7A5A36' }
144
+ };
145
+ window.applyTheme = function(pName)
146
+ {
147
+ let tmpStyle = document.getElementById('diagram-theme');
148
+ let tmpT = _Themes[pName] || _Themes.notebook;
149
+ tmpStyle.textContent =
150
+ ':root { ' +
151
+ '--diagram-ink:' + tmpT.ink + ';' +
152
+ '--diagram-paper:' + tmpT.paper + ';' +
153
+ '--diagram-accent:' + tmpT.accent + ';' +
154
+ '--diagram-highlight:' + tmpT.highlight + ';' +
155
+ '--diagram-deemphasis:' + tmpT.deemphasis + ';' +
156
+ '--diagram-link:' + tmpT.link + ';' +
157
+ ' }';
158
+ };
159
+
160
+ Pict.safeOnDocumentReady(() =>
161
+ {
162
+ Pict.safeLoadPictApplication(window.SuperheroStudioExample, 1);
163
+ });
164
+ </script>
165
+ </body>
166
+ </html>
package/docs/examples/superhero_studio/manifest.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "generated": "2026-05-24T05:56:32.413Z",
3
+ "source": "vendor/excalidraw (mirror)",
4
+ "outputs": [
5
+ "react-vendor.min.js",
6
+ "excalidraw-wrapper.min.js",
7
+ "excalidraw-wrapper.css",
8
+ "excalidraw-iframe-host.html",
9
+ "excalidraw-iframe-host.js",
10
+ "assets/"
11
+ ],
12
+ "loadOrder": "Load react-vendor.min.js BEFORE excalidraw-wrapper.min.js. Apps already loading React + ReactDOM as window globals can omit react-vendor.min.js entirely."
13
+ }