docs: Add 'Try in Playground' links to cookbook examples (#776)

<img width="1008" height="316" alt="image"
src="https://github.com/user-attachments/assets/9a24be2e-f473-4438-ab0a-9d152e73548e"
/>

Author: russellhancox

docs/docs/cookbook/cel.mdx

@@ -5,6 +5,7 @@ sidebar_position: 1
 # Common Expression Language (CEL)
 
 import AddedBadge from "@site/src/components/AddedBadge/AddedBadge";
+import PlaygroundLink from "@site/src/components/CELPlayground/PlaygroundLink";
 
 This page lists well-known and/or community-contributed CEL expressions.
 
@@ -23,6 +24,20 @@ before the provided date. This is particularly useful when attached to a
 target.signing_time >= timestamp('2025-05-31T00:00:00Z')
 ```
 
+<PlaygroundLink
+  expression={`target.signing_time >= timestamp('2025-05-31T00:00:00Z')`}
+  context={`
+    target:
+      signing_time: "2025-06-01T00:00:00Z"
+    args:
+      - "--version"
+    envs:
+      HOME: "/Users/admin"
+    euid: 501
+    cwd: "/Applications"
+  `}
+/>
+
 ## Prevent users from disabling gatekeeper
 
 Create a signing ID rule for `platform:com.apple.spctl` and attach the following CEL program
@@ -37,6 +52,26 @@ Create a signing ID rule for `platform:com.apple.spctl` and attach the following
 ].exists(flag, flag in args) ? BLOCKLIST : ALLOWLIST
 ```
 
+<PlaygroundLink
+  expression={`
+    [
+        '--global-disable',
+        '--master-disable',
+        '--disable',
+        '--add',
+        '--remove'
+    ].exists(flag, flag in args) ? BLOCKLIST : ALLOWLIST
+  `}
+  context={`
+    args:
+      - "--master-disable"
+    envs:
+      HOME: "/Users/admin"
+    euid: 0
+    cwd: "/Users/admin"
+  `}
+/>
+
 ## Prevent Timestomping of LaunchAgents and LaunchDaemons <AddedBadge added={"Santa 2025.8"} />
 
 Malware like those produced by the Chollima groups use "timestomping" to reset the
@@ -54,6 +89,24 @@ args.exists(arg, arg in [
 ]) && args.join(" ").contains("Library/Launch") ? BLOCKLIST : ALLOWLIST
 ```
 
+<PlaygroundLink
+  expression={`
+    args.exists(arg, arg in [
+      '-a', '-m', '-r', '-A', '-t'
+    ]) && args.join(" ").contains("Library/Launch") ? BLOCKLIST : ALLOWLIST
+  `}
+  context={`
+    args:
+      - "-t"
+      - "202301010000"
+      - "/Users/admin/Library/LaunchAgents/com.malware.plist"
+    envs:
+      HOME: "/Users/admin"
+    euid: 501
+    cwd: "/Users/admin"
+  `}
+/>
+
 Note this will not stop using the system calls directly or otherwise
 programmatically modifying the timestamps. Also this won't cover modifications
 if the process' current working directory is already in the LaunchDaemons /
@@ -77,6 +130,26 @@ Program
         ".*\\W+display\\W+dialog.*")  ? BLOCKLIST : ALLOWLIST
 ```
 
+<PlaygroundLink
+  expression={`
+    (
+        args.join(" ").lowerAscii().matches(".*\\\\W+with\\\\W+hidden\\\\W+answer.*") ||
+        args.join(" ").lowerAscii().contains("password")
+    ) &&
+        args.join(" ").lowerAscii().matches(
+            ".*\\\\W+display\\\\W+dialog.*")  ? BLOCKLIST : ALLOWLIST
+  `}
+  context={`
+    args:
+      - "-e"
+      - 'display dialog "Enter your password" with hidden answer default answer ""'
+    envs:
+      HOME: "/Users/admin"
+    euid: 501
+    cwd: "/Users/admin"
+  `}
+/>
+
 Note: This will not stop obfuscated osascript that's evaluated at runtime or
 any other malicious behavior triggered through osascript. For better security
 block osascript all together if you can.  Be aware software like the Google
@@ -99,6 +172,22 @@ args.join(" ").contains("-setremotelogin on") ||
 args.join(" ").contains("-setremoteappleevents on") ? BLOCKLIST : ALLOWLIST
 ```
 
+<PlaygroundLink
+  expression={`
+    args.join(" ").contains("-setremotelogin on") ||
+    args.join(" ").contains("-setremoteappleevents on") ? BLOCKLIST : ALLOWLIST
+  `}
+  context={`
+    args:
+      - "-setremotelogin"
+      - "on"
+    envs:
+      HOME: "/Users/admin"
+    euid: 0
+    cwd: "/Users/admin"
+  `}
+/>
+
 ## Prevent Users from Taking and Mounting Time Machine Snapshots
 
 As was presented at [Kawaiicon 2025](https://kawaiicon.org/) by [Calum Hall](https://www.youtube.com/watch?v=hIeNuqq12sk&t=1390s), Time Machine snapshots can be used to bypass [File Access Authorization rules](https://www.youtube.com/watch?v=hIeNuqq12sk&t=1390s).
@@ -110,6 +199,18 @@ You can stop the taking of local snapshots by creating a signing ID for
 'localsnapshot' in args ? BLOCKLIST : ALLOWLIST
 ```
 
+<PlaygroundLink
+  expression={`'localsnapshot' in args ? BLOCKLIST : ALLOWLIST`}
+  context={`
+    args:
+      - "localsnapshot"
+    envs:
+      HOME: "/Users/admin"
+    euid: 0
+    cwd: "/Users/admin"
+  `}
+/>
+
 This will break taking local snapshots via the command line. Alternatively if
 you need to still be able to take time machine snapshots but don't want users
 to mount them locally you can stop the mount of local snapshots with a signing
@@ -120,3 +221,21 @@ ID rule `platform:com.apple.mount_apfs` with the following CEL program
 ('-s' in args &&
   args.exists(arg, arg.contains("com.apple.TimeMachine."))) ? BLOCKLIST : ALLOWLIST
 ```
+
+<PlaygroundLink
+  expression={`
+    ('-s' in args &&
+      args.exists(arg, arg.contains("com.apple.TimeMachine."))) ? BLOCKLIST : ALLOWLIST
+  `}
+  context={`
+    args:
+      - "-s"
+      - "com.apple.TimeMachine.2025-06-01-120000.local"
+      - "/"
+      - "/tmp/snapshot"
+    envs:
+      HOME: "/Users/admin"
+    euid: 0
+    cwd: "/Users/admin"
+  `}
+/>

docs/src/components/CELPlayground/PlaygroundLink.tsx

@@ -0,0 +1,33 @@
+import { encodePlaygroundState } from "./encoding";
+
+function dedent(s: string): string {
+  const lines = s.split("\n");
+  // Remove leading/trailing empty lines
+  while (lines.length && lines[0].trim() === "") lines.shift();
+  while (lines.length && lines[lines.length - 1].trim() === "") lines.pop();
+  // Find minimum indentation across non-empty lines
+  const indent = Math.min(
+    ...lines.filter((l) => l.trim()).map((l) => l.match(/^ */)![0].length),
+  );
+  return lines.map((l) => l.slice(indent)).join("\n");
+}
+
+export default function PlaygroundLink({
+  expression,
+  context,
+}: {
+  expression: string;
+  context: string;
+}) {
+  const hash = encodePlaygroundState(dedent(expression), dedent(context));
+  return (
+    <div className="flex justify-end mb-3">
+      <a
+        href={`/cookbook/cel-playground#${hash}`}
+        className="inline-block px-2 py-0.5 rounded border border-border text-xs font-medium no-underline hover:bg-secondary transition-colors"
+      >
+        Try in Playground →
+      </a>
+    </div>
+  );
+}

