@telepath-computer/television 0.1.98 → 0.1.100

package/dist/skills/television-calendar/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: television-calendar
+description: Author self-contained HTML calendar artifacts using the bundled calendar-week elements and copied calendar assets.
+---
+
+# Authoring a calendar week
+
+You must read the main `television` skill first. It defines the general Television workflow, the pending-vs-committed model, and the canonical HTML house style. This skill only adds calendar-specific guidance.
+
+A working-week calendar with a generated header strip, all-day band, time axis,
+and timed event grid. The agent only authors a single `<calendar-week>` plus
+flat sibling `<calendar-event>` children. The component renders the rest.
+
+## Required assets
+
+Every calendar artifact must be self-contained. Read `calendar.css` and
+`calendar.js` from this skill folder and carry them into the artifact output
+instead of referencing `/skills/television-calendar/...` URLs.
+
+For a Television web bundle, copy both files into the artifact's `public/`
+directory and reference them relatively:
+
+```html
+<link rel="stylesheet" href="/canonical/v1/styles.css" />
+<link rel="stylesheet" href="./calendar.css" />
+<script type="module" src="./calendar.js"></script>
+```
+
+For a standalone single-file HTML artifact, inline the contents of
+`calendar.css` and `calendar.js` directly into `<style>` and
+`<script type="module">` tags so the output stays self-contained.
+
+`calendar.js` registers the custom elements. `calendar.css` provides the
+calendar-specific chrome styling. Do not reimplement those elements yourself.
+
+## Markup contract
+
+Author exactly this surface:
+
+```html
+<calendar-week start-date="YYYY-MM-DD" days="N" start-hour="8">
+  <calendar-event title="..." start="..." end="..." color="blue"></calendar-event>
+  <calendar-event title="..." start="..." end="..." all-day color="purple"></calendar-event>
+</calendar-week>
+```
+
+`<calendar-week>` attributes:
+
+- `start-date` is required and must be a real `YYYY-MM-DD` date.
+- `days` is required and should usually be `5` or `7`.
+- `start-hour` is optional. Omit it unless you need a fixed initial scroll position.
+
+`<calendar-event>` attributes:
+
+- `title` is required.
+- `start` is required.
+- `end` is required.
+- `all-day` is optional and presence-only. Use it only for all-day events.
+- `color` is optional. Allowed values: `red`, `orange`, `yellow`, `green`, `blue`, `purple`.
+
+## Timed vs. all-day events
+
+Timed events:
+
+- Omit `all-day`.
+- Use `YYYY-MM-DDTHH:MM` wall-clock datetimes for both `start` and `end`.
+- Keep each event within a single day.
+
+All-day events:
+
+- Include `all-day`.
+- Use date-only `YYYY-MM-DD` values for both `start` and `end`.
+- `end` is non-inclusive, following RFC 5545.
+
+## What the component auto-renders
+
+Do not author any of these directly:
+
+- `<calendar-headers>`
+- `<calendar-day>`
+- `<calendar-allday>`
+- `<calendar-grid>`
+- `<calendar-time-axis>`
+- `<calendar-column>`
+- `<calendar-cell>`
+
+## Behavior to rely on
+
+- all-day events clip silently to the visible range
+- all-day events stack into lanes automatically when their visible spans overlap
+- timed events on the same day cascade to the right when their time ranges overlap
+- malformed events are silently dropped
+
+## Content guidance
+
+- make the schedule feel real
+- vary event titles and durations
+- use the color palette intentionally
+- avoid placeholder text like "Event 1"

package/dist/skills/television-table/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: television-table
+description: Author dense Airtable-style HTML record tables using the shared Television house style.
+---
+
+# Authoring a record table
+
+You must read the main `television` skill first. It defines the general Television workflow and the canonical HTML house style. This skill only adds table-specific guidance.
+
+A dense, Airtable-style table of records. Lots of cells, mixed cell types,
+structured rows. It should look crisp at a glance and read like real software,
+not a styled spreadsheet.
+
+## Required content
+
+- `<h1>` heading with a short title naming the table
+- one paragraph describing what the table contains and how many rows it has
+- a `<table>` with:
+  - a `<thead>` row of column labels
+  - 8–15 `<tbody>` rows of data
+  - 4–6 columns covering a mix of cell types
+  - realistic-looking values, not placeholders
+
+At minimum include:
+
+- one **text** column
+- one **status** column rendered as a pill
+- one **date** column
+- one **person** column
+- one **numeric** or **tag** column
+
+## Page layout
+
+The artifact is a full-width table view, not a centered prose document.
+Do not wrap the content in `<main>` or any other width-constraining container.
+
+Use this page structure:
+
+```html
+<body>
+  <header class="lead">
+    <h1>...</h1>
+    <p class="lede">...</p>
+  </header>
+  <table class="records">
+    ...
+  </table>
+</body>
+```
+
+The page is white throughout. Hairline borders around the thead and between rows do the visual work.
+
+## Styling guidance
+
+- `header.lead` padding: `var(--space-32) var(--space-32) var(--space-16)`
+- `table.records`: `width: 100%; border-collapse: collapse;`
+- use `font-variant-numeric: tabular-nums;`
+- pad the first and last cells so the table aligns with the page gutter
+- keep header text small, muted, and uppercase
+- right-align numeric and date columns
+- make the title cell slightly heavier than surrounding cells
+
+## Borders
+
+- thead gets a top and bottom hairline border
+- tbody rows get muted bottom borders
+- the last tbody row gets the stronger final border
+- no vertical column rules
+
+## Status pills
+
+Status pills should be inline, rounded, and subtle. Use calm background accents rather than loud badges.
+
+## Sections (optional)
+
+A single ungrouped table is the default. Only break into sections when a categorical field is genuinely the main way the user scans the data and each section has enough rows to matter.
+
+If you do use sections:
+
+- render each group as its own `<table>` inside `<section class="group">`
+- repeat the same `<colgroup>` and `<thead>` in every grouped table
+- order active states before terminal states
+
+## Non-goals
+
+- no filtering, sorting, search, or selection UI
+- no nested tables or expandable rows
+- no sticky headers
+- no decorative icon spam

package/dist/views/markdown/manifest.json

@@ -1,5 +1,5 @@
 {
   "name": "Markdown",
   "description": "Renders markdown source with live syntax decoration.",
-  "accepts": ["text/markdown"]
+  "accepts": ["markdown"]
 }