terrier-engine 4.3.0 → 4.4.0

package/api.ts

@@ -4,6 +4,11 @@ import { QueryParams } from "tuff-core/urls"
 const log = new Logger('Api')
 log.level = 'debug'
 
+
+////////////////////////////////////////////////////////////////////////////////
+// Basic Requests
+////////////////////////////////////////////////////////////////////////////////
+
 /**
  * All API responses containing these fields.
  */
@@ -104,9 +109,123 @@ async function post<ResponseType>(url: string, body: Record<string, unknown> | F
 }
 
 
+////////////////////////////////////////////////////////////////////////////////
+// Event Streams
+////////////////////////////////////////////////////////////////////////////////
+
+type LogLevel = 'success' | 'info' | 'warn' | 'debug'
+
+/**
+ * Type of log events from a streaming response.
+ */
+export type LogEvent = {
+    level: LogLevel
+    prefix?: string
+    message: string
+}
+
+/**
+ * Type of error events from a streaming response.
+ */
+export type ErrorEvent = {
+    prefix?: string
+    message: string
+    backtrace: string[]
+}
+
+/**
+ * Configure a `Streamer`.
+ */
+export type StreamOptions = {
+    keepAlive?: boolean
+}
+
+type noArgListener = () => any
+
+type StreamLifecycle = 'close'
+
+/**
+ * Exposes a typesafe API for handling streaming responses using SSE.
+ */
+export class Streamer {
+
+    sse!: EventSource
+    lifecycleListeners: Record<StreamLifecycle, noArgListener[]> = {
+        close: []
+    }
+
+    constructor(readonly url: string, readonly options: StreamOptions) {
+        this.sse = new EventSource(url)
+
+        // this is a special event sent by the ResponseStreamer on the server
+        // to tell us that the request is done
+        this.sse.addEventListener('_close', evt => {
+            if (!this.options.keepAlive) {
+                log.debug(`Closing Streamer at ${url}`, evt)
+                this.sse.close()
+                for (const listener of this.lifecycleListeners['close']) {
+                    listener()
+                }
+            }
+        })
+    }
+
+    /**
+     * Register a listener for events of the given type.
+     * @param type
+     * @param listener
+     */
+    on<T>(type: string, listener: (event: T) => any) {
+        this.sse.addEventListener(type, event => {
+            const data = JSON.parse(event.data) as T
+            log.debug(`${type} event`, data)
+            listener(data)
+        })
+        return this
+    }
+
+    /**
+     * Listen specifically for log events.
+     * @param listener
+     */
+    onLog(listener: (event: LogEvent) => any) {
+        return this.on<LogEvent>('_log', listener)
+    }
+
+    /**
+     * Listen specifically for error events.
+     * @param listener
+     */
+    onError(listener: (event: ErrorEvent) => any) {
+        return this.on<ErrorEvent>('_error', listener)
+    }
+
+    onClose(listener: noArgListener) {
+        this.lifecycleListeners['close'].push(listener)
+    }
+}
+
+
+
+/**
+ * Creates a streaming response for the given endpoint.
+ * @param url
+ * @param options pass `keepAlive: true` to keep retrying the request
+ * @return a `Streamer` on which you attach event handlers
+ */
+function stream(url: string, options: StreamOptions={}): Streamer {
+    return new Streamer(url, options)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
 const Api = {
     safeGet,
     safePost,
-    post
+    post,
+    stream
 }
 export default Api

package/app.ts

@@ -9,6 +9,8 @@ import {OverlayLayerType, OverlayPart} from "./overlays"
 
 // @ts-ignore
 import logoUrl from './images/optimized/terrier-hub-logo-light.svg'
+import Sheets, {AlertSheetState, ConfirmSheetState, Sheet, SheetState} from "./sheets";
+import {messages} from "tuff-core";
 
 const log = new Logger('App')
 Logger.level = 'info'
@@ -93,4 +95,58 @@ export abstract class TerrierApp<TState> extends TerrierPart<TState> {
     }
 
 
+    /// Sheets
+
+    /**
+     * Shows a confirm sheet to the user, asking them a question
+     * @param options
+     * @param callback gets called if the user hits "Confirm"
+     */
+    confirm(options: ConfirmSheetState, callback: () => any) {
+        const key = messages.untypedKey()
+        const state = {...options,
+            primaryActions: [
+                {
+                    title: 'Confirm',
+                    icon: 'glyp-checkmark',
+                    click: {key}
+                }
+            ],
+            secondaryActions: [
+                {
+                    title: 'Cancel',
+                    icon: 'glyp-close',
+                    classes: ['secondary'],
+                    click: {key: Sheets.clearKey}
+                }
+            ]
+        } as SheetState
+        const sheet = this.overlayPart.getOrCreateLayer(Sheet<SheetState>, state, 'sheet')
+        sheet.onClick(key, _ => {
+            sheet.clear()
+            callback()
+        })
+        sheet.dirty()
+    }
+
+    /**
+     * Shows an alert sheet to the user with a message (but no choices).
+     * @param options
+     */
+    alert(options: AlertSheetState) {
+        const state = {...options,
+            primaryActions: [
+                {
+                    title: 'Okay',
+                    icon: 'glyp-checkmark',
+                    click: {key: Sheets.clearKey},
+                    classes: ['secondary']
+                }
+            ]
+        } as SheetState
+        const sheet = this.overlayPart.getOrCreateLayer(Sheet<SheetState>, state, 'sheet')
+        sheet.dirty()
+    }
+
+
 }

package/attachments.ts

@@ -0,0 +1,55 @@
+import {Logger} from "tuff-core/logging"
+
+const log = new Logger('Attachments')
+
+type MetaData = {
+    size: number
+    filename: string
+    mime_type: string
+}
+
+type ShrineAttachment = {
+    id: string
+    storage: string
+    metadata: MetaData
+    path?: string // used to send tmp filepath to server
+}
+
+type Derivatives = {
+    thumbnail?: ShrineAttachment
+}
+
+export type Attachment = ShrineAttachment & { derivatives?: Derivatives }
+
+/**
+ * Constructs a url pointing to the original or a derivative of the attachment
+ * @param attachment
+ * @param derivative
+ */
+function url(attachment: Attachment, derivative: keyof Derivatives | null) {
+    let path = '/uploads'
+    let id
+
+    if (derivative?.length && attachment.derivatives) {
+        const derivativeId = attachment.derivatives[derivative]?.id
+        if (derivativeId?.length) {
+            path += '/permanent'
+            id = derivativeId
+        } else {
+            log.info(`${derivative} not found, returning original`)
+        }
+    }
+
+    if (!id) {
+        path += '/cache'
+        id = attachment.id
+    }
+
+    return `${path}/${id}`
+}
+
+const Attachments = {
+    url
+}
+
+export default Attachments

package/format.ts