docs/src/components/CELPlayground/encoding.ts

@@ -0,0 +1,27 @@
+export function encodePlaygroundState(expr: string, yaml: string): string {
+  const bytes = new TextEncoder().encode(JSON.stringify({ e: expr, c: yaml }));
+  let binary = "";
+  for (const b of bytes) {
+    binary += String.fromCharCode(b);
+  }
+  return btoa(binary);
+}
+
+export function decodePlaygroundState(
+  hash: string,
+): { expression: string; context: string } | null {
+  try {
+    const binary = atob(hash);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    const data = JSON.parse(new TextDecoder().decode(bytes));
+    if (typeof data.e === "string" && typeof data.c === "string") {
+      return { expression: data.e, context: data.c };
+    }
+  } catch {
+    // ignore malformed hash
+  }
+  return null;
+}

docs/src/components/CELPlayground/index.tsx

@@ -11,6 +11,10 @@ import {
   DEFAULT_YAML,
   type EvalResult,
 } from "./eval";
+import {
+  encodePlaygroundState,
+  decodePlaygroundState,
+} from "./encoding";
 
 const commonEditorOptions = {
   minimap: { enabled: false },
@@ -36,34 +40,6 @@ const dataEditorOptions = {
   tabSize: 2,
 };
 
-function encodePlaygroundState(expr: string, yaml: string): string {
-  const bytes = new TextEncoder().encode(JSON.stringify({ e: expr, c: yaml }));
-  let binary = "";
-  for (const b of bytes) {
-    binary += String.fromCharCode(b);
-  }
-  return btoa(binary);
-}
-
-function decodePlaygroundState(
-  hash: string,
-): { expression: string; context: string } | null {
-  try {
-    const binary = atob(hash);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    const data = JSON.parse(new TextDecoder().decode(bytes));
-    if (typeof data.e === "string" && typeof data.c === "string") {
-      return { expression: data.e, context: data.c };
-    }
-  } catch {
-    // ignore malformed hash
-  }
-  return null;
-}
-
 export default function CELPlayground() {
   const { colorMode } = useColorMode();
   const [expression, setExpression] = useState(DEFAULT_EXPRESSION);