@pen.dev/cli 0.3.11 → 0.3.13

package/dist/out/skills/pen-dev/pen-schema.md

@@ -34,7 +34,7 @@ export interface Position { x?: number; y?: number; }
 export interface Size { width?: NumberOrVariable | SizingBehavior; height?: NumberOrVariable | SizingBehavior; }
 /** Affine matrix [a, b, c, d, tx, ty]. */
 export type AffineTransform = [number, number, number, number, number, number];
-/** Override values for shader uniforms, keyed by uniform name. Uniforms annotated with `@resolution` or `@time` must not appear here. Allowed value shapes: number (float/int), boolean (bool), hex color string like `#RRGGBB[AA]` (color), array of 2-4 numbers (vec2/3/4), or a variable reference `$name` (numeric uniforms accept number variables; color uniforms accept color variables). */
+/** Override values for shader uniforms, keyed by uniform name. Uniforms annotated with `@resolution` or `@time` must not appear here. Allowed value shapes: number (float/int), boolean (bool), hex color string like `#RRGGBB[AA]` (color), array of 2-4 numbers (vec2/3/4), image URL or `pencil:object`/`pencil:background` string (sampler2D), or a variable reference `$name` (numeric uniforms accept number variables; color uniforms accept color variables). */
 export interface ShaderUniforms { [key: string]: number | boolean | string | number[]; }
 export type BlendMode = 'normal' | 'darken' | 'multiply' | 'linearBurn' | 'colorBurn' | 'light' | 'screen' | 'linearDodge' | 'colorDodge' | 'overlay' | 'softLight' | 'hardLight' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
 export type Fill = ColorOrVariable | {
@@ -87,7 +87,7 @@ export interface CanHaveStroke {
   strokeLinejoin?: "miter" | "bevel" | "round";
   strokeAlignment?: "inner" | "center" | "outer";
 }
-export type Effect = /** Blurs the entire node. */ { enabled?: BooleanOrVariable; type: "blur"; radius?: NumberOrVariable } | /** Blurs the backdrop behind the node. */ { enabled?: BooleanOrVariable; type: "background_blur"; radius?: NumberOrVariable } | /** Inner or outer drop shadow. */ { type: "shadow"; enabled?: BooleanOrVariable; shadowType?: "inner" | "outer"; offset?: { x: NumberOrVariable; y: NumberOrVariable }; blur?: NumberOrVariable; color?: ColorOrVariable; blendMode?: BlendMode } | /** Post-processes the rendered node with a fragment shader. Same shader format as the shader fill. A `sampler2D` uniform annotated with `@content` is auto-bound to the rendered node. `@resolution` is the size of the node's visual bounds. */ { type: "shader"; enabled?: BooleanOrVariable; url: string; uniforms?: ShaderUniforms };
+export type Effect = /** Blurs the entire node. */ { enabled?: BooleanOrVariable; type: "blur"; radius?: NumberOrVariable } | /** Blurs the backdrop behind the node. */ { enabled?: BooleanOrVariable; type: "background_blur"; radius?: NumberOrVariable } | /** Inner or outer drop shadow. */ { type: "shadow"; enabled?: BooleanOrVariable; shadowType?: "inner" | "outer"; offset?: { x: NumberOrVariable; y: NumberOrVariable }; blur?: NumberOrVariable; color?: ColorOrVariable; blendMode?: BlendMode } | /** Post-processes the rendered node with a fragment shader. Same shader format as the shader fill. A `sampler2D` uniform set to `pencil:object` is bound to the rendered node. `@resolution` is the size of the node's visual bounds. */ { type: "shader"; enabled?: BooleanOrVariable; url: string; uniforms?: ShaderUniforms };
 export type Effects = Effect | Effect[];
 export interface CanHaveEffects { effect?: Effects; }
 export interface CanHaveGraphics extends CanHaveEffects, CanHaveStroke { fill?: Fills; }

package/dist/out/skills/pen-dev/scripts-and-shaders.md

@@ -48,7 +48,9 @@ The `shader` fill type can be used to create complex graphics effects using WebG
 - Supported uniform types:
   - float, int: as numbers
   - vec2/3/4, ivec2/3/4: as arrays of numbers or "#RRGGBB" strings for colors
-  - sampler2D: as image URL strings
+  - sampler2D: as image URL strings (loaded as with UNPACK_FLIP_Y_WEBGL, so `texture2D(tex, gl_FragCoord.xy / resolution)` shows the image upright), or one of these special URLs:
+    - "pencil:object": the node's own rendering below the shader, over transparent: in a fill the fills under it (plus the node's effects drawn before fills, like shadows), in a stroke additionally all fills, in an effect every fill, stroke and earlier effect. Texels are premultiplied by alpha, like gl_FragColor; outside the node it is transparent.
+    - "pencil:background": the content rendered behind the node, with nothing of the node itself. Outside the node it mirrors. Offset/distort the sampling coordinate for refraction-like effects. Ideal for glass/frosted/refraction/magnifier effects. Prefer "pencil:background" over faking the background.
 - Uniforms can be annotated with special comments:
   - @color: marks vec3 or vec4 uniforms to use color picker controls.
   - @default: sets the default value for the uniform.
