<wcs-state>

this.count = 10;                    // ✓ detected
this["user.name"] = "Bob";          // ✓ detected
this.user.name = "Bob";             // ✗ NOT detected — no path assignment

// Arrays: non-destructive reassignment
this.items = this.items.concat({ id: 4 });   // ✓
this.items = this.items.toSpliced(0, 1);     // ✓
this.items.push({ id: 4 });                  // ✗ in-place mutation not detected

<wcs-state name="cart">...</wcs-state>

<div data-wcs="textContent: total@cart"></div>

export default {
  async $connectedCallback() {        // on connect (awaited)
    const res = await fetch("/api/items");
    this.items = await res.json();
  },
  $disconnectedCallback() {           // on disconnect (sync)
    clearInterval(this.timer);
  },
  $updatedCallback(paths, indexes) {  // after updates (async, not awaited)
    console.log("updated:", paths);
  }
};

export default {
  users: [
    { id: 1, firstName: "Alice", lastName: "Smith" },
    { id: 2, firstName: "Bob",   lastName: "Jones" }
  ],
  get "users.*.fullName"() {
    return this["users.*.firstName"] + " " + this["users.*.lastName"];
  },
  // Path setters — split a write back into its parts
  set "users.*.fullName"(value) {
    const [first, ...rest] = value.split(" ");
    this["users.*.firstName"] = first;
    this["users.*.lastName"]  = rest.join(" ");
  },
  // Top-level aggregation over a wildcard
  get totalUsers() {
    return this.$getAll("users.*.id", []).length;
  }
};

get "categories.*.items.*.label"() {
  return this["categories.*.name"] + " / " + this["categories.*.items.*.name"];
}