@@ -0,0 +1,24 @@
+
+////////////////////////////////////////////////////////////////////////////////
+// Currency
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Formats a cents value as a dollars string.
+ * @param c an integer number of cents
+ */
+function cents(c: number | string): string {
+    const num = typeof c == 'number' ? c : parseInt(c)
+    return '$' + (num/100).toFixed(2)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Format = {
+    cents
+}
+
+export default Format

package/forms.ts

@@ -1,5 +1,10 @@
-import {SelectOptions} from "tuff-core/forms"
+import {Field, FormFields, FormPartData, InputType, KeyOfType, SelectOptions} from "tuff-core/forms"
 import {strings} from "tuff-core"
+import {DbErrors} from "./db-client"
+import {PartTag} from "tuff-core/parts"
+import {InputTag, InputTagAttrs} from "tuff-core/html"
+import TerrierPart from "./parts/terrier-part";
+import {an} from "vitest/dist/types-ad1c3f45";
 
 ////////////////////////////////////////////////////////////////////////////////
 // Options
@@ -20,6 +25,52 @@ function titleizeOptions(opts: string[], blank?: string): SelectOptions {
 }
 
 
+////////////////////////////////////////////////////////////////////////////////
+// Form Fields
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Override regular `FormFields` methods to include validation errors.
+ */
+export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
+
+    errors?: DbErrors<T>
+
+    /**
+     * You must pass a `TerrierPart` so that we can render the error bubble with it.
+     * @param part
+     * @param data
+     * @param errors
+     */
+    constructor(part: TerrierPart<any>, data: T, errors?: DbErrors<T>) {
+        super(part, data)
+        this.errors = errors
+    }
+
+    protected input<Key extends KeyOfType<T, any> & string>(parent: PartTag, type: InputType, name: Key, serializerType: {
+        new(name: string): Field<any, Element>
+    }, attrs?: InputTagAttrs): InputTag {
+        if (this.errors && this.errors[name]) {
+            attrs ||= {}
+            attrs.classes ||= []
+            attrs.classes.push('error')
+        }
+        return super.input(parent, type, name, serializerType, attrs);
+    }
+
+    /**
+     * Only renders the error bubble if the errors are set.
+     * @param parent
+     */
+    renderErrorBubble(parent: PartTag) {
+        if (this.errors) {
+            (this.part as TerrierPart<an>).renderErrorBubble(parent, this.errors)
+        }
+    }
+}
+
+
+
 ////////////////////////////////////////////////////////////////////////////////
 // Export
 ////////////////////////////////////////////////////////////////////////////////

package/fragments.ts

@@ -11,6 +11,18 @@ abstract class ContentFragment {
         
     }
 