@@ -56,8 +58,6 @@ The `shader` fill type can be used to create complex graphics effects using WebG
   - @mouse: set to the mouse position in the same space as gl_FragCoord. For interactive effects.
   - @time: set to the elapsed time in seconds. For animations.
   - @sdf: a sampler2D set to an SDF texture of the node's shape (in a shader effect: of the rendered content). The r channel holds the signed distance in @resolution units (positive = inside). The gb channels hold the gradient of the distance field (direction of increasing distance), in texel space. Use gb instead of numerically differentiating the r channel!
-  - @content: a sampler2D set to the node's own rendering below the shader, over transparent: in a fill the fills under it (plus the node's effects drawn before fills, like shadows), in a stroke additionally all fills, in an effect every fill, stroke and earlier effect. Texels are premultiplied by alpha, like gl_FragColor; outside the node it is transparent.
-  - @backdrop: a sampler2D set to the content rendered behind the node, with nothing of the node itself. Outside the node it mirrors. Offset/distort the sampling coordinate for refraction-like effects. Ideal for glass/frosted/refraction/magnifier effects. Prefer @backdrop over faking the background.
   - @mipmap: the texture will be mipmapped. Off by default. Turn it on when the sample coordinate varies smoothly (glass, refraction, blur); keep it off when it jumps between neighboring pixels (pixelation, mosaics, high-frequency turbulence).
   - @min/@max: set the range of a uniform for better UI controls. Only applies to number uniforms.
   - @range <min>, <max>: shorthand for @min and @max on the same line. Shows a slider in the UI.
@@ -97,19 +97,19 @@ void main() {
 
 ### Shader effects
 
-A `shader` effect (`effect: { type: "shader", url, uniforms }`) post-processes the node: the node, its children and its other effects are rendered into the `@content` texture, and the shader's output is drawn in place of the node. Use it for distortion, pixelation, color grading, glitch and similar effects on existing content. Use a shader fill when the shader generates the image itself. `@content` and `@backdrop` mean the same in fills and effects, so a shader written for one works as the other; a `@backdrop` shader (glass, ripple, ...) refracts what is behind the node either way.
+A `shader` effect (`effect: { type: "shader", url, uniforms }`) post-processes the node: the node, its children and its other effects are rendered into the `pencil:object` texture, and the shader's output is drawn in place of the node. Use it for distortion, pixelation, color grading, glitch and similar effects on existing content. Use a shader fill when the shader generates the image itself. `pencil:object` and `pencil:background` mean the same in fills and effects, so a shader written for one works as the other; a `pencil:background` shader (glass, ripple, ...) refracts what is behind the node either way.
 
-- `@resolution` and `gl_FragCoord` are the same as for a fill: the node's size and the node's own coordinates. The shader is run over the node's visual bounds (strokes, shadows, blur, unclipped children included), so there `gl_FragCoord` goes outside `0..@resolution`, and `@content`, `@sdf` and `@backdrop` cover those bounds too: uv outside `0..1` samples them.
-- Multiple shader effects are chained in list order: each one's `@content` is the output of the previous one.
+- `@resolution` and `gl_FragCoord` are the same as for a fill: the node's size and the node's own coordinates. The shader is run over the node's visual bounds (strokes, shadows, blur, unclipped children included), so there `gl_FragCoord` goes outside `0..@resolution`, and `pencil:object`, `@sdf` and `pencil:background` cover those bounds too: uv outside `0..1` samples them.
+- Multiple shader effects are chained in list order: each one's `pencil:object` is the output of the previous one.
 - `@sdf` is the SDF of the content's alpha channel (edge at 50% alpha), so shadows, blurs and earlier shader effects on the node move the edge.
-- `@content` is rendered over transparent, so blend modes inside the node only blend with the node's own content below them. A blend mode that reaches the bottom of the node (nothing opaque under it) blends with the scene when drawn normally, but not inside `@content`.
-- Combine `@content` and `@backdrop`: distort the shape with `@content` and refract `@backdrop` through the result for a glass effect on a distorted node.
+- `pencil:object` is rendered over transparent, so blend modes inside the node only blend with the node's own content below them. A blend mode that reaches the bottom of the node (nothing opaque under it) blends with the scene when drawn normally, but not inside `pencil:object`.
+- Combine `pencil:object` and `pencil:background`: distort the shape with `pencil:object` and refract `pencil:background` through the result for a glass effect on a distorted node.
 
 ```glsl
 /** @resolution */
 uniform vec2 u_resolution;
 
-/** @content */
+/** @label Content */
 uniform sampler2D u_content;
 
 /**
@@ -124,3 +124,7 @@ void main() {
   gl_FragColor = texture2D(u_content, cell / u_resolution);
 }
 ```
+
+```json
+{ "type": "shader", "url": "pixelate.glsl", "uniforms": { "u_content": "pencil:object" } }
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pen.dev/cli",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "CLI tool for running the pen.dev AI agent manipulating .pen design files",
   "type": "module",
   "main": "dist/index.mjs",
@@ -20,7 +20,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.293",
-    "@earendil-works/pi-coding-agent": "^1.0.1",
+    "@earendil-works/pi-coding-agent": "^1.3.0",
     "@inquirer/prompts": "^8.3.0",
     "@jitl/quickjs-wasmfile-release-asyncify": "^0.32.0",
     "@jitl/quickjs-wasmfile-release-sync": "^0.32.0",
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@ha/agent": "0.1.0",
     "@ha/device-auth": "0.1.0",
+    "@ha/headless": "0.1.0",
     "@ha/ipc": "0.1.0",
     "@ha/mcp": "0.1.0",
     "@ha/mcp-server": "0.1.0",