# appshare Bootstrap lane instructions

Use this lane for most appshare mini apps.

Reference implementation: `examples/pending-incidents/` in the repository. It is the Bootstrap golden path and includes static frontend files, Project Functions, table schema, runtime policy, seed data, publish payload, and import job mapping.

## Stack

- HTML.
- CSS.
- Vanilla JavaScript.
- Bootstrap 5, themed by appshare.
- `/sdk/appshare.js`.
- `/sdk/appshare-ui.js`.

Do not use React, Preact, Alpine, Tailwind, shadcn, npm packages, bundlers, or build steps in this lane.

## When to use

Use this lane for:

- CRUD apps.
- Dashboards.
- Forms.
- Master-detail flows of moderate complexity.
- Detail modals.
- Tables, filters, tabs, alerts, toasts, and ordinary dropdowns.
- Product search by EAN or name when `as-combobox` is enough.

Escalate to the React lane only when the app has complex local state, nested views, rich editing, drag/drop, or many reusable interactive components.

## Required scripts

```html
<link rel="stylesheet" href="APPROVED_BOOTSTRAP_5_CSS_URL">
<link rel="stylesheet" href="/sdk/appshare-bootstrap.css">
<script src="/sdk/appshare.js" data-project-id="prj_..." data-environment="dev"></script>
<script src="/sdk/appshare-ui.js"></script>
```

Use the appshare-provided Bootstrap CSS URL when the deployment template exposes one. If the artifact must be fully standalone, inline or publish the approved Bootstrap 5 CSS with the app instead of adding a random CDN dependency.

## Appshare SDK

Create one client:

```js
const appshare = Appshare.create({
  projectId: "prj_...",
  environment: "dev"
});
```

Prefer server-side functions for business logic:

```js
const response = await appshare
  .function("mis_incidencias_pendientes")
  .invoke({ limit: 50 });
```

Use direct tables only for simple UI state or trusted project workflows:

```js
const rows = await appshare.table("incidents").list({ limit: 100 });
```

## Bootstrap rules

- Use Bootstrap layout and components before inventing custom UI.
- Use modals for detail editors.
- Use `table`, `list-group`, `form-control`, `btn`, `badge`, `alert`, `toast`, `nav-tabs`, and `card` sparingly and consistently.
- Keep CSS local and small.
- Do not create a separate design system per app.
- Do not place business rules in the browser when a project function can return the safe result.

## Search dropdown

Bootstrap does not include a searchable dropdown. Use appshare's official combobox:

```html
<as-combobox
  id="productSearch"
  placeholder="Buscar producto por EAN o nombre">
</as-combobox>
```

```js
AppshareUI.combobox("#productSearch", {
  minLength: 2,
  search: async (query) => {
    const response = await appshare
      .function("buscar_producto")
      .invoke({ query });

    return response.result.products.map((product) => ({
      value: product.id,
      label: `${product.ean} · ${product.name}`,
      meta: product.price
    }));
  },
  onSelect: (product) => {
    addOrderLine(product);
  }
});
```

The combobox supports debounce, loading state, empty state, mouse selection, ArrowUp, ArrowDown, Enter, and Escape.

## Master-detail pattern

For a master-detail editor:

- List orders in a Bootstrap table.
- Open the selected order in a Bootstrap modal.
- Keep all modal state in one plain object.
- Use a project function for loading an aggregate view.
- Use a project function for saving a full order with lines when validation matters.
- Use `as-combobox` for EAN/product lookup.

## Forbidden in this lane

- Installing dependencies.
- Using Alpine directives.
- Using React/Preact.
- Calling raw REST routes when the Appshare SDK has a wrapper.
- Reading or exposing secrets in browser code.
- Recreating combobox, modal, toast, table, or form primitives from scratch.