Initial commit

yksa_web/templates/yksa/ui/_chip.html

@@ -0,0 +1,16 @@
+{% comment %}
+Colourless metadata: a version, an identifier, a count, a role. Anything that
+carries no status. If you are reaching for a coloured badge to show a *fact*,
+you want this instead.
+
+    {% include "yksa/ui/_chip.html" with text=element.source.slug mono=1 %}
+
+  text   the chip content (required)
+  icon   Bootstrap Icons name without the `bi-` prefix
+  mono   render monospace -- machine identifiers only
+  title  tooltip
+{% endcomment %}{% spaceless %}
+<span class="yksa-chip{% if mono %} font-monospace{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
+    {% if icon %}<i class="bi bi-{{ icon }}" aria-hidden="true"></i>{% endif %}{{ text }}
+</span>
+{% endspaceless %}

yksa_web/templates/yksa/ui/_empty.html

@@ -0,0 +1,11 @@
+{% comment %}
+Nothing to show, said the same way everywhere.
+
+    {% trans "No widgets yet." as empty_text %}
+    {% include "yksa/ui/_empty.html" with text=empty_text %}
+
+When you can offer the action that resolves the emptiness, build the row inline
+with the same `.yksa-empty` class so the action sits beside the sentence rather
+than under it.
+{% endcomment %}
+<div class="yksa-empty justify-content-center">{{ text }}</div>

yksa_web/templates/yksa/ui/_expect_icon.html

@@ -0,0 +1,15 @@
+{% load i18n %}{% comment %}
+Inline result of an `expect:` assertion on a captured value.
+
+    {% include "yksa/ui/_expect_icon.html" with state=field.expect_state %}
+
+  state  pass | fail | unknown (anything else renders nothing)
+
+Deliberately not a yksa/ui/_state.html state: this annotates one value inside a
+row that already carries a state of its own, and a second pill there would read
+as a second object.
+{% endcomment %}{% spaceless %}
+{% if state == 'pass' %}<i class="bi bi-check-circle-fill text-success" title="{% trans 'Within expected range' %}"></i>
+{% elif state == 'fail' %}<i class="bi bi-x-circle-fill text-danger" title="{% trans 'Outside expected range' %}"></i>
+{% elif state == 'unknown' %}<i class="bi bi-question-circle text-body-secondary" title="{% trans 'Not yet evaluable' %}"></i>{% endif %}
+{% endspaceless %}

yksa_web/templates/yksa/ui/_kpi.html

@@ -0,0 +1,24 @@
+{% comment %}
+KPI tile. One column of a .row-cols-* grid.
+
+    {% include "yksa/ui/_kpi.html" with label=label value=value %}
+    {% include "yksa/ui/_kpi.html" with label=label value=value hint=hint accent="primary" %}
+
+  label   the caption (required)
+  value   the figure (required)
+  hint    muted secondary line under the figure
+  accent  Bootstrap semantic name for a left border -- at most one per strip
+
+A tile whose secondary line is itself markup (a timestamp through
+yksa/ui/_utc.html, say) builds the same three elements inline with the same
+classes, as with .yksa-empty.
+{% endcomment %}
+<div class="col">
+    <div class="card h-100 border-0 bg-white shadow-sm">
+        <div class="card-body py-2 px-3{% if accent %} border-start border-{{ accent }} border-3{% endif %}">
+            <div class="yksa-label text-truncate">{{ label }}</div>
+            <div class="yksa-readout fs-4">{{ value }}</div>
+            {% if hint %}<div class="text-body-secondary small">{{ hint }}</div>{% endif %}
+        </div>
+    </div>
+</div>

yksa_web/templates/yksa/ui/_page_title.html

@@ -0,0 +1,13 @@
+{% comment %}
+Always h1.h3, so pages cannot drift apart. Heading rank is structural; size is
+fixed. Never pick a heading level for its size.
+
+    {% trans "Widgets" as parent %}{% url 'public:widget-list' as parent_url %}
+    {% include "yksa/ui/_page_title.html" with title=widget.name parent=parent parent_url=parent_url %}
+
+Put it inside the page header's flex row; the row owns the actions on the right.
+{% endcomment %}
+<h1 class="h3 mb-0">
+    {% if parent %}<a class="text-decoration-none" href="{{ parent_url }}">{{ parent }}</a> / {% endif %}{{ title }}
+</h1>
+{% if subtitle %}<span class="text-body-secondary small">{{ subtitle }}</span>{% endif %}

yksa_web/templates/yksa/ui/_state.html

@@ -0,0 +1,22 @@
+{% load i18n yksa_ui %}{% comment %}
+The only sanctioned rendering of state. Two vocabularies -- health (ok, warning,
+failed, running, skipped, unknown) and progress (not-started, in-progress,
+complete, forced, skipped, failed) -- one visual treatment. Never describe one
+object with both.
+
+    {% include "yksa/ui/_state.html" with state=run.ui_state %}
+    {% include "yksa/ui/_state.html" with state=plan.ui_state label=plan.progress_label %}
+
+`label` overrides the default word; `title` sets a tooltip. Colour is never the
+only signal, so the icon and the word ship with it.
+
+The mapping from a domain status to a state name lives next to the model, not
+here. A conditional chain choosing a colour inside a template is the bug this
+partial exists to prevent: it is how the same run status ended up green on one
+page and grey on another.
+{% endcomment %}{% state state as s %}{% spaceless %}
+<span class="yksa-state yksa-state-{{ state|default:'unknown' }}"{% if title %} title="{{ title }}"{% endif %}>
+    <i class="bi bi-{{ s.icon }}" aria-hidden="true"></i>
+    <span>{{ label|default:s.label }}</span>
+</span>
+{% endspaceless %}

yksa_web/templates/yksa/ui/_utc.html

@@ -0,0 +1,16 @@
+{% load tz %}{% comment %}
+UTC-primary time: `2026-07-24 11:59:23Z` with the session's zone as a muted
+secondary. Never render bare local time on an epoch, an AOS or a reception
+timestamp -- a reader who does not know which zone they are looking at cannot
+compare two numbers.
+
+    {% include "yksa/ui/_utc.html" with dt=element.epoch %}
+    {% include "yksa/ui/_utc.html" with dt=pass_obj.los date=False %}
+
+  dt       the datetime (required)
+  date     include the date part (default: yes)
+  seconds  include seconds (default: yes)
+  local    show the muted local secondary (default: yes)
+{% endcomment %}{% spaceless %}
+<span class="yksa-utc">{% localtime off %}{% if date|default_if_none:True %}{{ dt|utc|date:"Y-m-d " }}{% endif %}{{ dt|utc|date:"H:i" }}{% if seconds|default_if_none:True %}{{ dt|utc|date:":s" }}{% endif %}Z{% endlocaltime %}{% if local|default_if_none:True %} <span class="yksa-local">{% localtime on %}{{ dt|date:"H:i O" }}{% endlocaltime %}</span>{% endif %}</span>
+{% endspaceless %}