+
+    protected _classes: string[] = []
+
+    /**
+     * Add arbitrary classes to the top-level fragment.
+     * @param c
+     */
+    classes(...c: string[]) {
+        this._classes.push(...c)
+        return this
+    }
+
     protected _title?: string
 
     /**
@@ -93,7 +105,7 @@ export class PanelFragment extends ContentFragment {
                 }
             })
             panelActions(panel, this.actions, this.theme)
-        })
+        }).class(...this._classes)
     }
 
 }

package/glyps.ts

@@ -1,6 +1,6 @@
-// This file was automatically generated by glyps:compile on 06/10/23 11:25 AM, DO NOT MANUALLY EDIT!
+// This file was automatically generated by glyps:compile on 06/18/23  3:03 PM, DO NOT MANUALLY EDIT!
 
-const names = ['glyp-abacus', 'glyp-account', 'glyp-accounts_payable', 'glyp-accounts_receivable', 'glyp-action_log', 'glyp-activate', 'glyp-active', 'glyp-activity_high', 'glyp-activity_low', 'glyp-activity_medium', 'glyp-activity_none', 'glyp-address1', 'glyp-adjustment', 'glyp-admin', 'glyp-administration', 'glyp-air_freshener', 'glyp-alert', 'glyp-align_horizontal', 'glyp-align_vertical', 'glyp-anchor', 'glyp-announcement', 'glyp-app_update', 'glyp-append_selection', 'glyp-appointment', 'glyp-appointment_setup', 'glyp-archive', 'glyp-arrow_down', 'glyp-arrow_left', 'glyp-arrow_right', 'glyp-arrow_transfer', 'glyp-arrow_up', 'glyp-ascending', 'glyp-attachment', 'glyp-audit_analyzer', 'glyp-autopay', 'glyp-availability', 'glyp-background_batch', 'glyp-background_job', 'glyp-bait_for_demolition', 'glyp-bar_chart', 'glyp-barcode', 'glyp-bat_exclusion', 'glyp-bed_bug_fumigation', 'glyp-begin_service', 'glyp-belongs_to', 'glyp-billing', 'glyp-billing_office', 'glyp-billing_terms', 'glyp-billto', 'glyp-bioremediation', 'glyp-bird_exclusion', 'glyp-black_light', 'glyp-branch', 'glyp-branch_bats', 'glyp-branch_birds', 'glyp-branch_general', 'glyp-branch_irrigation', 'glyp-branch_landscape', 'glyp-branch_multi_housing', 'glyp-branch_office', 'glyp-branch_orders', 'glyp-branch_residential', 'glyp-branch_sales', 'glyp-branch_termites', 'glyp-branch_weeds', 'glyp-branch_wildlife', 'glyp-build', 'glyp-calculate', 'glyp-calendar', 'glyp-calendar_branch', 'glyp-calendar_map', 'glyp-calendar_rolling', 'glyp-calendar_share', 'glyp-calendar_snap', 'glyp-california', 'glyp-call', 'glyp-callback', 'glyp-camera', 'glyp-cancellation', 'glyp-cancelled', 'glyp-card_american_express', 'glyp-card_discover', 'glyp-card_mastercard', 'glyp-card_visa', 'glyp-catalog', 'glyp-caught', 'glyp-cert', 'glyp-check_all', 'glyp-check_in', 'glyp-check_in_service', 'glyp-checked', 'glyp-checked_empty', 'glyp-checkmark', 'glyp-checkmark_filled', 'glyp-checkout', 'glyp-chemical', 'glyp-chemical_authorization', 'glyp-chemical_backpack_sprayer', 'glyp-chemical_biological_controls', 'glyp-chemical_disinfectant', 'glyp-chemical_fertilizer', 'glyp-chemical_flying_insect_bait', 'glyp-chemical_fumigants', 'glyp-chemical_insect_aerosol', 'glyp-chemical_insect_bait', 'glyp-chemical_insect_dust', 'glyp-chemical_insect_granules', 'glyp-chemical_insect_spray', 'glyp-chemical_label', 'glyp-chemical_mole_bait', 'glyp-chemical_pest_bird_control', 'glyp-chemical_pheromone_products', 'glyp-chemical_power_sprayer', 'glyp-chemical_rodenticide_block', 'glyp-chemical_rodenticide_non_block', 'glyp-chemical_sds', 'glyp-chemical_tree_products', 'glyp-chemical_weed_control', 'glyp-chemical_wildlife_repellents', 'glyp-chemical_wildlife_toxicants', 'glyp-chevron_down', 'glyp-chevron_left', 'glyp-chevron_right', 'glyp-chevron_up', 'glyp-city', 'glyp-click', 'glyp-client_actions', 'glyp-client_pest_sightings', 'glyp-client_required', 'glyp-close', 'glyp-cloud', 'glyp-clypboard', 'glyp-clypedia', 'glyp-clypmart', 'glyp-code', 'glyp-code_details', 'glyp-collections', 'glyp-columns', 'glyp-comment', 'glyp-comment_filled', 'glyp-commission_origin', 'glyp-commissions', 'glyp-company_setup', 'glyp-compass', 'glyp-complete', 'glyp-complete_certificate', 'glyp-complete_enrollment', 'glyp-condition_appliance_machinery', 'glyp-condition_customer', 'glyp-condition_device', 'glyp-condition_door_window', 'glyp-condition_dumpster', 'glyp-condition_entry_point', 'glyp-condition_evidence', 'glyp-condition_exclusion', 'glyp-condition_exterior', 'glyp-condition_interior', 'glyp-condition_plumbing', 'glyp-condition_prep_storage', 'glyp-condition_rodent_evidence', 'glyp-condition_rodent_exclusion', 'glyp-condition_roof_ceiling', 'glyp-condition_structure', 'glyp-condition_supplies', 'glyp-condition_termites', 'glyp-condition_ventilation', 'glyp-condition_wall_floor', 'glyp-condition_wildlife', 'glyp-conditions', 'glyp-consolidate', 'glyp-construction', 'glyp-contract', 'glyp-contract_cancellation', 'glyp-contract_overview', 'glyp-conversation', 'glyp-copesan', 'glyp-copy', 'glyp-credit_memo', 'glyp-credit_non_revenue', 'glyp-credit_production', 'glyp-credit_prospect', 'glyp-credit_sales_bonus', 'glyp-crew', 'glyp-cumulative', 'glyp-cursor', 'glyp-custom_form', 'glyp-customer', 'glyp-customer_service', 'glyp-dashboard', 'glyp-data_dive', 'glyp-database', 'glyp-dead_animal_removal', 'glyp-default', 'glyp-delete', 'glyp-demo_mode', 'glyp-descending', 'glyp-design', 'glyp-desktop', 'glyp-detail_report', 'glyp-developer', 'glyp-device', 'glyp-device_sync', 'glyp-differential', 'glyp-disable', 'glyp-disabled_filled', 'glyp-distribute_horizontal', 'glyp-distribute_vertical', 'glyp-division', 'glyp-document', 'glyp-documentation', 'glyp-documents', 'glyp-download', 'glyp-driving', 'glyp-duplicate', 'glyp-duplicate_location', 'glyp-duration', 'glyp-edit', 'glyp-email', 'glyp-employment', 'glyp-entertainment_public_venues', 'glyp-equipment_bear_trap', 'glyp-equipment_flying_insect_bait_station', 'glyp-equipment_flying_insect_light_trap', 'glyp-equipment_insect_monitor', 'glyp-equipment_lethal_animal_trap', 'glyp-equipment_live_animal_trap', 'glyp-equipment_live_rodent_trap', 'glyp-equipment_maintenance', 'glyp-equipment_map_viewer', 'glyp-equipment_maps', 'glyp-equipment_mosquito_trap', 'glyp-equipment_other', 'glyp-equipment_pheromone_trap', 'glyp-equipment_pick_up', 'glyp-equipment_rodent_bait', 'glyp-equipment_rodent_trap', 'glyp-equipment_termite_bait_station', 'glyp-equipment_termite_monitor', 'glyp-exclusion', 'glyp-expand', 'glyp-expiring', 'glyp-exterior', 'glyp-extras', 'glyp-facebook', 'glyp-farm', 'glyp-farm_grain_seed', 'glyp-fast_and_frequent', 'glyp-favorite', 'glyp-feedback', 'glyp-field_guide', 'glyp-field_training', 'glyp-file_blank', 'glyp-file_html', 'glyp-file_image', 'glyp-file_pdf', 'glyp-file_printable', 'glyp-file_spreadsheet', 'glyp-file_text', 'glyp-filter', 'glyp-finance', 'glyp-finding', 'glyp-folder', 'glyp-followup', 'glyp-food_bev_pharma', 'glyp-formula', 'glyp-fuel', 'glyp-fumigation', 'glyp-function', 'glyp-function_aggregate', 'glyp-function_time', 'glyp-gain_loss', 'glyp-generate_invoices', 'glyp-generate_orders', 'glyp-geo', 'glyp-geo_heat_map', 'glyp-google', 'glyp-google_calendar', 'glyp-government', 'glyp-grain_seed', 'glyp-grid', 'glyp-grouped', 'glyp-grouping_combine', 'glyp-grouping_separate', 'glyp-has_many', 'glyp-health_care', 'glyp-heat_map', 'glyp-heat_treatment', 'glyp-help', 'glyp-hidden', 'glyp-honeybee_removal', 'glyp-housing', 'glyp-in_progress', 'glyp-incomplete_certificate', 'glyp-industrial', 'glyp-info', 'glyp-information_technology', 'glyp-inspect_map', 'glyp-inspections', 'glyp-insulation', 'glyp-interior', 'glyp-invoice', 'glyp-invoice_review', 'glyp-irrigation_install', 'glyp-irrigation_maintenance', 'glyp-items', 'glyp-job', 'glyp-join', 'glyp-join_inner', 'glyp-join_left', 'glyp-justice', 'glyp-k9_inspection', 'glyp-key', 'glyp-label_bottom', 'glyp-label_left', 'glyp-label_right', 'glyp-label_top', 'glyp-labor', 'glyp-landscape', 'glyp-landscape_maintenance', 'glyp-laptop', 'glyp-lead', 'glyp-lead_listing', 'glyp-lead_source', 'glyp-leads_report', 'glyp-learning_hub', 'glyp-ledger', 'glyp-legal', 'glyp-license', 'glyp-lifetime', 'glyp-line_cap_arrow', 'glyp-line_cap_bar', 'glyp-line_cap_circle', 'glyp-line_cap_none', 'glyp-line_caps', 'glyp-line_style', 'glyp-link', 'glyp-location', 'glyp-location_charge', 'glyp-location_credit', 'glyp-location_kind', 'glyp-location_message', 'glyp-location_origin', 'glyp-location_tags', 'glyp-locations', 'glyp-locked', 'glyp-lodging', 'glyp-log_in', 'glyp-log_out', 'glyp-log_report', 'glyp-logbook', 'glyp-logbook_documents', 'glyp-lot_number', 'glyp-manager', 'glyp-map', 'glyp-markdown', 'glyp-market', 'glyp-materials', 'glyp-mattress_encasement', 'glyp-merge', 'glyp-message_billing', 'glyp-message_collections', 'glyp-message_complaint', 'glyp-message_misc', 'glyp-message_technician', 'glyp-messages', 'glyp-misc', 'glyp-miscellaneous', 'glyp-move_order', 'glyp-mowing', 'glyp-multi_housing', 'glyp-mute', 'glyp-navicon', 'glyp-new_location', 'glyp-no_charge', 'glyp-no_service', 'glyp-note', 'glyp-note_access', 'glyp-note_billing', 'glyp-note_collection', 'glyp-note_complaint', 'glyp-note_directions', 'glyp-note_focused', 'glyp-note_office', 'glyp-note_preservice', 'glyp-note_sales', 'glyp-note_service', 'glyp-notification', 'glyp-number', 'glyp-office', 'glyp-office_government', 'glyp-office_training', 'glyp-on_demand', 'glyp-on_demand_order', 'glyp-open', 'glyp-open_invoice', 'glyp-operations', 'glyp-options', 'glyp-order_actions', 'glyp-order_approved', 'glyp-order_batch', 'glyp-order_editor', 'glyp-order_pending', 'glyp-order_series', 'glyp-order_unapproved', 'glyp-org_structure', 'glyp-org_unit', 'glyp-org_unit_settings', 'glyp-origin', 'glyp-origin_client', 'glyp-origin_tech', 'glyp-outlook', 'glyp-overlap', 'glyp-password', 'glyp-past_due', 'glyp-paused', 'glyp-pay_brackets', 'glyp-payment', 'glyp-payment_ach', 'glyp-payment_application_apply', 'glyp-payment_application_correction', 'glyp-payment_application_initial', 'glyp-payment_application_refund', 'glyp-payment_application_transfer', 'glyp-payment_application_unapply', 'glyp-payment_application_unapply_all', 'glyp-payment_applications', 'glyp-payment_batch', 'glyp-payment_cash', 'glyp-payment_check', 'glyp-payment_coupon', 'glyp-payment_credit', 'glyp-payment_discount', 'glyp-payment_eft', 'glyp-payment_finance_charge', 'glyp-payments', 'glyp-payroll', 'glyp-pdf', 'glyp-pending', 'glyp-periodic', 'glyp-periodic_assessment', 'glyp-permission', 'glyp-pest', 'glyp-pest_ants', 'glyp-pest_bats', 'glyp-pest_bed_bugs', 'glyp-pest_birds', 'glyp-pest_crawling_insects', 'glyp-pest_dermestids', 'glyp-pest_fall_invaders', 'glyp-pest_flying_insects', 'glyp-pest_moles', 'glyp-pest_mosquitoes', 'glyp-pest_nuisance_animals', 'glyp-pest_ornamental', 'glyp-pest_ornamental_diseases', 'glyp-pest_roaches', 'glyp-pest_rodents', 'glyp-pest_scorpions', 'glyp-pest_snakes', 'glyp-pest_spiders', 'glyp-pest_stinging_insects', 'glyp-pest_stored_product_pests', 'glyp-pest_ticks_and_fleas', 'glyp-pest_viruses_and_bacteria', 'glyp-pest_weeds', 'glyp-pest_wood_destroyers', 'glyp-phone', 'glyp-pick_date', 'glyp-pick_list', 'glyp-platform_android', 'glyp-platform_ios', 'glyp-platform_macos', 'glyp-platform_windows', 'glyp-play', 'glyp-plus', 'glyp-plus_filled', 'glyp-plus_outline', 'glyp-portal', 'glyp-price_increase', 'glyp-price_increase_alt', 'glyp-pricing_table', 'glyp-print', 'glyp-privacy', 'glyp-product_sale', 'glyp-production', 'glyp-professional_consultation', 'glyp-program', 'glyp-program_elements', 'glyp-program_initiation', 'glyp-program_order', 'glyp-program_review', 'glyp-promo', 'glyp-proposal', 'glyp-protection', 'glyp-purchase_order', 'glyp-quality', 'glyp-query', 'glyp-radio_checked', 'glyp-radio_empty', 'glyp-reassign', 'glyp-receipt', 'glyp-recent', 'glyp-recommendation', 'glyp-record_details', 'glyp-recurring_revenue', 'glyp-redo', 'glyp-refresh', 'glyp-refund', 'glyp-region', 'glyp-released', 'glyp-remove', 'glyp-renewal', 'glyp-report', 'glyp-required_input', 'glyp-reschedule', 'glyp-restaurant_bar', 'glyp-revenue', 'glyp-review', 'glyp-rfid', 'glyp-ride_along', 'glyp-rodent_exclusion', 'glyp-route_change', 'glyp-route_optimization', 'glyp-rows', 'glyp-ruler', 'glyp-sales', 'glyp-sales_contest', 'glyp-sales_pipeline', 'glyp-sales_tax', 'glyp-sales_tax_exemption', 'glyp-schedule_lock', 'glyp-schedule_lock_afternoon', 'glyp-schedule_lock_day', 'glyp-schedule_lock_exact', 'glyp-schedule_lock_four_hour', 'glyp-schedule_lock_morning', 'glyp-schedule_lock_none', 'glyp-schedule_lock_two_day', 'glyp-schedule_lock_two_hour', 'glyp-schedule_lock_week', 'glyp-schedule_tyoe_every', 'glyp-schedule_type_every', 'glyp-schedule_type_none', 'glyp-schedule_type_on_demand', 'glyp-schedule_type_schedule', 'glyp-scheduled', 'glyp-scheduling', 'glyp-school_church', 'glyp-script', 'glyp-search', 'glyp-seeding', 'glyp-segment', 'glyp-sent', 'glyp-sentricon', 'glyp-service_agreement', 'glyp-service_form', 'glyp-service_miscellaneous', 'glyp-service_reminder', 'glyp-service_report', 'glyp-service_request', 'glyp-services', 'glyp-settings', 'glyp-setup', 'glyp-signature', 'glyp-simulator', 'glyp-site_map', 'glyp-site_map_annotation', 'glyp-site_map_chemical', 'glyp-site_map_edit_details', 'glyp-site_map_edit_geo', 'glyp-site_map_equipment', 'glyp-site_map_exterior', 'glyp-site_map_foundation', 'glyp-site_map_icon', 'glyp-site_map_interior', 'glyp-site_map_label', 'glyp-site_map_perimeter', 'glyp-site_map_settings_left', 'glyp-site_map_settings_right', 'glyp-site_map_template', 'glyp-skip', 'glyp-smart_traps', 'glyp-sms', 'glyp-snow_removal', 'glyp-sort', 'glyp-special', 'glyp-split', 'glyp-spp_scorecard', 'glyp-square_edge', 'glyp-start_sheet', 'glyp-start_time', 'glyp-statement', 'glyp-states', 'glyp-sticky', 'glyp-stop_time', 'glyp-store_material', 'glyp-store_order', 'glyp-store_order_back_order', 'glyp-store_order_cancelled', 'glyp-store_order_complete', 'glyp-store_order_pending', 'glyp-store_order_pending_return', 'glyp-store_order_pre_order', 'glyp-store_order_returned', 'glyp-stores', 'glyp-styling', 'glyp-subscribe', 'glyp-supplemental', 'glyp-support', 'glyp-sync', 'glyp-table', 'glyp-tablet', 'glyp-tablets', 'glyp-tag_manager', 'glyp-tags', 'glyp-task_runs', 'glyp-tech_pest_sightings', 'glyp-technician', 'glyp-technician_approach', 'glyp-template', 'glyp-termite_fumigation', 'glyp-terrier', 'glyp-territory', 'glyp-text', 'glyp-thermometer', 'glyp-third_party_billing', 'glyp-ticket_type', 'glyp-tickets', 'glyp-tidy', 'glyp-time', 'glyp-time_entry', 'glyp-timeline', 'glyp-toolbox', 'glyp-tqi', 'glyp-tracker', 'glyp-tracking', 'glyp-training_course', 'glyp-treatment_split', 'glyp-trends', 'glyp-trip_charge', 'glyp-ui_type', 'glyp-unchecked', 'glyp-undo', 'glyp-unit_sweep', 'glyp-unit_tag', 'glyp-university', 'glyp-unlocked', 'glyp-unscheduled', 'glyp-update_check_positions', 'glyp-upload', 'glyp-user', 'glyp-user_credit', 'glyp-user_tags', 'glyp-users', 'glyp-utility', 'glyp-vacation', 'glyp-vacuum', 'glyp-variant', 'glyp-vendor', 'glyp-versions', 'glyp-video', 'glyp-visible', 'glyp-warehouse', 'glyp-wdo', 'glyp-web_dusting', 'glyp-website', 'glyp-wildlife', 'glyp-wildlife_exclusion', 'glyp-winter_check', 'glyp-wizard', 'glyp-work', 'glyp-work_class', 'glyp-work_code', 'glyp-work_order', 'glyp-work_production', 'glyp-work_progress', 'glyp-work_yield', 'glyp-year', 'glyp-yield', 'glyp-zip_code', 'glyp-zone_adjacent', 'glyp-zone_check', 'glyp-zone_production', 'glyp-zone_remote', 'glyp-zoom_fit'] as const
+const names = ['glyp-abacus', 'glyp-account', 'glyp-accounts_payable', 'glyp-accounts_receivable', 'glyp-action_log', 'glyp-activate', 'glyp-active', 'glyp-activity_high', 'glyp-activity_low', 'glyp-activity_medium', 'glyp-activity_none', 'glyp-address1', 'glyp-adjustment', 'glyp-admin', 'glyp-administration', 'glyp-air_freshener', 'glyp-alert', 'glyp-align_horizontal', 'glyp-align_vertical', 'glyp-anchor', 'glyp-announcement', 'glyp-app_update', 'glyp-append_selection', 'glyp-appointment', 'glyp-appointment_setup', 'glyp-archive', 'glyp-arrow_down', 'glyp-arrow_left', 'glyp-arrow_right', 'glyp-arrow_transfer', 'glyp-arrow_up', 'glyp-ascending', 'glyp-attachment', 'glyp-audit_analyzer', 'glyp-autopay', 'glyp-availability', 'glyp-background_batch', 'glyp-background_job', 'glyp-bait_for_demolition', 'glyp-bar_chart', 'glyp-barcode', 'glyp-bat_exclusion', 'glyp-bed_bug_fumigation', 'glyp-begin_service', 'glyp-belongs_to', 'glyp-billing', 'glyp-billing_office', 'glyp-billing_terms', 'glyp-billto', 'glyp-bioremediation', 'glyp-bird_exclusion', 'glyp-black_light', 'glyp-branch', 'glyp-branch_bats', 'glyp-branch_birds', 'glyp-branch_general', 'glyp-branch_irrigation', 'glyp-branch_landscape', 'glyp-branch_multi_housing', 'glyp-branch_office', 'glyp-branch_orders', 'glyp-branch_residential', 'glyp-branch_sales', 'glyp-branch_termites', 'glyp-branch_weeds', 'glyp-branch_wildlife', 'glyp-build', 'glyp-calculate', 'glyp-calendar', 'glyp-calendar_branch', 'glyp-calendar_map', 'glyp-calendar_rolling', 'glyp-calendar_share', 'glyp-calendar_snap', 'glyp-california', 'glyp-call', 'glyp-callback', 'glyp-camera', 'glyp-cancellation', 'glyp-cancelled', 'glyp-card_american_express', 'glyp-card_discover', 'glyp-card_mastercard', 'glyp-card_visa', 'glyp-catalog', 'glyp-caught', 'glyp-cert', 'glyp-check_all', 'glyp-check_in', 'glyp-check_in_service', 'glyp-checked', 'glyp-checked_empty', 'glyp-checkmark', 'glyp-checkmark_filled', 'glyp-checkout', 'glyp-chemical', 'glyp-chemical_authorization', 'glyp-chemical_backpack_sprayer', 'glyp-chemical_biological_controls', 'glyp-chemical_disinfectant', 'glyp-chemical_fertilizer', 'glyp-chemical_flying_insect_bait', 'glyp-chemical_fumigants', 'glyp-chemical_insect_aerosol', 'glyp-chemical_insect_bait', 'glyp-chemical_insect_dust', 'glyp-chemical_insect_granules', 'glyp-chemical_insect_spray', 'glyp-chemical_label', 'glyp-chemical_mole_bait', 'glyp-chemical_pest_bird_control', 'glyp-chemical_pheromone_products', 'glyp-chemical_power_sprayer', 'glyp-chemical_rodenticide_block', 'glyp-chemical_rodenticide_non_block', 'glyp-chemical_sds', 'glyp-chemical_tree_products', 'glyp-chemical_weed_control', 'glyp-chemical_wildlife_repellents', 'glyp-chemical_wildlife_toxicants', 'glyp-chevron_down', 'glyp-chevron_left', 'glyp-chevron_right', 'glyp-chevron_up', 'glyp-city', 'glyp-click', 'glyp-client_actions', 'glyp-client_pest_sightings', 'glyp-client_required', 'glyp-close', 'glyp-cloud', 'glyp-clypboard', 'glyp-clypedia', 'glyp-clypmart', 'glyp-code', 'glyp-code_details', 'glyp-collections', 'glyp-columns', 'glyp-comment', 'glyp-comment_filled', 'glyp-commission_origin', 'glyp-commissions', 'glyp-company_setup', 'glyp-compass', 'glyp-complete', 'glyp-complete_certificate', 'glyp-complete_enrollment', 'glyp-condition_appliance_machinery', 'glyp-condition_customer', 'glyp-condition_device', 'glyp-condition_door_window', 'glyp-condition_dumpster', 'glyp-condition_entry_point', 'glyp-condition_evidence', 'glyp-condition_exclusion', 'glyp-condition_exterior', 'glyp-condition_interior', 'glyp-condition_plumbing', 'glyp-condition_prep_storage', 'glyp-condition_rodent_evidence', 'glyp-condition_rodent_exclusion', 'glyp-condition_roof_ceiling', 'glyp-condition_structure', 'glyp-condition_supplies', 'glyp-condition_termites', 'glyp-condition_ventilation', 'glyp-condition_wall_floor', 'glyp-condition_wildlife', 'glyp-conditions', 'glyp-consolidate', 'glyp-construction', 'glyp-contract', 'glyp-contract_cancellation', 'glyp-contract_overview', 'glyp-conversation', 'glyp-copesan', 'glyp-copy', 'glyp-credit_memo', 'glyp-credit_non_revenue', 'glyp-credit_production', 'glyp-credit_prospect', 'glyp-credit_sales_bonus', 'glyp-crew', 'glyp-cumulative', 'glyp-cursor', 'glyp-custom_form', 'glyp-customer', 'glyp-customer_service', 'glyp-dashboard', 'glyp-data_dive', 'glyp-data_dive_query', 'glyp-data_dives', 'glyp-database', 'glyp-dead_animal_removal', 'glyp-default', 'glyp-delete', 'glyp-demo_mode', 'glyp-descending', 'glyp-design', 'glyp-desktop', 'glyp-detail_report', 'glyp-developer', 'glyp-device', 'glyp-device_sync', 'glyp-differential', 'glyp-disable', 'glyp-disabled_filled', 'glyp-distribute_horizontal', 'glyp-distribute_vertical', 'glyp-division', 'glyp-document', 'glyp-documentation', 'glyp-documents', 'glyp-download', 'glyp-driving', 'glyp-duplicate', 'glyp-duplicate_location', 'glyp-duration', 'glyp-edit', 'glyp-email', 'glyp-employment', 'glyp-entertainment_public_venues', 'glyp-equipment_bear_trap', 'glyp-equipment_flying_insect_bait_station', 'glyp-equipment_flying_insect_light_trap', 'glyp-equipment_insect_monitor', 'glyp-equipment_lethal_animal_trap', 'glyp-equipment_live_animal_trap', 'glyp-equipment_live_rodent_trap', 'glyp-equipment_maintenance', 'glyp-equipment_map_viewer', 'glyp-equipment_maps', 'glyp-equipment_mosquito_trap', 'glyp-equipment_other', 'glyp-equipment_pheromone_trap', 'glyp-equipment_pick_up', 'glyp-equipment_rodent_bait', 'glyp-equipment_rodent_trap', 'glyp-equipment_termite_bait_station', 'glyp-equipment_termite_monitor', 'glyp-exclusion', 'glyp-expand', 'glyp-expiring', 'glyp-exterior', 'glyp-extras', 'glyp-facebook', 'glyp-farm', 'glyp-farm_grain_seed', 'glyp-fast_and_frequent', 'glyp-favorite', 'glyp-feedback', 'glyp-field_guide', 'glyp-field_training', 'glyp-file_blank', 'glyp-file_html', 'glyp-file_image', 'glyp-file_pdf', 'glyp-file_printable', 'glyp-file_spreadsheet', 'glyp-file_text', 'glyp-filter', 'glyp-finance', 'glyp-finding', 'glyp-folder', 'glyp-followup', 'glyp-food_bev_pharma', 'glyp-formula', 'glyp-fuel', 'glyp-fumigation', 'glyp-function', 'glyp-function_aggregate', 'glyp-function_time', 'glyp-gain_loss', 'glyp-generate_invoices', 'glyp-generate_orders', 'glyp-geo', 'glyp-geo_heat_map', 'glyp-google', 'glyp-google_calendar', 'glyp-government', 'glyp-grain_seed', 'glyp-grid', 'glyp-grouped', 'glyp-grouping_combine', 'glyp-grouping_separate', 'glyp-has_many', 'glyp-health_care', 'glyp-heat_map', 'glyp-heat_treatment', 'glyp-help', 'glyp-hidden', 'glyp-honeybee_removal', 'glyp-housing', 'glyp-in_progress', 'glyp-incomplete_certificate', 'glyp-industrial', 'glyp-info', 'glyp-information_technology', 'glyp-inspect_map', 'glyp-inspections', 'glyp-insulation', 'glyp-interior', 'glyp-invoice', 'glyp-invoice_review', 'glyp-irrigation_install', 'glyp-irrigation_maintenance', 'glyp-items', 'glyp-job', 'glyp-join', 'glyp-join_inner', 'glyp-join_left', 'glyp-justice', 'glyp-k9_inspection', 'glyp-key', 'glyp-label_bottom', 'glyp-label_left', 'glyp-label_right', 'glyp-label_top', 'glyp-labor', 'glyp-landscape', 'glyp-landscape_maintenance', 'glyp-laptop', 'glyp-lead', 'glyp-lead_listing', 'glyp-lead_source', 'glyp-leads_report', 'glyp-learning_hub', 'glyp-ledger', 'glyp-legal', 'glyp-license', 'glyp-lifetime', 'glyp-line_cap_arrow', 'glyp-line_cap_bar', 'glyp-line_cap_circle', 'glyp-line_cap_none', 'glyp-line_caps', 'glyp-line_style', 'glyp-link', 'glyp-location', 'glyp-location_charge', 'glyp-location_credit', 'glyp-location_kind', 'glyp-location_message', 'glyp-location_origin', 'glyp-location_tags', 'glyp-locations', 'glyp-locked', 'glyp-lodging', 'glyp-log_in', 'glyp-log_out', 'glyp-log_report', 'glyp-logbook', 'glyp-logbook_documents', 'glyp-lot_number', 'glyp-manager', 'glyp-map', 'glyp-markdown', 'glyp-market', 'glyp-materials', 'glyp-mattress_encasement', 'glyp-merge', 'glyp-message_billing', 'glyp-message_collections', 'glyp-message_complaint', 'glyp-message_misc', 'glyp-message_technician', 'glyp-messages', 'glyp-misc', 'glyp-miscellaneous', 'glyp-move_order', 'glyp-mowing', 'glyp-multi_housing', 'glyp-mute', 'glyp-navicon', 'glyp-new_location', 'glyp-no_charge', 'glyp-no_service', 'glyp-note', 'glyp-note_access', 'glyp-note_billing', 'glyp-note_collection', 'glyp-note_complaint', 'glyp-note_directions', 'glyp-note_focused', 'glyp-note_office', 'glyp-note_preservice', 'glyp-note_sales', 'glyp-note_service', 'glyp-notification', 'glyp-number', 'glyp-office', 'glyp-office_government', 'glyp-office_training', 'glyp-on_demand', 'glyp-on_demand_order', 'glyp-open', 'glyp-open_invoice', 'glyp-operations', 'glyp-options', 'glyp-order_actions', 'glyp-order_approved', 'glyp-order_batch', 'glyp-order_editor', 'glyp-order_pending', 'glyp-order_series', 'glyp-order_unapproved', 'glyp-org_structure', 'glyp-org_unit', 'glyp-org_unit_settings', 'glyp-origin', 'glyp-origin_client', 'glyp-origin_tech', 'glyp-outlook', 'glyp-overlap', 'glyp-password', 'glyp-past_due', 'glyp-paused', 'glyp-pay_brackets', 'glyp-payment', 'glyp-payment_ach', 'glyp-payment_application_apply', 'glyp-payment_application_correction', 'glyp-payment_application_initial', 'glyp-payment_application_refund', 'glyp-payment_application_transfer', 'glyp-payment_application_unapply', 'glyp-payment_application_unapply_all', 'glyp-payment_applications', 'glyp-payment_batch', 'glyp-payment_cash', 'glyp-payment_check', 'glyp-payment_coupon', 'glyp-payment_credit', 'glyp-payment_discount', 'glyp-payment_eft', 'glyp-payment_finance_charge', 'glyp-payments', 'glyp-payroll', 'glyp-pdf', 'glyp-pending', 'glyp-periodic', 'glyp-periodic_assessment', 'glyp-permission', 'glyp-pest', 'glyp-pest_ants', 'glyp-pest_bats', 'glyp-pest_bed_bugs', 'glyp-pest_birds', 'glyp-pest_crawling_insects', 'glyp-pest_dermestids', 'glyp-pest_fall_invaders', 'glyp-pest_flying_insects', 'glyp-pest_moles', 'glyp-pest_mosquitoes', 'glyp-pest_nuisance_animals', 'glyp-pest_ornamental', 'glyp-pest_ornamental_diseases', 'glyp-pest_roaches', 'glyp-pest_rodents', 'glyp-pest_scorpions', 'glyp-pest_snakes', 'glyp-pest_spiders', 'glyp-pest_stinging_insects', 'glyp-pest_stored_product_pests', 'glyp-pest_ticks_and_fleas', 'glyp-pest_viruses_and_bacteria', 'glyp-pest_weeds', 'glyp-pest_wood_destroyers', 'glyp-phone', 'glyp-pick_date', 'glyp-pick_list', 'glyp-platform_android', 'glyp-platform_ios', 'glyp-platform_macos', 'glyp-platform_windows', 'glyp-play', 'glyp-plus', 'glyp-plus_filled', 'glyp-plus_outline', 'glyp-portal', 'glyp-price_increase', 'glyp-price_increase_alt', 'glyp-pricing_table', 'glyp-print', 'glyp-privacy', 'glyp-product_sale', 'glyp-production', 'glyp-professional_consultation', 'glyp-program', 'glyp-program_elements', 'glyp-program_initiation', 'glyp-program_order', 'glyp-program_review', 'glyp-promo', 'glyp-proposal', 'glyp-protection', 'glyp-purchase_order', 'glyp-quality', 'glyp-query', 'glyp-radio_checked', 'glyp-radio_empty', 'glyp-reassign', 'glyp-receipt', 'glyp-recent', 'glyp-recommendation', 'glyp-record_details', 'glyp-recurring_revenue', 'glyp-redo', 'glyp-refresh', 'glyp-refund', 'glyp-region', 'glyp-released', 'glyp-remove', 'glyp-renewal', 'glyp-report', 'glyp-required_input', 'glyp-reschedule', 'glyp-restaurant_bar', 'glyp-revenue', 'glyp-review', 'glyp-rfid', 'glyp-ride_along', 'glyp-rodent_exclusion', 'glyp-route_change', 'glyp-route_optimization', 'glyp-rows', 'glyp-ruler', 'glyp-sales', 'glyp-sales_contest', 'glyp-sales_pipeline', 'glyp-sales_tax', 'glyp-sales_tax_exemption', 'glyp-schedule_lock', 'glyp-schedule_lock_afternoon', 'glyp-schedule_lock_day', 'glyp-schedule_lock_exact', 'glyp-schedule_lock_four_hour', 'glyp-schedule_lock_morning', 'glyp-schedule_lock_none', 'glyp-schedule_lock_two_day', 'glyp-schedule_lock_two_hour', 'glyp-schedule_lock_week', 'glyp-schedule_tyoe_every', 'glyp-schedule_type_every', 'glyp-schedule_type_none', 'glyp-schedule_type_on_demand', 'glyp-schedule_type_schedule', 'glyp-scheduled', 'glyp-scheduling', 'glyp-school_church', 'glyp-script', 'glyp-search', 'glyp-seeding', 'glyp-segment', 'glyp-sent', 'glyp-sentricon', 'glyp-service_agreement', 'glyp-service_form', 'glyp-service_miscellaneous', 'glyp-service_reminder', 'glyp-service_report', 'glyp-service_request', 'glyp-services', 'glyp-settings', 'glyp-setup', 'glyp-signature', 'glyp-simulator', 'glyp-site_map', 'glyp-site_map_annotation', 'glyp-site_map_chemical', 'glyp-site_map_edit_details', 'glyp-site_map_edit_geo', 'glyp-site_map_equipment', 'glyp-site_map_exterior', 'glyp-site_map_foundation', 'glyp-site_map_icon', 'glyp-site_map_interior', 'glyp-site_map_label', 'glyp-site_map_perimeter', 'glyp-site_map_settings_left', 'glyp-site_map_settings_right', 'glyp-site_map_template', 'glyp-skip', 'glyp-smart_traps', 'glyp-sms', 'glyp-snow_removal', 'glyp-sort', 'glyp-special', 'glyp-split', 'glyp-spp_scorecard', 'glyp-square_edge', 'glyp-start_sheet', 'glyp-start_time', 'glyp-statement', 'glyp-states', 'glyp-sticky', 'glyp-stop_time', 'glyp-store_material', 'glyp-store_order', 'glyp-store_order_back_order', 'glyp-store_order_cancelled', 'glyp-store_order_complete', 'glyp-store_order_pending', 'glyp-store_order_pending_return', 'glyp-store_order_pre_order', 'glyp-store_order_returned', 'glyp-stores', 'glyp-styling', 'glyp-subscribe', 'glyp-supplemental', 'glyp-support', 'glyp-sync', 'glyp-table', 'glyp-tablet', 'glyp-tablets', 'glyp-tag_manager', 'glyp-tags', 'glyp-task_runs', 'glyp-tech_pest_sightings', 'glyp-technician', 'glyp-technician_approach', 'glyp-template', 'glyp-termite_fumigation', 'glyp-terrier', 'glyp-territory', 'glyp-text', 'glyp-thermometer', 'glyp-third_party_billing', 'glyp-ticket_type', 'glyp-tickets', 'glyp-tidy', 'glyp-time', 'glyp-time_entry', 'glyp-timeline', 'glyp-toolbox', 'glyp-tqi', 'glyp-tracker', 'glyp-tracking', 'glyp-training_course', 'glyp-treatment_split', 'glyp-trends', 'glyp-trip_charge', 'glyp-ui_type', 'glyp-unchecked', 'glyp-undo', 'glyp-unit_sweep', 'glyp-unit_tag', 'glyp-university', 'glyp-unlocked', 'glyp-unscheduled', 'glyp-update_check_positions', 'glyp-upload', 'glyp-user', 'glyp-user_credit', 'glyp-user_tags', 'glyp-users', 'glyp-utility', 'glyp-vacation', 'glyp-vacuum', 'glyp-variant', 'glyp-vendor', 'glyp-versions', 'glyp-video', 'glyp-visible', 'glyp-warehouse', 'glyp-wdo', 'glyp-web_dusting', 'glyp-website', 'glyp-wildlife', 'glyp-wildlife_exclusion', 'glyp-winter_check', 'glyp-wizard', 'glyp-work', 'glyp-work_class', 'glyp-work_code', 'glyp-work_order', 'glyp-work_production', 'glyp-work_progress', 'glyp-work_yield', 'glyp-year', 'glyp-yield', 'glyp-zip_code', 'glyp-zone_adjacent', 'glyp-zone_check', 'glyp-zone_production', 'glyp-zone_remote', 'glyp-zoom_fit'] as const
 
 const Glyps = {
   names

package/ids.ts

@@ -0,0 +1,12 @@
+/**
+ * Makes a new UUID.
+ */
+function makeUuid(): string {
+    return URL.createObjectURL(new Blob([])).slice(-36)
+}
+
+const Ids = {
+    makeUuid
+}
+
+export default Ids

