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/diagram_form/index.html ADDED
@@ -0,0 +1,116 @@
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>Diagram Form Input — Pict Example</title>
7
+
8
+ <style id="PICT-CSS"></style>
9
+ <style id="diagram-theme">
10
+ /* Theme tokens that the saved SVG resolves to. Default = notebook. */
11
+ :root
12
+ {
13
+ --diagram-ink: #1B1F23;
14
+ --diagram-paper: #FDFCF7;
15
+ --diagram-accent: #E66C2C;
16
+ --diagram-highlight: #FFD966;
17
+ --diagram-deemphasis: #A0A0A0;
18
+ --diagram-link: #2E7D74;
19
+ }
20
+ </style>
21
+ <style>
22
+ *, *::before, *::after { box-sizing: border-box; }
23
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAF8F4; color: #2A2520; }
24
+
25
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
26
+ .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; }
27
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; }
28
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; letter-spacing: 0.03em; align-self: center; }
29
+
30
+ .page-content { padding: 2rem; max-width: 920px; margin: 0 auto; }
31
+ .intro { color: #5A4A3C; font-size: 0.9rem; line-height: 1.6; margin-bottom: 24px; }
32
+ .intro code { background: #F0E8DA; padding: 1px 6px; border-radius: 3px; font-family: 'SFMono-Regular', Menlo, monospace; font-size: 0.85em; }
33
+
34
+ .controls { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.85rem; }
35
+ .controls button { padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: #FAEDCD; background: #264653; border: none; border-radius: 4px; cursor: pointer; }
36
+ .controls button:hover { background: #E76F51; }
37
+ .controls .swatch { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; background: #F4EEE2; border-radius: 4px; cursor: pointer; user-select: none; }
38
+ .controls .swatch::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); background: var(--swatch-color, #fff); }
39
+
40
+ #Pict-Form-Container { background: #FFFFFF; border: 1px solid #D4C4A8; border-radius: 6px; padding: 20px; min-height: 280px; }
41
+
42
+ .notes { margin-top: 24px; padding: 14px 16px; background: #FFF8E7; border-left: 3px solid #E9C46A; border-radius: 3px; font-size: 0.82rem; color: #5A4A3C; }
43
+ .notes strong { color: #2A2520; }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <header class="pict-example-header">
48
+ <span class="pict-example-badge">Pict Example</span>
49
+ <span class="pict-example-app-name">Diagram Form Input</span>
50
+ <span class="pict-example-module">pict-section-excalidraw</span>
51
+ </header>
52
+
53
+ <main class="page-content">
54
+ <p class="intro">
55
+ A pict-section-form field whose <code>InputType</code> is <code>Diagram</code>. Boots in
56
+ <strong>view</strong> mode — the saved SVG is written inline, with theme-driven colors.
57
+ Click <em>Edit</em> to flip into Excalidraw (lazy-loads the editor bundle the first time).
58
+ Click a theme swatch — the view-mode SVG visibly re-colors without a re-render.
59
+ </p>
60
+
61
+ <div class="controls">
62
+ <button id="toggle-ArchDiagram" onclick="_Pict.PictApplication.demo_toggleMode('ArchDiagram')">Edit</button>
63
+
64
+ <span class="swatch" style="--swatch-color:#1B1F23" onclick="window.applyTheme('notebook')">Notebook</span>
65
+ <span class="swatch" style="--swatch-color:#EAEAEA" onclick="window.applyTheme('dark')">Dark</span>
66
+ <span class="swatch" style="--swatch-color:#5DA9E9" onclick="window.applyTheme('blueprint')">Blueprint</span>
67
+ </div>
68
+
69
+ <div id="Pict-Form-Container"></div>
70
+
71
+ <div class="notes">
72
+ <strong>Verifying:</strong>
73
+ In view mode, change theme — the inline SVG re-colors via CSS only. In edit mode, draw
74
+ something + click <em>Done</em>; the new SVG is themeified on save, so it picks up the
75
+ same CSS variables. Inspect the hidden input's value in DevTools to see the
76
+ <code>var(--diagram-ink, #...)</code> rewriting in action.
77
+ </div>
78
+ </main>
79
+
80
+ <link rel="stylesheet" href="./excalidraw-wrapper.css">
81
+ <script src="https://cdn.jsdelivr.net/npm/pict@1/dist/pict.min.js"></script>
82
+ <!-- Excalidraw vendor bundle (React + Excalidraw). The Diagram InputType's
83
+ editor mode looks for window.PictSectionExcalidrawVendor; without these
84
+ tags, switching the field to edit shows a "wrapper not loaded" notice. -->
85
+ <script src="./react-vendor.min.js"></script>
86
+ <script src="./excalidraw-wrapper.min.js"></script>
87
+ <script src="./diagram_form_example.min.js"></script>
88
+ <script>
89
+ const _Themes =
90
+ {
91
+ notebook: { ink:'#1B1F23', paper:'#FDFCF7', accent:'#E66C2C', highlight:'#FFD966', deemphasis:'#A0A0A0', link:'#2E7D74' },
92
+ dark: { ink:'#EAEAEA', paper:'#1B1F23', accent:'#FFB570', highlight:'#FFD966', deemphasis:'#666666', link:'#7FC4BD' },
93
+ blueprint: { ink:'#08296B', paper:'#E5F0FB', accent:'#5DA9E9', highlight:'#F4D35E', deemphasis:'#8AA3B6', link:'#1F77B4' }
94
+ };
95
+ window.applyTheme = function(pName)
96
+ {
97
+ let tmpStyle = document.getElementById('diagram-theme');
98
+ let tmpT = _Themes[pName] || _Themes.notebook;
99
+ tmpStyle.textContent =
100
+ ':root { ' +
101
+ '--diagram-ink:' + tmpT.ink + ';' +
102
+ '--diagram-paper:' + tmpT.paper + ';' +
103
+ '--diagram-accent:' + tmpT.accent + ';' +
104
+ '--diagram-highlight:' + tmpT.highlight + ';' +
105
+ '--diagram-deemphasis:' + tmpT.deemphasis + ';' +
106
+ '--diagram-link:' + tmpT.link + ';' +
107
+ ' }';
108
+ };
109
+
110
+ Pict.safeOnDocumentReady(() =>
111
+ {
112
+ Pict.safeLoadPictApplication(window.DiagramFormExample, 1);
113
+ });
114
+ </script>
115
+ </body>
116
+ </html>
package/docs/examples/diagram_form/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
+ }