@codyswann/lisa 4.74.9 → 4.75.0

package/plugins/lisa-expo-devin/skills/use-dom/SKILL.md

@@ -0,0 +1,417 @@
+---
+name: use-dom
+description: Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
+version: 1.0.0
+license: MIT
+---
+
+## What are DOM Components?
+
+DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like `recharts`, `react-syntax-highlighter`, or any React web library in your Expo app without modification.
+
+## When to Use DOM Components
+
+Use DOM components when you need:
+
+- **Web-only libraries** — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs
+- **Migrating web code** — Bring existing React web components to native without rewriting
+- **Complex HTML/CSS layouts** — When CSS features aren't available in React Native
+- **iframes or embeds** — Embedding external content that requires a browser context
+- **Canvas or WebGL** — Web graphics APIs not available natively
+
+## When NOT to Use DOM Components
+
+Avoid DOM components when:
+
+- **Native performance is critical** — Webviews add overhead
+- **Simple UI** — React Native components are more efficient for basic layouts
+- **Deep native integration** — Use local modules instead for native APIs
+- **Layout routes** — `_layout` files cannot be DOM components
+
+## Basic DOM Component
+
+Create a new file with the `'use dom';` directive at the top:
+
+```tsx
+// components/WebChart.tsx
+"use dom";
+
+export default function WebChart({
+  data,
+}: {
+  data: number[];
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Chart Data</h2>
+      <ul>
+        {data.map((value, i) => (
+          <li key={i}>{value}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+## Rules for DOM Components
+
+1. **Must have `'use dom';` directive** at the top of the file
+2. **Single default export** — One React component per file
+3. **Own file** — Cannot be defined inline or combined with native components
+4. **Serializable props only** — Strings, numbers, booleans, arrays, plain objects
+5. **Include CSS in the component file** — DOM components run in isolated context
+
+## The `dom` Prop
+
+Every DOM component receives a special `dom` prop for webview configuration. Always type it in your props:
+
+```tsx
+"use dom";
+
+interface Props {
+  content: string;
+  dom: import("expo/dom").DOMProps;
+}
+
+export default function MyComponent({ content }: Props) {
+  return <div>{content}</div>;
+}
+```
+
+### Common `dom` Prop Options
+
+```tsx
+// Disable body scrolling
+<DOMComponent dom={{ scrollEnabled: false }} />
+
+// Flow under the notch (disable safe area insets)
+<DOMComponent dom={{ contentInsetAdjustmentBehavior: "never" }} />
+
+// Control size manually
+<DOMComponent dom={{ style: { width: 300, height: 400 } }} />
+
+// Combine options
+<DOMComponent
+  dom={{
+    scrollEnabled: false,
+    contentInsetAdjustmentBehavior: "never",
+    style: { width: '100%', height: 500 }
+  }}
+/>
+```
+
+## Exposing Native Actions to the Webview
+
+Pass async functions as props to expose native functionality to the DOM component:
+
+```tsx
+// app/index.tsx (native)
+import { Alert } from "react-native";
+import DOMComponent from "@/components/dom-component";
+
+export default function Screen() {
+  return (
+    <DOMComponent
+      showAlert={async (message: string) => {
+        Alert.alert("From Web", message);
+      }}
+      saveData={async (data: { name: string; value: number }) => {
+        // Save to native storage, database, etc.
+        console.log("Saving:", data);
+        return { success: true };
+      }}
+    />
+  );
+}
+```
+
+```tsx
+// components/dom-component.tsx
+"use dom";
+
+interface Props {
+  showAlert: (message: string) => Promise<void>;
+  saveData: (data: {
+    name: string;
+    value: number;
+  }) => Promise<{ success: boolean }>;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function DOMComponent({ showAlert, saveData }: Props) {
+  const handleClick = async () => {
+    await showAlert("Hello from the webview!");
+    const result = await saveData({ name: "test", value: 42 });
+    console.log("Save result:", result);
+  };
+
+  return <button onClick={handleClick}>Trigger Native Action</button>;
+}
+```
+
+## Using Web Libraries
+
+DOM components can use any web library:
+
+```tsx
+// components/syntax-highlight.tsx
+"use dom";
+
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+interface Props {
+  code: string;
+  language: string;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function SyntaxHighlight({ code, language }: Props) {
+  return (
+    <SyntaxHighlighter language={language} style={docco}>
+      {code}
+    </SyntaxHighlighter>
+  );
+}
+```
+
+```tsx
+// components/chart.tsx
+"use dom";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+
+interface Props {
+  data: Array<{ name: string; value: number }>;
+  dom: import("expo/dom").DOMProps;
+}
+
+export default function Chart({ data }: Props) {
+  return (
+    <LineChart width={400} height={300} data={data}>
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Line type="monotone" dataKey="value" stroke="#8884d8" />
+    </LineChart>
+  );
+}
+```
+
+## CSS in DOM Components
+
+CSS imports must be in the DOM component file since they run in isolated context:
+
+```tsx
+// components/styled-component.tsx
+"use dom";
+
+import "@/styles.css"; // CSS file in same directory
+
+export default function StyledComponent({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div className="container">
+      <h1 className="title">Styled Content</h1>
+    </div>
+  );
+}
+```
+
+Or use inline styles / CSS-in-JS:
+
+```tsx
+"use dom";
+
+const styles = {
+  container: {
+    padding: 20,
+    backgroundColor: "#f0f0f0",
+  },
+  title: {
+    fontSize: 24,
+    color: "#333",
+  },
+};
+
+export default function StyledComponent({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Styled Content</h1>
+    </div>
+  );
+}
+```
+
+## Expo Router in DOM Components
+
+The expo-router `<Link />` component and router API work inside DOM components:
+
+```tsx
+"use dom";
+
+import { Link, useRouter } from "expo-router";
+
+export default function Navigation({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  const router = useRouter();
+
+  return (
+    <nav>
+      <Link href="/about">About</Link>
+      <button onClick={() => router.push("/settings")}>Settings</button>
+    </nav>
+  );
+}
+```
+
+### Router APIs That Require Props
+
+These hooks don't work directly in DOM components because they need synchronous access to native routing state:
+
+- `useLocalSearchParams()`
+- `useGlobalSearchParams()`
+- `usePathname()`
+- `useSegments()`
+- `useRootNavigation()`
+- `useRootNavigationState()`
+
+**Solution:** Read these values in the native parent and pass as props:
+
+```tsx
+// app/[id].tsx (native)
+import { useLocalSearchParams, usePathname } from "expo-router";
+import DOMComponent from "@/components/dom-component";
+
+export default function Screen() {
+  const { id } = useLocalSearchParams();
+  const pathname = usePathname();
+
+  return <DOMComponent id={id as string} pathname={pathname} />;
+}
+```
+
+```tsx
+// components/dom-component.tsx
+"use dom";
+
+interface Props {
+  id: string;
+  pathname: string;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function DOMComponent({ id, pathname }: Props) {
+  return (
+    <div>
+      <p>Current ID: {id}</p>
+      <p>Current Path: {pathname}</p>
+    </div>
+  );
+}
+```
+
+## Detecting DOM Environment
+
+Check if code is running in a DOM component:
+
+```tsx
+"use dom";
+
+import { IS_DOM } from "expo/dom";
+
+export default function Component({
+  dom,
+}: {
+  dom?: import("expo/dom").DOMProps;
+}) {
+  return <div>{IS_DOM ? "Running in DOM component" : "Running natively"}</div>;
+}
+```
+
+## Assets
+
+Prefer requiring assets instead of using the public directory:
+
+```tsx
+"use dom";
+
+// Good - bundled with the component
+const logo = require("../assets/logo.png");
+
+export default function Component({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return <img src={logo} alt="Logo" />;
+}
+```
+
+## Usage from Native Components
+
+Import and use DOM components like regular components:
+
+```tsx
+// app/index.tsx
+import { View, Text } from "react-native";
+import WebChart from "@/components/web-chart";
+import CodeBlock from "@/components/code-block";
+
+export default function HomeScreen() {
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Native content above</Text>
+
+      <WebChart data={[10, 20, 30, 40, 50]} dom={{ style: { height: 300 } }} />
+
+      <CodeBlock
+        code="const x = 1;"
+        language="javascript"
+        dom={{ scrollEnabled: true }}
+      />
+
+      <Text>Native content below</Text>
+    </View>
+  );
+}
+```
+
+## Platform Behavior
+
+| Platform | Behavior                            |
+| -------- | ----------------------------------- |
+| iOS      | Rendered in WKWebView               |
+| Android  | Rendered in WebView                 |
+| Web      | Rendered as-is (no webview wrapper) |
+
+On web, the `dom` prop is ignored since no webview is needed.
+
+## Tips
+
+- DOM components hot reload during development
+- Keep DOM components focused — don't put entire screens in webviews
+- Use native components for navigation chrome, DOM components for specialized content
+- Test on all platforms — web rendering may differ slightly from native webviews
+- Large DOM components may impact performance — profile if needed
+- The webview has its own JavaScript context — cannot directly share state with native

package/plugins/lisa-harper-fabric/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-harper-fabric",
-  "version": "4.74.9",
+  "version": "4.75.0",
   "description": "Harper/Fabric-specific rules for TypeScript component apps",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-harper-fabric/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-harper-fabric",
-  "version": "4.74.9",
+  "version": "4.75.0",
   "description": "Harper/Fabric-specific Lisa rules for TypeScript component apps.",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-harper-fabric-agy/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-harper-fabric",
-  "version": "4.74.9",
+  "version": "4.75.0",
   "description": "Harper/Fabric-specific rules for TypeScript component apps",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-harper-fabric-copilot/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-harper-fabric",
-  "version": "4.74.9",
+  "version": "4.75.0",
   "description": "Harper/Fabric-specific rules for TypeScript component apps",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-harper-fabric-cursor/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "lisa-harper-fabric",
-  "version": "4.74.9",
+  "version": "4.75.0",
   "description": "Harper/Fabric-specific rules for TypeScript component apps",
   "author": {
     "name": "Cody Swann"

package/plugins/lisa-harper-fabric-devin/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+  "name": "lisa-harper-fabric",
+  "version": "4.75.0",
+  "description": "Harper/Fabric-specific rules for TypeScript component apps",
+  "author": {
+    "name": "Cody Swann"
+  },
+  "dependencies": [
+    "lisa-typescript"
+  ]
+}

package/plugins/lisa-harper-fabric-devin/.devin-plugin/plugin.json

@@ -0,0 +1,8 @@
+{
+  "name": "lisa-harper-fabric",
+  "version": "4.75.0",
+  "description": "Harper/Fabric-specific rules for TypeScript component apps",
+  "author": {
+    "name": "Cody Swann"
+  }
+}

package/plugins/lisa-harper-fabric-devin/generated-artifact-globs.txt

@@ -0,0 +1,5 @@
+harper-app/resources.js
+harper-app/resource-*.js
+harper-app/*.js
+harper-app/web/**
+harper-app/lib/**

package/plugins/lisa-harper-fabric-devin/hooks/block-generated-artifact-edits.sh

@@ -0,0 +1,141 @@
+#!/bin/bash
+# This file is managed by Lisa.
+# Do not edit directly - changes will be overwritten on the next `lisa` run.
+
+# PreToolUse hook: block Write/Edit/MultiEdit on generated Harper deploy
+# artifacts. Harper/Fabric projects build these files from TypeScript under
+# src/, so direct edits are overwritten by the next build and usually ship as
+# no-op fixes.
+# Reference: https://docs.claude.com/en/docs/claude-code/hooks
+# Exit code 2 blocks the tool call and surfaces stderr to Claude.
+
+JSON_INPUT=$(cat)
+
+command -v jq >/dev/null 2>&1 || exit 0
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+FILE_PATHS=$(printf '%s' "$JSON_INPUT" | jq -r '.tool_input.file_path // empty')
+if [ -z "$FILE_PATHS" ] && [ -f "$SCRIPT_DIR/_extract-edit-paths.sh" ]; then
+  # shellcheck source=/dev/null
+  . "$SCRIPT_DIR/_extract-edit-paths.sh"
+  FILE_PATHS=$(lisa_extract_edit_paths "$JSON_INPUT")
+fi
+[ -n "$FILE_PATHS" ] || exit 0
+
+PLUGIN_ROOT=${CLAUDE_PLUGIN_ROOT:-}
+if [ -z "$PLUGIN_ROOT" ]; then
+  PLUGIN_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+fi
+GLOBS_FILE="$PLUGIN_ROOT/generated-artifact-globs.txt"
+if [ ! -f "$GLOBS_FILE" ]; then
+  GLOBS_FILE="$SCRIPT_DIR/generated-artifact-globs.txt"
+fi
+[ -f "$GLOBS_FILE" ] || exit 0
+
+normalize_path() {
+  local path="$1"
+  path="${path#./}"
+  printf '%s' "$path"
+}
+
+matches_glob() {
+  local file="$1"
+  local glob="$2"
+
+  # Recursive directory globs: "dir/**" matches everything under dir.
+  if [ "${glob: -3}" = "/**" ]; then
+    local dir="${glob%/**}"
+    case "$file" in
+      "$dir"/* | */"$dir"/*) return 0 ;;
+    esac
+    return 1
+  fi
+
+  # Single-star globs like "harper-app/*.js": the star must not cross a
+  # directory separator, so a broadened root-level pattern protects compiled
+  # modules emitted straight into harper-app/ (resources.js, resource-*.js, and
+  # any other build output such as detail-shell-negotiation.js) WITHOUT matching
+  # hand-written files nested one level down (e.g. harper-app/<route>/index.js).
+  case "$glob" in
+    */\** | \**)
+      local base_glob="${glob##*/}"
+      local dir_glob=""
+      case "$glob" in
+        */*) dir_glob="${glob%/*}" ;;
+      esac
+      local file_base="${file##*/}"
+      local file_dir=""
+      case "$file" in
+        */*) file_dir="${file%/*}" ;;
+      esac
+      case "$file_base" in
+        $base_glob) ;;
+        *) return 1 ;;
+      esac
+      [ -z "$dir_glob" ] && return 0
+      # Match the directory exactly, or as a suffix so absolute/prefixed paths
+      # (e.g. /repo/harper-app/foo.js) still resolve.
+      case "$file_dir" in
+        $dir_glob | */"$dir_glob") return 0 ;;
+      esac
+      return 1
+      ;;
+  esac
+
+  # Literal (wildcard-free) globs.
+  case "$file" in
+    $glob | */$glob) return 0 ;;
+  esac
+
+  return 1
+}
+
+# Project-owned allowlist of hand-written files that live under harper-app/ and
+# must NOT be treated as generated (e.g. a hand-authored SEO shell, or route
+# index.js shims kept at the harper-app root). The broadened root-level
+# `harper-app/*.js` protection would otherwise block editing them. One glob per
+# line (same syntax as the globs file); blank lines and `#` comments ignored.
+# Prefer naming compiled resource modules `resource-*.ts` so their JS output is
+# unambiguously generated and never needs allowlisting.
+check_file() {
+  local file_path="$1"
+  local normalized_file
+  normalized_file=$(normalize_path "$file_path")
+  local allowlist_file="${CLAUDE_PROJECT_DIR:-.}/.lisa/harper-generated-artifact-allowlist.txt"
+  if [ -f "$allowlist_file" ]; then
+    while IFS= read -r allow || [ -n "$allow" ]; do
+      [ -n "$allow" ] || continue
+      case "$allow" in \#*) continue ;; esac
+      if matches_glob "$normalized_file" "$allow"; then
+        return 0
+      fi
+    done <"$allowlist_file"
+  fi
+
+  while IFS= read -r glob || [ -n "$glob" ]; do
+    [ -n "$glob" ] || continue
+    case "$glob" in \#*) continue ;; esac
+    if matches_glob "$normalized_file" "$glob"; then
+      cat >&2 <<MSG
+Blocked: direct edit to generated Harper/Fabric artifact.
+
+File: $file_path
+Matched generated artifact pattern: $glob
+
+TypeScript under src/ is the source of truth for Harper resources, web assets,
+and shared libraries. Change the matching TypeScript source under src/ and run
+the project build to regenerate harper-app outputs.
+MSG
+      return 2
+    fi
+  done <"$GLOBS_FILE"
+}
+
+while IFS= read -r FILE_PATH; do
+  [ -n "$FILE_PATH" ] || continue
+  check_file "$FILE_PATH" || exit $?
+done <<EOF
+$FILE_PATHS
+EOF
+
+exit 0

package/plugins/lisa-harper-fabric-devin/hooks/devin-tool-name-shim.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+# Generated by scripts/generate-devin-plugin-artifacts.mjs — do not edit.
+#
+# Devin CLI names its tools in lowercase (exec, write, edit, read, ...) while
+# Lisa's guards test Claude's names (Bash, Write, Edit, Read, ...). The field
+# names inside tool_input already match, so translating tool_name is enough
+# for an unchanged guard to evaluate a Devin tool call (CodySwannGT/lisa#4426).
+#
+# Usage: devin-tool-name-shim.sh <hook command> [args...]
+payload=$(cat)
+normalized=$payload
+if command -v jq >/dev/null 2>&1; then
+  mapped=$(printf '%s' "$payload" | jq -c '
+    if (.tool_name | type) == "string" then
+      .tool_name |= ({
+        "exec": "Bash",
+        "write": "Write",
+        "edit": "Edit",
+        "read": "Read",
+        "notebook_edit": "NotebookEdit",
+        "grep": "Grep",
+        "glob": "Glob",
+        "webfetch": "WebFetch",
+        "run_subagent": "Task",
+        "skill": "Skill",
+        "todo_write": "TodoWrite"
+      }[.] // .)
+    else . end' 2>/dev/null) && [ -n "$mapped" ] && normalized=$mapped
+fi
+printf '%s' "$normalized" | "$@"