stillmade-sdk 0.1.40 → 0.1.42
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/.stillmade/sdk-baseline.json +19 -19
- package/AGENTS.md +6 -2
- package/FRAME_VIEWS.md +41 -0
- package/INTERFACE_DESIGN.md +100 -8
- package/MOBILE_UI.md +3 -1
- package/PASTE_TO_LLM.md +18 -13
- package/SDK.md +200 -37
- package/UI_AESTHETIC.md +93 -4
- package/examples/check-clip.stillmade.json +4 -0
- package/examples/clean-text.stillmade.json +4 -0
- package/examples/custom-interface.stillmade.json +4 -0
- package/examples/describe-image.stillmade.json +4 -0
- package/examples/foley-cue.stillmade.json +4 -0
- package/examples/generate-image.stillmade.json +4 -0
- package/examples/generate-video.stillmade.json +4 -0
- package/examples/module-word-stats/stillmade.block.json +4 -0
- package/examples/narrate-script.stillmade.json +4 -0
- package/examples/numbered-takes.stillmade.json +4 -0
- package/examples/research-topic.stillmade.json +4 -0
- package/examples/score-a-scene.stillmade.json +4 -0
- package/examples/script-draft.stillmade.json +4 -0
- package/examples/summarize-page.stillmade.json +4 -0
- package/examples/text-workflow.stillmade.json +4 -0
- package/examples/thicken-lines.stillmade.json +4 -0
- package/examples/timeline-polish.stillmade.json +4 -0
- package/examples/transcribe-audio.stillmade.json +4 -0
- package/examples/word-count.stillmade.json +4 -0
- package/package.json +1 -1
- package/packages/block-cli/dev-host/assets/host.js +208 -37
- package/packages/block-cli/dev-host/assets/index.css +1 -1
- package/packages/block-cli/ready-gate.js +4 -0
- package/packages/block-cli/templates.js +7 -7
- package/packages/block-platform/block-readiness.js +24 -2
- package/packages/block-platform/canvas.js +17 -0
- package/packages/block-platform/catalog.js +21 -6
- package/packages/block-platform/host-release-manifests.js +95 -0
- package/packages/block-platform/native-host-inventory.js +29 -4
- package/packages/block-platform/node-defaults.js +1 -0
- package/packages/block-platform/project-context.js +1 -1
- package/packages/block-platform/script-handoff.js +1 -1
- package/packages/block-platform/step-groups.js +3 -1
- package/packages/block-sdk/audio-generation-example.js +2 -2
- package/packages/block-sdk/builder-contract.js +15 -4
- package/packages/block-sdk/capability-example.js +1 -1
- package/packages/block-sdk/contracts.js +3 -1
- package/packages/block-sdk/examples.js +3 -3
- package/packages/block-sdk/image-description-example.js +1 -1
- package/packages/block-sdk/image-generation-example.js +1 -1
- package/packages/block-sdk/index.d.ts +2 -2
- package/packages/block-sdk/media-analysis-example.js +1 -1
- package/packages/block-sdk/module-example.js +1 -1
- package/packages/block-sdk/speech-example.js +1 -1
- package/packages/block-sdk/state-example.js +1 -1
- package/packages/block-sdk/timeline-proposal-example.js +1 -1
- package/packages/block-sdk/transcription-example.js +1 -1
- package/packages/block-sdk/trigger-examples.js +2 -2
- package/packages/block-sdk/video-generation-example.js +1 -1
- package/packages/block-sdk/view-design.js +119 -18
- package/packages/block-sdk/web-example.js +2 -2
- package/packages/block-sdk/workspace-navigation.js +6 -2
- package/packages/design-system/block-kit.css +33 -6
- package/packages/design-system/block-kit.html +14 -4
- package/packages/design-system/theme.css +6 -5
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
"examples/camera-recorder.stillmade.json": "8d8224b319e94e4afec3551445404ae99eae8c4d6df176ca7538bb0472f426b6",
|
|
6
6
|
"examples/caption-from-text.stillmade.json": "3731a15b59043fbebee98416f2474800ef0154aa7873fb494934874ddcd2c705",
|
|
7
7
|
"examples/captions.stillmade-block": "b0fde32dddaf866f3e540018309aaa00ae56b0e74a53a498fbaf1553ce200bd6",
|
|
8
|
-
"examples/check-clip.stillmade.json": "
|
|
9
|
-
"examples/clean-text.stillmade.json": "
|
|
8
|
+
"examples/check-clip.stillmade.json": "f5abf67d5d5e46896af1b323abbc9e83e3936c4d35f900f763115ca9e07966b2",
|
|
9
|
+
"examples/clean-text.stillmade.json": "973a688879d51f7cf6c86c3a0698b68489e20946a7d28d234944f22548d24ed3",
|
|
10
10
|
"examples/comfy-invert.stillmade.json": "126bd3a8a88e14c08ae11c62a441ed099d83e16830e2062f936e14e56cb297eb",
|
|
11
11
|
"examples/comfy-text-to-image.stillmade.json": "957a616887115984c1888cf9c0eee2fe771dcbf041166ad112fb6c3feb7ad4dd",
|
|
12
|
-
"examples/custom-interface.stillmade.json": "
|
|
13
|
-
"examples/describe-image.stillmade.json": "
|
|
12
|
+
"examples/custom-interface.stillmade.json": "dc8554ecfb2723c41d62c0ff9fecb9997884b2a03ff5bb740325d6bb612aaac0",
|
|
13
|
+
"examples/describe-image.stillmade.json": "de5634639c7e0364d5ae9e6ac7a2bd4004eb3289c1767b3e7527166f2015f7e9",
|
|
14
14
|
"examples/docs-only-campfire-narrator.stillmade.json": "87c6a3b643b1ee007487e162aeced6f6302648f4c4a58b015e7df2ab9f2959be",
|
|
15
15
|
"examples/docs-only-custom-ui.stillmade.json": "4602fd6b9576d364e16b79d2f08b196a251a8e98cf3149576686a96680a5dfe6",
|
|
16
16
|
"examples/docs-only-gentle-trailer.stillmade.json": "ec081cc8aad654728dcd51257cb69603ec87fcc973ed2b1c5ea3d60a84c4c436",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"examples/docs-only-retained-versions.stillmade.json": "78b84f0e843887c2078ac3271d9c69ea779c31f94aee8d49f7465b8bbafef640",
|
|
21
21
|
"examples/docs-only-storybook-cover.stillmade.json": "7c94639d9bec5a673fe33f3c8c9b98e1119bea58a2fc8d0a7a98dabf73cc9a35",
|
|
22
22
|
"examples/export-timeline.stillmade-block": "7d3221dc3ec1491f420773edb0ad8612c650755111e1e8561510b68508976199",
|
|
23
|
-
"examples/foley-cue.stillmade.json": "
|
|
24
|
-
"examples/generate-image.stillmade.json": "
|
|
25
|
-
"examples/generate-video.stillmade.json": "
|
|
23
|
+
"examples/foley-cue.stillmade.json": "b579a73066cf65f6da2fba48c1965af83bc4325890643470229fd1c842470fc7",
|
|
24
|
+
"examples/generate-image.stillmade.json": "81feffcda94f6e9f3c5c503d83e0ca6ffa5cefa118e44f4a3751d2a925ca9680",
|
|
25
|
+
"examples/generate-video.stillmade.json": "01f1404219d0f500ebe06b9ddd1af280cb726aecb0c6aa11f6d94e9fc21f8267",
|
|
26
26
|
"examples/grayscale.stillmade.json": "8c901790c25d2544f284a6a43341f72aa6b7e9211bef272b2e1d53c92b9e5faf",
|
|
27
27
|
"examples/import-media.stillmade-block": "e9642e203080f1a145bec81871525a670f98dd1c8763862f81ab876fb15a656b",
|
|
28
28
|
"examples/javascript-cloze-quiz": "b36a370c8b53250b9bb04783591661268ec674052bc13bf8cc8910fa27151f83",
|
|
@@ -37,29 +37,29 @@
|
|
|
37
37
|
"examples/module-pdf-shot-list": "b372674aae8ef3392cc679cbfca25a76afcbf2271d5577e4055d2097d8a9ff24",
|
|
38
38
|
"examples/module-silence-trimmer": "baeb12ae028122d1bd05312c6b0680c33f95c7ea8c176675678a1c4ff005fa86",
|
|
39
39
|
"examples/module-tempo": "d2b842114e12b50de57f46ff004d6213022120c8dd7908fb7cb3648cd0e1d29a",
|
|
40
|
-
"examples/module-word-stats": "
|
|
41
|
-
"examples/narrate-script.stillmade.json": "
|
|
42
|
-
"examples/numbered-takes.stillmade.json": "
|
|
40
|
+
"examples/module-word-stats": "4ccd49dba4861a7c3a0076e8fc443142ba606dba62d9bc98a86dd60addbdb3f6",
|
|
41
|
+
"examples/narrate-script.stillmade.json": "0c1185ea1d2b4052ba65310d181118786fb8307de94c6d04f7efc594121ae79a",
|
|
42
|
+
"examples/numbered-takes.stillmade.json": "7252550ffd7dc442559785170037a079090dbaa0a94066c72cf3e844c4581a1b",
|
|
43
43
|
"examples/original-photo-editor": "12e88abd9cdeea6eba983699aa81fe8f29aca06bd8cb6d61dece9fb951dd702f",
|
|
44
44
|
"examples/original-photo-editor.stillmade-block": "7f063e4bd128c1730fa5dd28c4acda08c2dc3196719feb6eafee4e4c89ea0daf",
|
|
45
45
|
"examples/portable-regexp.stillmade-block": "04975bba1c0d719044ee41d6e0c58d73671c347f6b4ac16ba665bf5410116535",
|
|
46
46
|
"examples/portable-regexp.stillmade.json": "fd769d584a6437e2a37c7e4101a031c0fef740afc76ef91f2337e2956fb08a1a",
|
|
47
47
|
"examples/quieter-clips.stillmade.json": "23b026b267e5da522cc6a3a6af51e166a64fcc1d5391e855704fe1e1f243401b",
|
|
48
|
-
"examples/research-topic.stillmade.json": "
|
|
48
|
+
"examples/research-topic.stillmade.json": "50e8efb4ac81b165b17610e0fb7b2621b85ff9a14ebf2e045f30413246501b69",
|
|
49
49
|
"examples/saas-product-launch-reviewed-source.stillmade.json": "2ec264a160faba338f3924965f935ce92c3fdad1fb69719921d7561353b010ab",
|
|
50
50
|
"examples/saas-product-launch.stillmade.json": "aabec7d8680ef6687980296ab170bbb002c0dc81bc15edebdf9db9750e43eddb",
|
|
51
51
|
"examples/scene-shots.stillmade.json": "d10a0aebb42ff090035410dc92ab708ffaf50b579edac4aa2f2cf6150b3ef537",
|
|
52
|
-
"examples/score-a-scene.stillmade.json": "
|
|
52
|
+
"examples/score-a-scene.stillmade.json": "6059f2f65c48309f0c1711dbb6b5ee62a957ce07502a936f53b29685b425f8ec",
|
|
53
53
|
"examples/screen-recorder.stillmade.json": "f3509a577cdd6615d6687ed0be108ddef51bf1f79ff0e2176470e46c3054640d",
|
|
54
|
-
"examples/script-draft.stillmade.json": "
|
|
54
|
+
"examples/script-draft.stillmade.json": "3e8fc6e164c7b02f5f07ceb9771159e88252d405fa96a19107427e85c0457608",
|
|
55
55
|
"examples/shot-readiness.stillmade.json": "ed73fe9038afaed7c12435368e90001f0bd3cebd8f0e6fe06508c1bb80c8cb7e",
|
|
56
|
-
"examples/summarize-page.stillmade.json": "
|
|
57
|
-
"examples/text-workflow.stillmade.json": "
|
|
58
|
-
"examples/thicken-lines.stillmade.json": "
|
|
56
|
+
"examples/summarize-page.stillmade.json": "21f8be251733d1c236328f23fa0da6b4e5381d34374489926db61bdd54f3b75f",
|
|
57
|
+
"examples/text-workflow.stillmade.json": "286c2235cfc88d537556b94ee5735a05f2b790a0fb772014773ac7cf096ba455",
|
|
58
|
+
"examples/thicken-lines.stillmade.json": "287c872d44a18b8c7f79fb2d4047c78a54c1f2b315bd6ce4c1340d4e54d87dac",
|
|
59
59
|
"examples/timeline-mixer.stillmade.json": "93220984a88ca553dcf7102ce82b23d16eadda07809a89222a8589506743b5f8",
|
|
60
|
-
"examples/timeline-polish.stillmade.json": "
|
|
61
|
-
"examples/transcribe-audio.stillmade.json": "
|
|
60
|
+
"examples/timeline-polish.stillmade.json": "478398bae41271424b4bd3cfa03d704df515b12370f81052fbde463f48b01471",
|
|
61
|
+
"examples/transcribe-audio.stillmade.json": "a03b5fcd620b3a386c2c713239f026392ce4f1484a9c38c5bb9943e2eb6c4f1a",
|
|
62
62
|
"examples/view-react-chart": "a0e7ef5148e386b34e405187761d23f1739809c3d72c68c7c6b4e2193747218e",
|
|
63
|
-
"examples/word-count.stillmade.json": "
|
|
63
|
+
"examples/word-count.stillmade.json": "b815282e2dcd2827952e4a8bde403c5935141a98b9d54ee055da2b9d55cb43eb"
|
|
64
64
|
}
|
|
65
65
|
}
|
package/AGENTS.md
CHANGED
|
@@ -6,7 +6,7 @@ This folder is the StillMade Block SDK. Read this file before writing code; it i
|
|
|
6
6
|
|
|
7
7
|
Do not tell the user a Block is ready, done or working until `node packages/block-cli/cli.js gate .` (`gate <block-folder>` for a Block outside this SDK folder) passes after your last edit, and report the exact status it prints. In this folder Claude Code (`.claude/settings.json`) and Cursor (`.cursor/hooks.json`) run the gate when you finish a turn and send any failures back to you, but only in a session started in this folder: if you downloaded the SDK during the current session, run the gate yourself. Other agents must also run it themselves. A module Block runs code, so the gate a hook starts does not run it and says so: run `gate` or `ready` on it yourself. If you cannot fix a failure, say plainly that the Block is not ready and list the failing checks.
|
|
8
8
|
|
|
9
|
-
Contract `stillmade.block-builder@1.
|
|
9
|
+
Contract `stillmade.block-builder@1.17.0`. Humans, coding agents, imported source, GitHub repositories and generated code all adapt to the Block platform; anything that becomes a StillMade Block obeys this contract.
|
|
10
10
|
|
|
11
11
|
## Source of truth
|
|
12
12
|
|
|
@@ -68,9 +68,13 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
|
|
|
68
68
|
|
|
69
69
|
Name each input for what the person brings, in the job's words: `sermonVideo` for a sermon clip Block, `listingPhotos` for a listing, `lessonSlides` for a lesson podcast. StillMade titles the input from that name ("Sermon video") and words its drop area from it ("Drop your sermon video here", the formats, "Choose a video"), in StillMade and the SDK preview, so never draw your own upload box for an input. Keep a bare type name (`video`, `file`) only when any file of that kind does the job. The `description` says what makes a good one.
|
|
70
70
|
|
|
71
|
+
## Speak the job
|
|
72
|
+
|
|
73
|
+
These are StillMade's defaults: unless the person or the creator asked for something else, every screen speaks the job in its own words and adds nothing else. `manifest.action` names the Step's button, {label:"Plan the tour", running:"Planning the tour…"}, and StillMade adds the price ("Plan the tour · 1 credit"). Every Block whose Step shows StillMade's button declares it: any Block without its own screen, and any that calls operations. Without it StillMade can only guess from the Block's name or output ("Make clips"), and the readiness gate and StillMade's own builder send the Block back until it names the job. When the Block makes a picture, video or sound with AI the label starts with Generate and says what ("Generate tour", "Generate voiceover"); one that cuts or renders the person's own media says Make ("Make 6 clips"); never "Make it", "Run", "Submit", "Process" or a bare "Generate". The main button stands out: one solid `sm-primary` in the kit's ink, never restyled to the background; everything else is `sm-quiet` or an `sm-icon`, and close is an X icon. Report progress in the job's units with `stillmade.progress(fraction, label)` ("Moving through the kitchen, 4 of 9 rooms"), never "Processing". Head the result in the job's words ("9 rooms", "Your tour · 44 s"), never "Output". Say a problem in one line with its fix beside it ("No bathroom photo. Guests look for one." and Add photo). Stay quiet: no welcome text, tips under fields, tours or banners, and at most one line of guidance on a screen, only where the next move is not obvious; anything more goes in the input's `description`, which StillMade shows behind an (i). Say nothing about how the Block works (where it runs, saving, syncing, recovery, accounts, credits) or where a file is kept: StillMade tells the person what they need as one short notification, or nothing; never a sentence on the page, and never the same line under each item. Every drop area offers "Use a reference", which fills the Step from the person's saved photos, videos and notes: media inputs fill by kind, so take `video` or `asset` where a clip works as well as a photo, and text inputs fill by plain names and labels (`productName`, `website`, `brandColors`, `fonts`, `voice`, and `details` or `notes` for the reference's note); never build your own reference picker. Days and times are picked, never typed: use the `date` type, which StillMade shows as a calendar, with a list of times when the input is about a time (`postAt`, `startsAt`); a custom view uses `<input type="date">` or `type="datetime-local"`. Posting is a connector Step of its own, and StillMade words its button from the app and action ("Post to Instagram"). Before handing the Block back, clear every Wording note that `gate` and readiness list, unless the person asked for those words.
|
|
74
|
+
|
|
71
75
|
## Interface
|
|
72
76
|
|
|
73
|
-
If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (
|
|
77
|
+
If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, the picked one in the kit's ink fill (never restyled to an outline, a tint or the page's background) so it reads at a glance, one solid `sm-primary` naming the action in the job's words ("Plan the tour", "Generate voiceover"; never "Run" or "Make it") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. These compact rules are for a job or an ingredient. Size the view to the Block's tier (block-tier.js): an app, a workspace a person works in for a while (video editor, 3D configurator, CAD or drawing tool), looks and works like that kind of app instead of a compact page: its canvas or stage fills the view, with the panels, toolbars, inspector or timeline such an app has, direct manipulation (select, drag, zoom), keyboard shortcuts and undo; it keeps the host appearance and Block kit controls, its panels may scroll, and on a phone its tools fold into sheets while the canvas stays usable. Never shrink an app into a form of fields and one button. StillMade centers a standard view narrower than its Step and zooms a view to fill its space; an app that lays itself out (full-size canvas or WebGL, its own scroll, pan or zoom, its own Ctrl/Cmd +/- keys) puts `data-stillmade-layout="own"` on its outermost element, and StillMade then never centers, zooms or takes those keys. StillMade draws one player for every `<video controls>` (play, timeline, time, sound and full screen, shown while the pointer is on the video, with keys and touch) and a full-screen button on result pictures in `sm-stage` or `sm-gallery` and on any element marked `data-stillmade-expand` (the same value makes one set of pictures, `off` removes it); `data-stillmade-player="native"` keeps the browser's controls, and a `<video>` without `controls` is the Block's own and is never touched. A picture or clip that cannot show here (kept on another device, or it did not open) keeps its place as a quiet `sm-media-off` tile in its own shape with the `image-off` glyph and the reason in its label, never words in its place. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Mark each button `data-stillmade-action="what it does"` and label each field: Chat presses and fills them. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Show no raw JSON, internal IDs, filesystem details, provider terms or developer settings unless the Block is a developer tool. When a person chooses among options they need to hear or see (voices, music, fonts, looks, templates, images), let them preview each option before choosing: a sample or thumbnail from the Block's own files or the host's free samples, never a paid generation. Skip previews only when there is nothing to preview. Choices StillMade owns (voices, models in the run review) already show samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
|
|
74
78
|
|
|
75
79
|
## Shared editing
|
|
76
80
|
|
package/FRAME_VIEWS.md
CHANGED
|
@@ -60,6 +60,47 @@ rest. Colors written with them follow Light, Dark and White automatically.
|
|
|
60
60
|
Frame views are not required to use them; the appearance check reports
|
|
61
61
|
hard-coded colors as advice instead of refusing the view.
|
|
62
62
|
|
|
63
|
+
## Layout
|
|
64
|
+
|
|
65
|
+
StillMade zooms a view to fill the space its Step gives it (up to 150%), and
|
|
66
|
+
Ctrl/Cmd +, - and 0 size the view while it has focus. It never centers a frame
|
|
67
|
+
view; a standard view narrower than its Step is centered by its margins.
|
|
68
|
+
|
|
69
|
+
An app that lays itself out (a full-size canvas or WebGL, its own scroll, pan
|
|
70
|
+
or zoom, its own Ctrl/Cmd +/- keys, as in a CAD or drawing tool) puts
|
|
71
|
+
`data-stillmade-layout="own"` on its outermost element:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<div id="root" data-stillmade-layout="own"></div>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
StillMade then never centers or zooms it and leaves Ctrl/Cmd +, - and 0 to the
|
|
78
|
+
app. Without the attribute StillMade also stays out of the way when the view
|
|
79
|
+
looks like an app: no page padding, a clipped page, a root as tall as the frame,
|
|
80
|
+
fixed over half of it or scrolling over half of it, a canvas, SVG or
|
|
81
|
+
`touch-action: none` surface over 40% of it, or a canvas or SVG of 300x200 or
|
|
82
|
+
more with `touch-action: none` (as Three.js's controls set it). Mark the root
|
|
83
|
+
anyway, in `view.html` rather than from code: StillMade reads it before the view
|
|
84
|
+
starts, so the app never shows StillMade's size control or loses a key to it,
|
|
85
|
+
even while it is still loading.
|
|
86
|
+
|
|
87
|
+
A `<video controls>` plays in StillMade's player, the same one as everywhere in
|
|
88
|
+
StillMade: play, timeline, time, sound and full screen along the bottom, shown
|
|
89
|
+
while the pointer is on the video, with keys on the focused video (Space or K,
|
|
90
|
+
the arrows, M, F) and touch. Full screen goes through StillMade, right after a
|
|
91
|
+
click or key in the view; the frame itself has no `allow="fullscreen"`. A
|
|
92
|
+
`<video>` without `controls` is the Block's own and StillMade never touches it,
|
|
93
|
+
so a Block that drives playback (its own timeline, an editor or CAD viewer)
|
|
94
|
+
leaves `controls` out, and `data-stillmade-player="native"` keeps the browser's
|
|
95
|
+
controls. Result pictures from `StillMade.previewImage` in `sm-stage` or
|
|
96
|
+
`sm-gallery`, and any element marked `data-stillmade-expand`, get a full-screen
|
|
97
|
+
button in the bottom-right corner while the pointer is on them; pictures with
|
|
98
|
+
the same value (`data-stillmade-expand="shots"`) open as one set, and
|
|
99
|
+
`data-stillmade-expand="off"` removes the button. The keyboard reaches them
|
|
100
|
+
too: such a picture without a `tabindex` of its own joins the tab order,
|
|
101
|
+
keyboard focus on it shows the button, Enter or Space opens the viewer, and
|
|
102
|
+
closing the viewer gives the focus back to the picture.
|
|
103
|
+
|
|
63
104
|
## Assets
|
|
64
105
|
|
|
65
106
|
Images, fonts, JSON, audio and video the view needs ship as files named by
|
package/INTERFACE_DESIGN.md
CHANGED
|
@@ -41,7 +41,7 @@ piece in Light, Dark and White.
|
|
|
41
41
|
</div>
|
|
42
42
|
|
|
43
43
|
<div class="sm-actions">
|
|
44
|
-
<button type="button" class="sm-primary" id="run" data-stillmade-action="
|
|
44
|
+
<button type="button" class="sm-primary" id="run" data-stillmade-action="make the clip">Make the clip</button>
|
|
45
45
|
<p class="sm-status" id="status" role="status"></p>
|
|
46
46
|
</div>
|
|
47
47
|
|
|
@@ -57,7 +57,7 @@ piece in Light, Dark and White.
|
|
|
57
57
|
| `sm-block` | The one workspace. `data-layout="split"` puts the stage beside the controls on wide screens. |
|
|
58
58
|
| `sm-stage` | The thing being made: preview, media or result. `data-ratio="16:9"`, `"9:16"` or `"1:1"`. |
|
|
59
59
|
| `sm-empty` | An empty stage: a glyph, at most five words, one action. |
|
|
60
|
-
| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
|
|
60
|
+
| `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. The pick is filled with the kit's ink, so it reads at a glance; a `disabled` fieldset keeps its pick and fades the rest. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
|
|
61
61
|
| `sm-field`, `sm-fields` | One short setting on one row, its label beside the control; a responsive group of them. On a phone the control wraps under its label only when both do not fit. A textarea, picture choices, file tiles or a list keep the label above. |
|
|
62
62
|
| `sm-settings` | Short settings side by side, each label beside its control; a narrow cell wraps the control under its label. |
|
|
63
63
|
| `sm-list` | Many items, one line each: a thumbnail, one line of text, a short fact. An item that opens in place is an `li` holding a `details`. `data-peek` shows three on a phone, with a last `li.sm-list-more` button that sets `data-open`. |
|
|
@@ -67,7 +67,8 @@ piece in Light, Dark and White.
|
|
|
67
67
|
| `sm-more` | A closed `<details>` for secondary settings. |
|
|
68
68
|
| `sm-hint` | A closed `<details>` info toggle for an explanation that might help. |
|
|
69
69
|
| `sm-gallery` | A grid of results or media. `data-size="small"` for input files: more tiles per row as the screen widens. |
|
|
70
|
-
| `sm-
|
|
70
|
+
| `sm-media-off` | A picture or clip that cannot show here (on another device, or it did not open): a quiet tile in its own shape (`--sm-photo-ratio`, the tile's shape in a gallery) holding the `image-off` glyph, the reason in `aria-label` and `title`, no words inside. |
|
|
71
|
+
| `sm-glyph` | A small icon in `currentColor`: `play`, `pause`, `plus`, `close`, `check`, `chevron`, `upload`, `image`, `image-off`, `video`, `audio`, `text`, `spark`, `info`, `warning`, `spinner`. Works in standard views, which cannot use SVG. |
|
|
71
72
|
|
|
72
73
|
**Function first.** When the person building a Block does not ask for a look,
|
|
73
74
|
use the kit as is: they want it to work and be easy to use. When they name a
|
|
@@ -83,8 +84,9 @@ designs keep `appearance: "original"`.
|
|
|
83
84
|
| might help some people (what a setting does, a format limit) | Put them in a closed `sm-hint`, or secondary settings in a closed `sm-more`. |
|
|
84
85
|
| report an error, a spending approval, a stale input or a destructive step | Keep them visible, in few words. Say what to do next. |
|
|
85
86
|
|
|
86
|
-
Buttons say the action in one to
|
|
87
|
-
|
|
87
|
+
Buttons say the action in the job's words, one to four of them ("Plan the tour",
|
|
88
|
+
"Make 6 clips", "Export"), never "Make it". Status says the state in one to four
|
|
89
|
+
words ("Making the clip", "Ready", "Needs approval").
|
|
88
90
|
|
|
89
91
|
The button that makes something names what it makes ("Write", "Generate image",
|
|
90
92
|
"Make video"), never "Run", "Run step", "Submit" or "Review cost", and says the
|
|
@@ -98,7 +100,56 @@ the same single priced button. Pressing a priced button runs at that price; a
|
|
|
98
100
|
confirmation appears only when the server's price is higher than the one shown.
|
|
99
101
|
Do not write credit numbers in the Block.
|
|
100
102
|
|
|
101
|
-
## 3.
|
|
103
|
+
## 3. Speak the job
|
|
104
|
+
|
|
105
|
+
These are StillMade's defaults for every Block, and they apply wherever the
|
|
106
|
+
person or the creator has not asked for something else. What they ask for wins.
|
|
107
|
+
|
|
108
|
+
- **The job's words everywhere.** Bringing ("Your listing photos"), starting
|
|
109
|
+
("Plan the tour"), working ("Moving through the kitchen, 4 of 9 rooms"),
|
|
110
|
+
done ("Your tour · 44 s") and problems ("No bathroom photo. Guests look for
|
|
111
|
+
one." with Add photo beside it). Never "Make it", "Run", "Submit",
|
|
112
|
+
"Process", "Processing", "Output" or "Result".
|
|
113
|
+
- **Name the Step's button in `manifest.action`**:
|
|
114
|
+
`{"label":"Plan the tour","running":"Planning the tour…"}`. StillMade adds the
|
|
115
|
+
price ("Plan the tour · 1 credit"). A picture, video or sound made with AI
|
|
116
|
+
starts with Generate and says what ("Generate tour", "Generate voiceover");
|
|
117
|
+
cutting or rendering the person's own media says Make ("Make 6 clips").
|
|
118
|
+
Bare "Generate" or "Make" is not enough.
|
|
119
|
+
- **The main button stands out.** One solid `sm-primary` per screen, in the
|
|
120
|
+
kit's ink, never restyled to the page's background or a ghost outline; every
|
|
121
|
+
other button is `sm-quiet` or an `sm-icon`. Close is an X icon, not the word.
|
|
122
|
+
- **Quiet.** At most one line of guidance on a screen, only where the next
|
|
123
|
+
move is not obvious. No welcome text, tips under fields, tours or banners.
|
|
124
|
+
Anything more goes in the input's `description`, which StillMade shows
|
|
125
|
+
behind an (i).
|
|
126
|
+
- **Say nothing about how the Block works.** No notes on where it runs (this
|
|
127
|
+
device, StillMade Desktop, the cloud), saving, syncing, recovery, accounts,
|
|
128
|
+
credits or where a file is kept: StillMade says what a person needs, as one
|
|
129
|
+
short notification, or nothing. Never a sentence on the page, and never the
|
|
130
|
+
same line under each item.
|
|
131
|
+
- **References fill your inputs.** Every drop area in StillMade offers "Use a
|
|
132
|
+
reference": the person's saved photos, videos and notes fill the Step's
|
|
133
|
+
fields with no typing. Media inputs fill by kind, so take `video` or `asset`
|
|
134
|
+
wherever a clip works as well as a photo. Text inputs fill by their name and
|
|
135
|
+
label: name them plainly (`productName`, `website`, `brandColors`, `fonts`,
|
|
136
|
+
`voice`), and give the one that takes a reference's note a name such as
|
|
137
|
+
`details`, `notes` or `listingDetails`; when a note has to be split across
|
|
138
|
+
several fields StillMade does it free. Never build your own reference
|
|
139
|
+
picker or library upload.
|
|
140
|
+
- **Days and times are picked, never typed.** Use the `date` type. StillMade
|
|
141
|
+
shows a calendar, and a list of times as well when the input is about a time
|
|
142
|
+
(a name such as `postAt` or `startsAt`, a label with Time, When or Starts, or
|
|
143
|
+
a value with a time). In a custom view use `<input type="date">` or
|
|
144
|
+
`type="datetime-local"`, never a text box for a date.
|
|
145
|
+
- **Posting is its own Step.** Sending a result to Instagram, TikTok, email or
|
|
146
|
+
any app is a connector Step after the Block, and StillMade words its button
|
|
147
|
+
("Post to Instagram"). A Block never posts from inside itself.
|
|
148
|
+
- **Chat can do all of it.** Every button carries `data-stillmade-action`
|
|
149
|
+
naming what it does and every field a label, so the project's Chat can press
|
|
150
|
+
and fill them.
|
|
151
|
+
|
|
152
|
+
## 4. Rules
|
|
102
153
|
|
|
103
154
|
These are requirements for every author, person or model. Not all are checked
|
|
104
155
|
automatically. An explicit request from the person can authorize a named
|
|
@@ -150,7 +201,16 @@ exception, never unrelated technical UI.
|
|
|
150
201
|
within reach. Extra width goes to the result, never to wider text
|
|
151
202
|
fields. Before there is a result, the stage previews what will be made
|
|
152
203
|
from the inputs given so far, not an empty box. `data-layout="stack"`
|
|
153
|
-
keeps one column.
|
|
204
|
+
keeps one column. StillMade zooms a view to fill its space and centers a
|
|
205
|
+
standard view narrower than its Step (by its margins only, so a margin
|
|
206
|
+
the view sets wins). An app that lays itself out (full-size canvas or
|
|
207
|
+
WebGL, its own scroll, pan or zoom, its own Ctrl/Cmd +/- keys) puts
|
|
208
|
+
`data-stillmade-layout="own"` on its outermost element, and StillMade
|
|
209
|
+
then never centers, zooms or takes those keys. StillMade plays every
|
|
210
|
+
`<video controls>` in its own player with full screen, and puts a
|
|
211
|
+
full-screen button on result pictures in `sm-stage` or `sm-gallery` and
|
|
212
|
+
on anything marked `data-stillmade-expand`; a `<video>` without
|
|
213
|
+
`controls` is the Block's own and is never touched.
|
|
154
214
|
17. Settings sit side by side, next to what they change. Short settings are
|
|
155
215
|
an `sm-settings` grid, and three or four short options (Low / Med /
|
|
156
216
|
High, 16:9 / 9:16 / 1:1) are one `data-segmented` row, not big tiles.
|
|
@@ -165,8 +225,24 @@ exception, never unrelated technical UI.
|
|
|
165
225
|
20. Nothing is lost when a Block gets smaller. Every control stays on the
|
|
166
226
|
screen, behind an (i), in `sm-more`, or inside the item it belongs to.
|
|
167
227
|
Compacting moves controls; it never deletes them.
|
|
228
|
+
21. A picked option reads at a glance. The kit fills an `sm-choices` pick with
|
|
229
|
+
its ink (`--fg` behind `--bg` words, the same inversion as every
|
|
230
|
+
segmented control in StillMade); never restyle it to an outline, a tint or
|
|
231
|
+
the page's background. A locked row (`disabled`, or a person who can only
|
|
232
|
+
view) keeps its pick filled, fades the other options and does not react to
|
|
233
|
+
the pointer.
|
|
234
|
+
22. Media that cannot show here (kept on another device, or it did not open)
|
|
235
|
+
keeps its place as a quiet `sm-media-off` tile in its own shape with the
|
|
236
|
+
`image-off` glyph, the reason in its `aria-label` and `title`. Never words
|
|
237
|
+
in its place:
|
|
238
|
+
|
|
239
|
+
```html
|
|
240
|
+
<span class="sm-media-off" role="img" aria-label="On another device" title="On another device" style="--sm-photo-ratio:3/2">
|
|
241
|
+
<span class="sm-glyph" data-glyph="image-off" aria-hidden="true"></span>
|
|
242
|
+
</span>
|
|
243
|
+
```
|
|
168
244
|
|
|
169
|
-
##
|
|
245
|
+
## 5. What StillMade checks
|
|
170
246
|
|
|
171
247
|
- Admission rejects a primary textarea of 12 or more rows when no task
|
|
172
248
|
presentation (stage, media, list or `StillMade.render`) is detected
|
|
@@ -175,6 +251,11 @@ exception, never unrelated technical UI.
|
|
|
175
251
|
ungrouped options, more than one `h1`, a visible paragraph over twenty words,
|
|
176
252
|
a word dropdown for something people see or hear, a bare browser file
|
|
177
253
|
picker, and a size limit printed in view.
|
|
254
|
+
- Readiness notes settings left loose on the page: three or more `sm-field`
|
|
255
|
+
outside an `sm-fields`, `sm-settings`, `sm-more` or `sm-list` group. The kit
|
|
256
|
+
gives that group its own surface, so the inputs, the settings and the result
|
|
257
|
+
read apart; the SDK gate and StillMade's builder send the note back like any
|
|
258
|
+
Wording note.
|
|
178
259
|
- Admission warns about the compact rules it can see in the source: a short
|
|
179
260
|
input or select whose label sits above it outside `sm-field` / `sm-settings`
|
|
180
261
|
(a `<br>` between them, or a label made `display: block`); a heading,
|
|
@@ -190,6 +271,17 @@ exception, never unrelated technical UI.
|
|
|
190
271
|
(`blockKitProblems`; the failing rules are `BLOCK_KIT_READINESS_RULES`). StillMade's own Block builder also sends back a custom
|
|
191
272
|
view that is not built from `sm-block`, unless the person asked for their
|
|
192
273
|
own look (`appearance: "original"`).
|
|
274
|
+
- Admission warns, and readiness lists a "Wording" limitation, when a button
|
|
275
|
+
says "Make it", "Generate", "Create", "Process" or "Do it"; when progress
|
|
276
|
+
says "Processing", "Loading" or "Working"; when a visible line explains where
|
|
277
|
+
the Block runs or how it saves; when a date is typed into a text box; when
|
|
278
|
+
the CSS turns `sm-primary` into a background-coloured button; when the CSS
|
|
279
|
+
takes the ink fill off a pick (`.sm-choices label:has(input:checked)` with a
|
|
280
|
+
transparent or page-coloured background, or the ink as its text colour); and
|
|
281
|
+
when the page or a string in its code says where a file is kept ("Only on
|
|
282
|
+
this device", "Not on this device"). Clear
|
|
283
|
+
every one before you hand the Block back, unless the person asked for those
|
|
284
|
+
words. They never refuse a release.
|
|
193
285
|
- The host supplies the Project Type step bar and omits its own title and frame
|
|
194
286
|
around custom views, and does not add a "Technical result" disclosure.
|
|
195
287
|
- HTML, JavaScript, permission and appearance validation are separate checks.
|
package/MOBILE_UI.md
CHANGED
|
@@ -37,7 +37,9 @@ still owns specialized workspace layout. A 320 CSS-pixel phone viewport leaves
|
|
|
37
37
|
less than 320 pixels inside the host's preview gutters. Size from the embedded
|
|
38
38
|
view's actual container, avoid a 320-pixel minimum width, wrap long labels, and
|
|
39
39
|
isolate intentional canvas/timeline panning from
|
|
40
|
-
the surrounding toolbar.
|
|
40
|
+
the surrounding toolbar. A `<video controls>` gets StillMade's player, whose
|
|
41
|
+
44-pixel controls a tap shows for 3 seconds (a first tap never starts playback),
|
|
42
|
+
and a result picture's full-screen button shows for 3 seconds after a tap on it. Provide visible buttons or menus for actions otherwise
|
|
41
43
|
available by hover, drag, right-click, or keyboard shortcut. Label fields and
|
|
42
44
|
announce loading, errors, and completed output with `role="status"`,
|
|
43
45
|
`role="alert"`, or `aria-live` as appropriate. For deterministic custom-view
|