@pascal-app/editor 0.4.0

package/src/components/ui/helpers/item-helper.tsx

@@ -0,0 +1,40 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+interface ItemHelperProps {
+  showEsc?: boolean
+}
+
+export function ItemHelper({ showEsc }: ItemHelperProps) {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Place item</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="R" />
+        <span className="text-muted-foreground">Rotate counterclockwise</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="T" />
+        <span className="text-muted-foreground">Rotate clockwise</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Shift" />
+        <span className="text-muted-foreground">Free place</span>
+      </div>
+      {showEsc && (
+        <div className="flex items-center gap-2 text-sm">
+          <ShortcutToken value="Esc" />
+          <span className="text-muted-foreground">Cancel</span>
+        </div>
+      )}
+      {!showEsc && (
+        <div className="flex items-center gap-2 text-sm">
+          <ShortcutToken value="Right click" />
+          <span className="text-muted-foreground">Cancel</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/helpers/roof-helper.tsx

@@ -0,0 +1,16 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+export function RoofHelper() {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Set corner</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/helpers/slab-helper.tsx

@@ -0,0 +1,20 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+export function SlabHelper() {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Add point</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Shift" />
+        <span className="text-muted-foreground">Allow non-45° angles</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/helpers/wall-helper.tsx

@@ -0,0 +1,20 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+export function WallHelper() {
+  return (
+    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Left click" />
+        <span className="text-muted-foreground">Set wall start / end</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Shift" />
+        <span className="text-muted-foreground">Allow non-45° angles</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}