package/modals.ts

@@ -44,7 +44,11 @@ export abstract class ModalPart<TState> extends ContentPart<TState> {
         const secondaryActions = this.getActions('secondary')
         const primaryActions = this.getActions('primary')
         if (secondaryActions.length || primaryActions.length) {
-            parent.div('.modal-actions', actions => {
+            const actionsClasses = ['modal-actions']
+            if (this._actionLoading) {
+                actionsClasses.push('loading')
+            }
+            parent.div(...actionsClasses, actions => {
                 actions.div('.secondary-actions', container => {
                     this.theme.renderActions(container, secondaryActions, {iconColor: 'white', defaultClass: 'secondary'})
                 })
@@ -55,6 +59,36 @@ export abstract class ModalPart<TState> extends ContentPart<TState> {
         }
     }
 
+    private _actionLoading = false
+
+    /**
+     * Blurs the actions to indicate that the modal is doing something.
+     */
+    startActionLoading() {
+        const elem = this.element
+        if (elem) {
+            const actions = elem.querySelector('.modal-actions')
+            if (actions) {
+                this._actionLoading = true
+                actions.classList.add('loading')
+            }
+        }
+    }
+
+    /**
+     * Call after calling `startActionLoading()` to remove the loading effect.
+     */
+    stopActionLoading() {
+        this._actionLoading = false
+        const elem = this.element
+        if (elem) {
+            const actions = elem.querySelector('.modal-actions')
+            if (actions) {
+                actions.classList.remove('loading')
+            }
+        }
+    }
+
 }
 
 

package/overlays.ts

@@ -9,7 +9,7 @@ const log = new Logger('Overlays')
 // Part
 ////////////////////////////////////////////////////////////////////////////////
 
-const OverlayLayerTypes = ['modal', 'dropdown', 'lightbox', 'jump'] as const
+const OverlayLayerTypes = ['modal', 'dropdown', 'lightbox', 'jump', 'sheet'] as const
 
 /**
  * The type of overlay for any given layer.

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.3.0",
+  "version": "4.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"
@@ -15,9 +15,11 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@types/turbolinks": "^5.2.0",
     "dayjs": "^1.11.7",
     "inflection": "^2.0.1",
-    "tuff-core": "latest"
+    "tuff-core": "latest",
+    "turbolinks": "^5.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.16.3",

package/parts/terrier-part.ts

@@ -1,8 +1,10 @@
-import {Part} from "tuff-core/parts"
+import {Part, PartTag} from "tuff-core/parts"
 import {TerrierApp} from "../app"
 import Loading from "../loading"
-import Theme from "../theme"
+import Theme, {IconName} from "../theme"
 import Toasts, {ToastOptions} from "../toasts"
+import {DbErrors} from "../db-client"
+import inflection from "inflection";
 
 /**
  * Base class for ALL parts in a Terrier application.
@@ -75,6 +77,20 @@ export default abstract class TerrierPart<TState> extends Part<TState> {
     }
 
 
+    /// Errors
+
+    renderErrorBubble(parent: PartTag, errors: DbErrors<any>) {
+        parent.div('.tt-bubble.alert', bubble => {
+            bubble.ul(ul => {
+                for (const kv of Object.entries(errors)) {
+                    const name = inflection.titleize(kv[0])
+                    ul.li().text(`${name} ${kv[1]}`)
+                }
+            })
+        })
+    }
+
+
     /// Toasts
 
     /**
@@ -86,4 +102,31 @@ export default abstract class TerrierPart<TState> extends Part<TState> {
         Toasts.show(message, options, this.theme)
     }
 
+    /**
+     * Show an alert toast with the given message.
+     * @param message
+     * @param icon
+     */
+    alertToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'alert'})
+    }
+
+    /**
+     * Show an info toast with the given message.
+     * @param message
+     * @param icon
+     */
+    infoToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'primary'})
+    }
+
+    /**
+     * Show a success toast with the given message.
+     * @param message
+     * @param icon
+     */
+    successToast(message: string, icon?: IconName) {
+        this.showToast(message, {icon, color: 'success'})
+    }
+
 }