property[#modifier]: path[@state][|filter[|filter(args)...]]

<div data-wcs="textContent: count; class.over: count|gt(10)"></div>

<input  data-wcs="value#ro: path">             <!-- read-only, disables two-way -->
<button data-wcs="onclick#prevent: handler">   <!-- preventDefault() -->
<div    data-wcs="onclick#stop: handler">      <!-- stopPropagation() -->
<select data-wcs="value#onchange: path">       <!-- use 'change' event -->
<my-el  data-wcs="value#init=element: path">   <!-- element-owned authority -->
<my-el  data-wcs="value#sync=connect: path">   <!-- defer snapshot until DOM connect -->

<p>Hello, {{ user.name }}!</p>
<p>Count: {{ count|locale }}</p>

<wcs-fetch data-wcs="...: usersFetch"></wcs-fetch>

<!-- Inside a loop -->
<template data-wcs="for: storesFetches">
  <wcs-fetch data-wcs="...: storesFetches.*"></wcs-fetch>
</template>

<!-- Last-wins override -->
<wcs-fetch data-wcs="...: usersFetch; status: alternateStatus"></wcs-fetch>

<template data-wcs="for: users">
  <div data-wcs="textContent: users.*.name"></div>  <!-- full path -->
  <div data-wcs="textContent: .name"></div>          <!-- dot shorthand -->
</template>

<template data-wcs="for: regions">
  <template data-wcs="for: .states">
    <span data-wcs="textContent: .name"></span>
  </template>
</template>

<template data-wcs="if: count|gt(0)">
  <p>Positive</p>
</template>
<template data-wcs="elseif: count|lt(0)">
  <p>Negative</p>
</template>
<template data-wcs="else:">
  <p>Zero</p>
</template>

<button data-wcs="onclick: handleClick">Click</button>
<form data-wcs="onsubmit#prevent: handleSubmit">...</form>

handleClick(event) { console.log("clicked"); }
removeItem(event, index) {
  this.items = this.items.toSpliced(index, 1);
}

export default {
  $commandTokens: ["fetchUsers", "refreshOrders"],

  onClickFetch() {
    this.$command.fetchUsers.emit("/api/users", { method: "GET" });
  }
};

<!-- Subscribe a wc-bindable command to the token -->
<wcs-fetch data-wcs="command.fetch: $command.fetchUsers"></wcs-fetch>

<!-- Or emit the token directly from an event -->
<button data-wcs="onclick: $command.refreshList">Refresh</button>

export default {
  $eventTokens: ["userCreated", "createFailed"],
  $on: {
    userCreated(state, event) {
      state.users = state.users.concat(event.detail);
    },
    createFailed(state, event) {
      state.error = event.detail;
    }
  }
};

<my-form data-wcs="eventToken.created: userCreated; eventToken.error: createFailed"></my-form>

export default {
  prompt: "",

  $streams: {
    tokens: {
      args:    (state) => state.prompt,               // dependency captured here
      source:  (prompt, signal) => llmStream(prompt, signal),
      fold:    (acc, chunk) => acc + chunk,           // accumulate
      initial: ""
    },
    ticker: {
      source: (_args, signal) => priceStream(signal)  // no args → start once, latest value
    }
  }
};

<p data-wcs="textContent: $streamStatus.tokens"></p>  <!-- "idle" | "active" | "done" | "error" -->
<p data-wcs="textContent: $streamError.tokens"></p>   <!-- null or last error -->

class MyComponent extends HTMLElement {
  state = { message: "" };

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <wcs-state bind-component="state"></wcs-state>
      <div>{{ message }}</div>
      <input type="text" data-wcs="value: message" />
    `;
  }
}
customElements.define("my-component", MyComponent);

class MyLightComponent extends HTMLElement {
  state = { message: "" };

  connectedCallback() {
    this.innerHTML = `
      <wcs-state bind-component="state" name="my-light"></wcs-state>
      <div data-wcs="text: message@my-light"></div>
      <input type="text" data-wcs="value: message@my-light" />
    `;
  }
}
customElements.define("my-light-component", MyLightComponent);

<wcs-state>
  <script type="module">
    export default { user: { name: "Alice" } };
  </script>
</wcs-state>

<my-component data-wcs="state.message: user.name"></my-component>

<my-counter data-wc-definition>
  <template shadowrootmode="open">
    <p>{{ count }}</p>
    <button data-wcs="onclick: increment">+1</button>
    <wcs-state>
      <script type="module">
        export default {
          count: 0,
          increment() { this.count++; },
          $bindables: ["count"]
        };
      </script>
    </wcs-state>
  </template>
</my-counter>

<my-counter></my-counter>
<my-counter></my-counter>

class MyChip extends HTMLElement {
  static wcBindable = {
    protocol: "wc-bindable",
    version: 1,
    properties: [
      { name: "data", event: "thing-error" }
    ],
    inputs: [
      { name: "data", attribute: "data" },
      { name: "labelText", attribute: "label-text" },
      { name: "internal" }
    ],
    commands: [
      { name: "fetch", async: true },
      { name: "reset" }
    ]
  };
}

import { renderToString } from "@wcstack/server";

const html = await renderToString(template, {
  baseUrl: "http://localhost:3000"
});

<svg width="200" height="100">
  <template data-wcs="for: points">
    <circle data-wcs="attr.cx: .x; attr.cy: .y; attr.fill: .color" r="5" />
  </template>
</svg>

import { defineState } from "@wcstack/state";

export default defineState({
  count: 0,
  users: [] as { name: string; age: number }[],

  increment() {
    this.count++;                       // ✓ number
    this["users.*.name"];               // ✓ string (dot-path resolution)
    this.$getAll("users.*.age", []);    // ✓ API method
  },

  get "users.*.ageCategory"() {
    return this["users.*.age"] < 25 ? "Young" : "Adult";
  }
});

import { bootstrapState } from "@wcstack/state";

bootstrapState({
  bindAttributeName: "data-wcs",
  tagNames: { state: "wcs-state" },
  locale: "en",
  debug: false,
  enableMustache: true,
  enableDirectionalInitialSync: true,   // default ON (near-zero cost)
  enablePropagationContext: true,       // default ON (near-zero cost)
  enableContractAnalyzer: false         // opt-in
});