tokra 0.0.1.pre.1 → 0.0.1.pre.2

data/examples/verify_rails_sqlite/app/assets/stylesheets/application.css

@@ -0,0 +1,469 @@
+/*
+SPDX-FileCopyrightText: 2026 Kerrick Long <me@kerricklong.com>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+*/
+
+/* 
+ * Tokra Tasks — "Refined Paper" aesthetic
+ * Warm cream palette, editorial serif typography, asymmetric layout
+ * NOTE: Using hex colors instead of OKLCH for WebView compatibiliy
+ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+:root {
+  /* Typography - fall back to system fonts for desktop app */
+  --font-display: Georgia, 'Times New Roman', serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  
+  /* Light mode: warm paper (hex equivalents of OKLCH values) */
+  --surface: #f5f3ed;
+  --surface-elevated: #fdfcfa;
+  --text: #3d3530;
+  --text-muted: #6b635b;
+  --accent: #8b4513;
+  --accent-hover: #6b3410;
+  --border: #ddd8d0;
+  --success: #2d6a4f;
+  --success-bg: #d8f3dc;
+  --strike: #a89f93;
+  --checkbox-bg: #e8e5de;
+  --focus-ring: #a0522d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface: #1a1816;
+    --surface-elevated: #252220;
+    --text: #e8e5e0;
+    --text-muted: #9a958e;
+    --accent: #d4a574;
+    --accent-hover: #e5c09a;
+    --border: #3d3835;
+    --success: #74c69d;
+    --success-bg: #1e3a2a;
+    --strike: #6b655c;
+    --checkbox-bg: #353230;
+    --focus-ring: #cd9a6d;
+  }
+}
+
+html {
+  font-family: var(--font-body);
+  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
+  line-height: 1.55;
+  color: var(--text);
+  background: var(--surface);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  min-height: 100dvh;
+  padding: clamp(1.5rem, 5vw, 4rem);
+  padding-block-start: clamp(2rem, 6vw, 5rem);
+}
+
+/* ═══════════════════════════════════════════════════════
+   NOTICE BANNER
+   ═══════════════════════════════════════════════════════ */
+
+.notice {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  color: var(--success);
+  background: var(--success-bg);
+  border-block-end: 1px solid rgba(45, 106, 79, 0.2);
+  animation: notice-enter 0.3s ease-out;
+}
+
+@keyframes notice-enter {
+  from { 
+    opacity: 0; 
+    transform: translateY(-100%); 
+  }
+}
+
+/* ═══════════════════════════════════════════════════════
+   PAGE HEADER
+   ═══════════════════════════════════════════════════════ */
+
+.page-header {
+  max-width: 36rem;
+  margin-block-end: clamp(2rem, 4vw, 3rem);
+}
+
+.page-title {
+  font-family: var(--font-display);
+  font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.page-subtitle {
+  margin-block-start: 0.5rem;
+  font-size: 1rem;
+  color: var(--text-muted);
+}
+
+/* ═══════════════════════════════════════════════════════
+   TODO LIST
+   ═══════════════════════════════════════════════════════ */
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  max-width: 36rem;
+}
+
+.todo-item {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: start;
+  gap: 1rem;
+  padding-block: 1rem;
+  border-block-end: 1px solid var(--border);
+}
+
+.todo-item:first-child {
+  padding-block-start: 0;
+}
+
+.todo-checkbox {
+  appearance: none;
+  width: 1.375rem;
+  height: 1.375rem;
+  margin-block-start: 0.1rem;
+  background: var(--checkbox-bg);
+  border: 1.5px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.todo-checkbox:hover {
+  border-color: var(--accent);
+}
+
+.todo-checkbox:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.todo-checkbox:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.todo-content {
+  min-width: 0;
+}
+
+.todo-title {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.35;
+  transition: color 0.2s;
+}
+
+.todo-title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.todo-title a:hover {
+  color: var(--accent);
+}
+
+.todo-item[data-completed="true"] .todo-title {
+  color: var(--strike);
+  text-decoration: line-through;
+  text-decoration-color: var(--strike);
+}
+
+.todo-actions {
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.todo-item:hover .todo-actions,
+.todo-item:focus-within .todo-actions {
+  opacity: 1;
+}
+
+/* ═══════════════════════════════════════════════════════
+   EMPTY STATE
+   ═══════════════════════════════════════════════════════ */
+
+.empty-state {
+  max-width: 24rem;
+  padding-block: 3rem;
+  text-align: left;
+}
+
+.empty-state p {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ═══════════════════════════════════════════════════════
+   BUTTONS & LINKS
+   ═══════════════════════════════════════════════════════ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--surface-elevated);
+  background: var(--accent);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.btn:hover {
+  background: var(--accent-hover);
+}
+
+.btn:active {
+  transform: scale(0.98);
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.btn--ghost {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+}
+
+.btn--ghost:hover {
+  color: var(--text);
+  background: var(--surface-elevated);
+  border-color: var(--text-muted);
+}
+
+.btn--danger {
+  background: #b53d3d;
+}
+
+.btn--danger:hover {
+  background: #943030;
+}
+
+.link {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-color: rgba(139, 69, 19, 0.3);
+  text-underline-offset: 2px;
+  transition: text-decoration-color 0.15s;
+}
+
+.link:hover {
+  text-decoration-color: var(--accent);
+}
+
+.link--muted {
+  color: var(--text-muted);
+  text-decoration-color: var(--border);
+}
+
+.link--muted:hover {
+  color: var(--text);
+}
+
+/* ═══════════════════════════════════════════════════════
+   FORMS
+   ═══════════════════════════════════════════════════════ */
+
+.form {
+  max-width: 28rem;
+}
+
+.field {
+  margin-block-end: 1.5rem;
+}
+
+.field label {
+  display: block;
+  margin-block-end: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.field input[type="text"],
+.field textarea {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  color: var(--text);
+  background: var(--surface-elevated);
+  border: 1.5px solid var(--border);
+  border-radius: 6px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.field input[type="text"]:focus,
+.field textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
+}
+
+.field input[type="text"]::placeholder {
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+
+.field-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.field-checkbox label {
+  margin: 0;
+  font-size: 0.9375rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.field-checkbox input[type="checkbox"] {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--checkbox-bg);
+  border: 1.5px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.field-checkbox input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-block-start: 2rem;
+}
+
+.error-list {
+  margin-block-end: 1.5rem;
+  padding: 1rem;
+  background: #f8e8e8;
+  border-inline-start: 3px solid #b53d3d;
+  border-radius: 0 6px 6px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .error-list {
+    background: #2d1f1f;
+  }
+}
+
+.error-list h2 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #b53d3d;
+  margin-block-end: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  .error-list h2 {
+    color: #e57575;
+  }
+}
+
+.error-list ul {
+  margin: 0;
+  padding-inline-start: 1.25rem;
+  font-size: 0.875rem;
+}
+
+/* ═══════════════════════════════════════════════════════
+   DETAIL VIEW
+   ═══════════════════════════════════════════════════════ */
+
+.detail {
+  max-width: 36rem;
+}
+
+.detail-title {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
+  font-weight: 400;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+  margin-block-end: 0.75rem;
+}
+
+.detail-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 100px;
+}
+
+.detail-status--pending {
+  color: var(--accent);
+  background: rgba(139, 69, 19, 0.12);
+}
+
+.detail-status--complete {
+  color: var(--success);
+  background: var(--success-bg);
+}
+
+.detail-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-block-start: 2.5rem;
+  padding-block-start: 1.5rem;
+  border-block-start: 1px solid var(--border);
+}
+
+/* ═══════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════ */
+
+.mt-4 { margin-block-start: 1rem; }
+.mt-6 { margin-block-start: 1.5rem; }
+.mt-8 { margin-block-start: 2rem; }

data/examples/verify_rails_sqlite/app/controllers/application_controller.rb

@@ -0,0 +1,12 @@
+class ApplicationController < ActionController::Base
+  # CSRF protection is unnecessary in Tokra desktop apps.
+  # Custom URL schemes (tokra://) cannot receive cross-site requests
+  # from external websites, eliminating the attack vector.
+  skip_forgery_protection
+
+  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
+  allow_browser versions: :modern
+
+  # Changes to the importmap will invalidate the etag for HTML responses
+  stale_when_importmap_changes
+end

data/examples/verify_rails_sqlite/app/controllers/todos_controller.rb

@@ -0,0 +1,70 @@
+class TodosController < ApplicationController
+  before_action :set_todo, only: %i[ show edit update destroy ]
+
+  # GET /todos or /todos.json
+  def index
+    @todos = Todo.all
+  end
+
+  # GET /todos/1 or /todos/1.json
+  def show
+  end
+
+  # GET /todos/new
+  def new
+    @todo = Todo.new
+  end
+
+  # GET /todos/1/edit
+  def edit
+  end
+
+  # POST /todos or /todos.json
+  def create
+    @todo = Todo.new(todo_params)
+
+    respond_to do |format|
+      if @todo.save
+        format.html { redirect_to @todo, notice: "Todo was successfully created." }
+        format.json { render :show, status: :created, location: @todo }
+      else
+        format.html { render :new, status: :unprocessable_entity }
+        format.json { render json: @todo.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PATCH/PUT /todos/1 or /todos/1.json
+  def update
+    respond_to do |format|
+      if @todo.update(todo_params)
+        format.html { redirect_to @todo, notice: "Todo was successfully updated.", status: :see_other }
+        format.json { render :show, status: :ok, location: @todo }
+      else
+        format.html { render :edit, status: :unprocessable_entity }
+        format.json { render json: @todo.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /todos/1 or /todos/1.json
+  def destroy
+    @todo.destroy!
+
+    respond_to do |format|
+      format.html { redirect_to todos_path, notice: "Todo was successfully destroyed.", status: :see_other }
+      format.json { head :no_content }
+    end
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_todo
+      @todo = Todo.find(params.expect(:id))
+    end
+
+    # Only allow a list of trusted parameters through.
+    def todo_params
+      params.expect(todo: [ :title, :completed ])
+    end
+end

data/examples/verify_rails_sqlite/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/examples/verify_rails_sqlite/app/helpers/todos_helper.rb

@@ -0,0 +1,2 @@
+module TodosHelper
+end

data/examples/verify_rails_sqlite/app/javascript/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"

data/examples/verify_rails_sqlite/app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/examples/verify_rails_sqlite/app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

data/examples/verify_rails_sqlite/app/javascript/controllers/index.js

@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/examples/verify_rails_sqlite/app/jobs/application_job.rb

@@ -0,0 +1,7 @@
+class ApplicationJob < ActiveJob::Base
+  # Automatically retry jobs that encountered a deadlock
+  # retry_on ActiveRecord::Deadlocked
+
+  # Most jobs are safe to ignore if the underlying records are no longer available
+  # discard_on ActiveJob::DeserializationError
+end

data/examples/verify_rails_sqlite/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "from@example.com"
+  layout "mailer"
+end

data/examples/verify_rails_sqlite/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end

data/examples/verify_rails_sqlite/app/models/todo.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+#--
+# SPDX-FileCopyrightText: 2026 Kerrick Long <me@kerricklong.com>
+# SPDX-License-Identifier: AGPL-3.0-or-later
+#++
+
+class Todo < ApplicationRecord
+  validates :title, presence: true
+end

data/examples/verify_rails_sqlite/app/views/layouts/application.html.erb

@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: 2026 Kerrick Long <me@kerricklong.com>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title><%= content_for(:title) || "Tokra Tasks" %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+
+    <!-- Static CSS (avoiding asset pipeline for now) -->
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+
+  <body>
+    <% if notice.present? %>
+      <div class="notice"><%= notice %></div>
+    <% end %>
+    <%= yield %>
+  </body>
+</html>

data/examples/verify_rails_sqlite/app/views/layouts/mailer.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/examples/verify_rails_sqlite/app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>

data/examples/verify_rails_sqlite/app/views/pwa/manifest.json.erb

@@ -0,0 +1,22 @@
+{
+  "name": "VerifyRailsSqlite",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "scope": "/",
+  "description": "VerifyRailsSqlite.",
+  "theme_color": "red",
+  "background_color": "red"
+}