package/schema.ts

@@ -38,10 +38,15 @@ export type HasManyDef = {
  * Definition for a single model in the schema.
  */
 export type ModelDef = {
+    name: string
     table_name: string
     columns: Record<string, ColumnDef>
     belongs_to: Record<string, BelongsToDef>
     has_many: Record<string, HasManyDef>
+    metadata?: {
+        description?: string
+        common?: boolean
+    }
 }
 
 /**
@@ -82,13 +87,36 @@ function belongsToDisplay(belongsTo: BelongsToDef): string {
 }
 
 
+////////////////////////////////////////////////////////////////////////////////
+// Meta
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Gets all models with common=true in the metadata.
+ * @param schema
+ */
+function commonModels(schema: SchemaDef): ModelDef[] {
+    return Object.values(schema.models).filter(m => m.metadata?.common)
+}
+
+/**
+ * Gets all models with common=false (or not defined) in the metadata.
+ * @param schema
+ */
+function uncommonModels(schema: SchemaDef): ModelDef[] {
+    return Object.values(schema.models).filter(m => !(m.metadata?.common))
+}
+
+
 ////////////////////////////////////////////////////////////////////////////////
 // Export
 ////////////////////////////////////////////////////////////////////////////////
 
 const Schema = {
     get,
-    belongsToDisplay
+    belongsToDisplay,
+    commonModels,
+    uncommonModels
 }
 
 export default Schema

package/sheets.ts

@@ -0,0 +1,100 @@
+import {Action, IconName} from "./theme"
+import TerrierPart from "./parts/terrier-part"
+import {PartTag} from "tuff-core/parts"
+import Fragments from "./fragments"
+import {messages} from "tuff-core"
+import {Logger} from "tuff-core/logging"
+
+const log = new Logger('Sheets')
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Parts
+////////////////////////////////////////////////////////////////////////////////
+
+export type SheetState = {
+    title: string
+    icon: IconName
+    body: string
+    primaryActions?: Action[]
+    secondaryActions?: Action[]
+}
+
+const clearKey = messages.untypedKey()
+
+export class Sheet<TState extends SheetState> extends TerrierPart<TState> {
+
+    /**
+     * Removes itself from the DOM.
+     */
+    clear() {
+        log.info("Clearing sheet")
+        this.app.removeOverlay(this.state)
+    }
+
+    async init() {
+        this.onClick(clearKey, _ => {
+            this.clear()
+        })
+    }
+
+    get parentClasses(): Array<string> {
+        return ['tt-sheet']
+    }
+
+    render(parent: PartTag): any {
+        parent.div('.tt-sheet-backdrop')
+        const panel = Fragments.panel(this.theme)
+            .title(this.state.title)
+            .icon(this.state.icon)
+            .content(panel => {
+                panel.class('padded')
+                panel.div('.body').text(this.state.body)
+            })
+        for (const action of this.state.primaryActions || []) {
+            // if it doesn't have a click key, it must be a close button
+            action.click ||= {key: clearKey}
+            panel.addAction(action, 'primary')
+        }
+        for (const action of this.state.secondaryActions || []) {
+            // if it doesn't have a click key, it must be a close button
+            action.click ||= {key: clearKey}
+            panel.addAction(action, 'secondary')
+        }
+        panel.render(parent)
+    }
+
+    update(_elem: HTMLElement) {
+        setTimeout(
+            () => _elem.classList.add('show'),
+            10
+        )
+
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Types
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * State type for a sheet that asks the user to confirm a choice.
+ */
+export type ConfirmSheetState = Pick<SheetState, 'title' | 'body' | 'icon'>
+
+/**
+ * State type for a sheet that tells the user something with no options.
+ */
+export type AlertSheetState = Pick<SheetState, 'title' | 'body' | 'icon'>
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Sheets = {
+    clearKey
+}
+
+export default Sheets

package/tabs.ts

@@ -2,7 +2,7 @@ import {Logger} from "tuff-core/logging"
 import {typedKey} from "tuff-core/messages"
 import {Part, PartParent, PartTag, StatelessPart} from "tuff-core/parts"
 import TerrierPart from "./parts/terrier-part"
-import {Action, IconName} from "./theme";
+import {Action, IconName, Packet} from "./theme"
 
 const log = new Logger("Tabs")
 
@@ -14,6 +14,8 @@ export type TabParams = {
     title: string
     icon?: IconName
     state?: 'enabled' | 'disabled' | 'hidden'
+    classes?: string[]
+    click?: Packet
 }
 
 /**
@@ -81,6 +83,24 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
         this.dirty()
     }
 
+    /**
+     * Removes the tab with the given key.
+     * @param key
+     */
+    removeTab(key: string) {
+        const tab = this.tabs[key]
+        if (tab) {
+            log.info(`Removing tab ${key}`, tab)
+            delete this.tabs[key]
+            this.removeChild(tab.part)
+            this.state.currentTab = undefined
+            this.dirty()
+        }
+        else {
+            log.warn(`No tab ${key} to remove!`)
+        }
+    }
+
     /**
      * Changes this tab container to show the tab with the given key
      * @param tabKey
@@ -137,6 +157,9 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
                         }
                         a.span({text: tab.title})
                         a.emitClick(this.changeTabKey, {tabKey: tab.key})
+                        if (tab.click) {
+                            a.emitClick(tab.click.key, tab.click.data || {})
+                        }
                     })
                 }
                 if (this._afterAction) {
@@ -146,9 +169,12 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
             })
 
             if (currentTabKey) {
-                const currentTabPart = this.tabs[currentTabKey].part
+                const currentTab = this.tabs[currentTabKey]
                 container.div('.tt-tab-content', panel => {
-                    panel.part(currentTabPart as StatelessPart)
+                    if (currentTab.classes?.length) {
+                        panel.class(...currentTab.classes)
+                    }
+                    panel.part(currentTab.part as StatelessPart)
                 })
             }
         })

package/theme.ts

@@ -11,8 +11,8 @@ export interface ThemeType {
 
 export type IconName = GlypName | HubIconName
 
-const ColorNames = [
-    'link', 'primary', 'secondary', 'active', 'pending', 'success', 'alert', 'white', 'inactive'
+export const ColorNames = [
+    'link', 'primary', 'secondary', 'active', 'pending', 'success', 'warn', 'alert', 'white', 'inactive', 'super', 'billing', 'docs'
 ] as const
 
 export type ColorName = typeof ColorNames[number]
@@ -55,16 +55,13 @@ export default class Theme {
             HubIcons.renderIcon(parent, icon as HubIconName, color)
         }
         else { // a regular font icon
-            const classes: string[] = [icon]
-            if (color?.length) {
-                classes.push(color)
-            }
-            parent.i().class(...classes)
+            const iconElem = parent.i('.icon', icon)
+            if (color?.length) iconElem.class(color)
         }
     }
 
     renderCloseIcon(parent: PartTag, color?: ColorName | null): void {
-        const classes = ['glyp-close', 'close']
+        const classes = ['icon', 'glyp-close', 'close']
         if (color?.length) {
             classes.push(color)
         }
@@ -101,6 +98,9 @@ export default class Theme {
                 if (action.title?.length) {
                     a.div('.title', {text: action.title})
                 }
+                else {
+                    a.class('icon-only')
+                }
                 if (action.href?.length) {
                     a.attrs({href: action.href})
                 }