tsquare 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.2
+
+- **Toast corners:** `position` also takes `topLeft`, `topRight`, `bottomLeft` and `bottomRight`, besides `top` and `bottom` (centered, the default). Desktop apps often show toasts in a corner.
+
 ## 0.4.1
 
 ```tsquare

package/dist/catalog.d.ts

@@ -613,7 +613,11 @@ export declare const componentDefinitions: {
             icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             position: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
                 bottom: "bottom";
+                bottomLeft: "bottomLeft";
+                bottomRight: "bottomRight";
                 top: "top";
+                topLeft: "topLeft";
+                topRight: "topRight";
             }>>>;
         }, z.core.$strip>;
         slots: never[];
@@ -1266,7 +1270,11 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 position: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
                     bottom: "bottom";
+                    bottomLeft: "bottomLeft";
+                    bottomRight: "bottomRight";
                     top: "top";
+                    topLeft: "topLeft";
+                    topRight: "topRight";
                 }>>>;
             }, z.core.$strip>;
             slots: never[];

package/dist/chunks/{chunk-QLIHML44.js → chunk-NREXWHAE.js}

@@ -609,7 +609,7 @@ var componentDefinitions = {
       text: o(z.string()),
       action: o(z.string()).describe('A text button, e.g. "Undo"'),
       icon: o(iconName),
-      position: o(z.enum(["bottom", "top"])).describe("Default bottom, above a TabBar")
+      position: o(z.enum(["bottom", "top", "topLeft", "topRight", "bottomLeft", "bottomRight"])).describe("Default bottom (centered), above a TabBar")
     }),
     slots: [],
     description: "Short message over the screen, e.g. after saving. Must be a direct child of a Screen, listed last.",
@@ -1692,8 +1692,10 @@ function Drawer({ element, children }) {
 }
 function Toast({ element, aboveTabBar }) {
   const p = element.props;
-  const top = p.position === "top";
-  return /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 16, right: 16, justifyContent: "center", ...top ? { top: 16 } : { bottom: aboveTabBar ? 92 : 24 } }, children: /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 12, backgroundColor: theme.ink, color: theme.onPrimary, fontSize: 14, boxShadow: "0 6px 20px rgba(0,0,0,0.22)", maxWidth: 420 }, children: [
+  const position = p.position ?? "bottom";
+  const top = position.startsWith("top");
+  const side = position.endsWith("Left") ? "flex-start" : position.endsWith("Right") ? "flex-end" : "center";
+  return /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 16, right: 16, justifyContent: side, ...top ? { top: 16 } : { bottom: aboveTabBar ? 92 : 24 } }, children: /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 12, backgroundColor: theme.ink, color: theme.onPrimary, fontSize: 14, boxShadow: "0 6px 20px rgba(0,0,0,0.22)", maxWidth: 420 }, children: [
     p.icon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.icon, size: 18, color: theme.onPrimary }) : null,
     /* @__PURE__ */ jsx(Box, { style: { flexShrink: 1 }, children: p.text ?? "" }),
     p.action ? /* @__PURE__ */ jsx(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null

package/dist/cli.js

@@ -6,7 +6,7 @@ import {
   printWireframeText,
   renderWireframe,
   wireframePrompt
-} from "./chunks/chunk-QLIHML44.js";
+} from "./chunks/chunk-NREXWHAE.js";
 
 // src/cli.ts
 import { readFile, writeFile } from "node:fs/promises";

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-QLIHML44.js";
+} from "./chunks/chunk-NREXWHAE.js";
 
 // src/share.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";

package/dist/playground/index.js

@@ -11,7 +11,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-QLIHML44.js";
+} from "../chunks/chunk-NREXWHAE.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -394,7 +394,12 @@ var EXAMPLES = {
   screen phone "Top"
     heading "Profile" level=2
     image height=160
-    toast "Changes saved" position=top`
+    toast "Changes saved" position=top
+  screen desktop "Corners: topLeft, topRight, bottomLeft, bottomRight" width=900 height=420
+    heading "Dashboard" level=2
+    image height=220
+    toast "topRight" position=topRight
+    toast "bottomLeft" action="Undo" position=bottomLeft`
 };
 
 // src/playground/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",

package/skill/tsquare/reference.md

@@ -248,4 +248,4 @@ Short message over the screen, e.g. after saving. Must be a direct child of a Sc
 - text: string (main text)
 - action: string — A text button, e.g. "Undo"
 - icon: string — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
-- position: "bottom" | "top" — Default bottom, above a TabBar
+- position: "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" — Default bottom (centered), above a TabBar